如何使用 withFonts() 配置 i18n

Question

我正在开发一个使用 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() 内部，但无论如何都不起作用。

Answer 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
    );
}