如何使用 withFonts() 配置 i18n

如何解决如何使用 withFonts() 配置 i18n

我正在使用 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() 中，无论如何它都不起作用。

解决方法

每个文件/模块只能有一个 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
    );
}