Fix example for next-i18next #1917 #1
Conversation
| }; | ||
|
|
||
| export default appWithTranslation(MyApp); | ||
| export default appWithTranslation(MyApp, nextI18nConfig); |
There was a problem hiding this comment.
Explicitly add config (possible too to create a file in ./lib/i18n`)
| import React from "react"; | ||
| import { appWithTranslation } from "next-i18next"; | ||
| import { Layout } from "../components/layout"; | ||
| import nextI18nConfig from '../next-i18next.config'; |
| @@ -2,8 +2,7 @@ import type { NextPage } from "next"; | |||
| import Head from "next/head"; | |||
| import Image from "next/image"; | |||
| import styles from "../styles/Home.module.css"; | |||
|
|
|||
| import { serverSideTranslations } from "next-i18next/serverSideTranslations"; | |||
| import {getServerSideTranslations} from "../lib/i18n"; | |||
There was a problem hiding this comment.
Import from our own getServerSideTranslation to load the config
| react: { | ||
| useSuspense: false, | ||
| }, | ||
| localePath: typeof window === "undefined" ? |
There was a problem hiding this comment.
@adrai Can I have your thoughts on this ?
There was a problem hiding this comment.
The localePath for monorepos.
The typeof window:
A defensive way. Now that next-i18next config is imported in a client side page (_app.tsx), I'm not sure I would rely on webpack/nextjs to ensure it's dropped. I've been hit few times on older nextjs versions (next-i18next supports next > 10)
But what I'm not sure
- Is localePath used/interpreted by i18next on the client side ? or only on server side ? (I mean by default)
There was a problem hiding this comment.
i18next/next-i18next#1552 (comment)
both:
here on server side: https://github.com/i18next/next-i18next/blob/master/src/config/createConfig.ts#L128 (for i18next-fs-backend)
here on client side: https://github.com/i18next/next-i18next/blob/master/src/config/createConfig.ts#L194 (for backends used via use option, for example i18next-http-backend etc... here an example)
There was a problem hiding this comment.
Great ! So actually it seems it makes sense to test typeof window...
Seems confirmed by i18next/next-i18next#1552 (comment)
| @@ -0,0 +1,17 @@ | |||
| /** | |||
There was a problem hiding this comment.
Create your own loader for getServerSideProps or getStatic...
| @@ -0,0 +1,13 @@ | |||
| import type { FC, ReactNode } from "react"; | |||
There was a problem hiding this comment.
Moved layout here, but it does not matter
| swcMinify: true, | ||
| i18n: nextI18nConfig.i18n, | ||
| experimental: { | ||
| esmExternals: true, // optional |
There was a problem hiding this comment.
Optional but recommended for future-proof
|
will check this weekend |
How to fix: i18next/next-i18next#1917 based on reproduction made here: https://github.com/bryantobing12/layout-reproduce-i18next.
Want to test it with yarn or pnpm, checkout the branch and run
or with pnpm