How to configure i18n with withFonts() - internationalization

Question

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.

Answer 1

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