如何使用 withFonts() 配置 i18n

Posted 2023-03-07

【中文标题】如何使用 withFonts() 配置 i18n

【英文标题】：How to configure i18n with withFonts()

【发布时间】：2021-04-23 14:23:28

【问题描述】：

我正在开发一个使用 Tailwind CSS 进行样式设置的 Next.js 项目。我被困在next.config 文件中。

我几乎已经尝试了一切来使这段代码工作，但不能。

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const webpack = require("webpack");
const path = require("path");

module.exports = withFonts(
  withCSS(
    withImages(
      withSass(
        webpack(config, options) 
          config.module.rules.push(
            test: /\.(eot|ttf|woff|woff2)$/,
            use: 
              loader: "url-loader",
            ,
          );
          config.resolve.modules.push(path.resolve("./"));
          return config;
        ,
      )
    )
  )
);

module.exports = 
  i18n: 
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  ,

我想知道如何将这两件事结合起来。

这是我正在使用的index.js 的代码。

import  useRouter  from 'next/router';
import fr from '../locales/fr';
import en from '../locales/en';

function sth () 
  const router = useRouter();
  const  locale  = router;
  const t = locale === 'en' || 'undefined' ? en : fr;
  console.log(locale);

  return t;

export default function Index() 
  const t  = sth();
  return (
    <>
      <IndexNavbar fixed />
      <section className="header relative pt-16 items-center flex h-screen max-h-860-px">
        <div className="container mx-auto items-center flex flex-wrap">
          <div className="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-4">
            <div className="pt-32 sm:pt-0">
              <h2 className="font-semibold text-4xl text-gray-700">
                t.homeMainTitle
              </h2>
            </div>
          </div>
        </div>
      </section>
    </>
);

sth() 函数的内容在Index() 内部，但无论如何都不起作用。

【参考方案1】：

每个文件/模块只能有一个module.exports。您的 next.config.js 应如下所示：

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const webpack = require("webpack");
const path = require("path");

module.exports = withFonts(
  withCSS(
    withImages(
      withSass(
        i18n: 
          locales: ['en', 'fr'],
          defaultLocale: 'en',
        ,
        webpack(config, options) 
          config.module.rules.push(
            test: /\.(eot|ttf|woff|woff2)$/,
            use: 
              loader: "url-loader",
            ,
          );
          config.resolve.modules.push(path.resolve("./"));
          return config;
        ,
      )
    )
  )
);

您传递给最内层插件的对象（在本例中为withSass()）是您的Next config 对象。

编辑： 至于您的组件代码，您不能在这样的函数中调用钩子（在本例中为 useRouter）。您需要将其移动到组件中。

export default function Index() 
    const router = useRouter();
    const  locale  = router;
    const t = locale === 'en' ? en : fr;
    
    return (
        // Your render code
    );

【讨论】：

感谢您的回复，我之前尝试过，应用程序启动正常，一切正常。但仍然无法检测到语言。我使用useRouter() 来获取用户的语言。该值未定义。

能否将您尝试检测语言的组件代码添加到原始问题中？

@azzmi 您需要将sth() 中的代码移动到组件本身。检查我更新的答案。

我照你说的做了。但。没有什么变化。我仍然得到法语版本，问题不在useRouter() 部分。因为连路线/fr 都不存在。我在主要路线上得到法语版本，在正常世界中应该是英语，这太奇怪了。

还有一点，当我删除withFonts() 部分和所有依赖它的组件时，我的应用程序运行良好。它适用于默认英语和法语/fr