How to configure i18n with withFonts()

user_15035893 0
Viewed 624

I am working on a Next.js project using Tailwind CSS for styling. I am stuck at the next.config file.

I've almost tried everything to make this code work but cannot.

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',
  },
}

I'd like to know how to combine these two things.

Here is the code of the index.js i'm using.

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

The content of sth() function was inside the Index() and it doesn't work either way.

i18next tailwind-css next.js internationalization
1 Answers

You can only have one module.exports per file/module. Your next.config.js should look like the following:

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

The object that you pass to the inner-most plugin (withSass() in this case) is your Next config object.

Edit: As for your component's code, you can't call a hook - in this case useRouter - from within a function like that. You'll need to move it to the component.

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