next-export-i18n - Error: Text content does not match server-rendered HTML.

Answered

Indian Spitz posted this in #help-forum

Open in Discord

Indian SpitzOP

2023-12-29T00:38:01.000Z

Hey. I use "next": "14.0.4" and would like to do a static export of pages (output: "export"). I also would like to have an i18n solution.

After doing some research I stumbled upon https://www.npmjs.com/package/next-export-i18n and I use:
"next-export-i18n": "^3.0.0",
"next-language-detector": "^1.1.0"

But now I get the following error:

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "base.displaying" Client: "Darstellung"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Is there a solution for this?

Answered by Ray

have you tried the method on the doc?
https://nextjs.org/docs/app/building-your-application/routing/internationalization

View full answer

130 Replies

@Indian Spitz Hey. I use "next": "14.0.4" and would like to do a static export of pages (output: "export"). I also would like to have an i18n solution. After doing some research I stumbled upon https://www.npmjs.com/package/next-export-i18n and I use: "next-export-i18n": "^3.0.0", "next-language-detector": "^1.1.0" But now I get the following error: Unhandled Runtime Error Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: "base.displaying" Client: "Darstellung" See more info here: https://nextjs.org/docs/messages/react-hydration-error Is there a solution for this?

2023-12-30T15:37:03.000Z

can you show some code how you use it?

Indian SpitzOP

2023-12-30T15:37:27.000Z

Heyhey

Well the question is: What is the best way, to use i18n if next static export is used?

I just need a simple solution for i18n. Not a dedicated routing / context root... Just a simple t("languagekey") i18n possibility

I have had a look at the next recommended way but it seems that it is not supported with static export

It always said:

"Error: i18n support is not compatible with next export. See here for more info on deploying:"

2023-12-30T15:39:13.000Z

have you tried the method on the doc?
https://nextjs.org/docs/app/building-your-application/routing/internationalization

Answer

@Ray have you tried the method on the doc? https://nextjs.org/docs/app/building-your-application/routing/internationalization

Indian SpitzOP

2023-12-30T15:40:44.000Z

I have had a look. But I don't want to have a subroute / subcontext

2023-12-30T15:41:12.000Z

what do you mean subroute/ subcontext?

Indian SpitzOP

2023-12-30T15:41:19.000Z

this /en/ or /fr/

2023-12-30T15:41:24.000Z

you can skip that part

and just add this
https://nextjs.org/docs/app/building-your-application/routing/internationalization#localization

Indian SpitzOP

2023-12-30T15:43:13.000Z

Ok. I will give it another try

And there is the next question

Do I need to wrap ALL my folders & files into the [lang] folder?

Or only the ones for the pages?

2023-12-30T15:46:48.000Z

how do you want your url look like?

Indian SpitzOP

2023-12-30T15:47:01.000Z

The uri should not change. That's the thing

2023-12-30T15:47:04.000Z

you mentioned you don't want to have subroute/subcontext

so base on the user browser?

Indian SpitzOP

2023-12-30T15:47:15.000Z

xyz.shop/product/schliesszylinder

for instance

@Ray so base on the user browser?

Indian SpitzOP

2023-12-30T15:47:27.000Z

Yes

2023-12-30T15:47:56.000Z

it will need middleware for that

which is not supported in static export

Indian SpitzOP

2023-12-30T15:48:22.000Z

And if I say: Ok, default language should be FR and if not available, then use EN

?

Because I know my shop people will speak French as an example

If I just set it hardcoded as of now

(or add a language selector later on)

2023-12-30T15:50:28.000Z

then its better to do this app/[lang]/product/[category]

Indian SpitzOP

2023-12-30T15:53:12.000Z

Ok. So I create [lang] and only move my pages there right?

The components can stay in app/components?

2023-12-30T15:53:26.000Z

yes

Indian SpitzOP

2023-12-30T15:58:49.000Z

But how can I use the i18n in components then?

Do I need to pull all translations through all components?

Or redux?

2023-12-30T16:00:01.000Z

import { getDictionary } from './dictionaries'
 
export default async function Page({ params: { lang } }) {
  const dict = await getDictionary(lang) 
  return <Client productData dict={dict} />
}

you can pass the dictionary to it

Indian SpitzOP

2023-12-30T16:01:45.000Z

That is going to be really ugly

Because I have sometimes 15 components wrapped

And they all need to use it

Pushing these into redux probably is also not the nicest idea or what do you think?

2023-12-30T16:04:02.000Z

can you pass it the redux store inside the Client component?

Indian SpitzOP

2023-12-30T16:05:40.000Z

Probably

2023-12-30T16:06:52.000Z

or you could try using next-intl

https://next-intl-docs.vercel.app/docs/environments/server-client-components#using-internationalization-in-client-components

Indian SpitzOP

2023-12-30T16:07:08.000Z

One question I have still in mind

If I do app[lang] then how can I NOT provide a subcontext

As I said, I don't want this /de/ or so

2023-12-30T16:07:32.000Z

https://next-intl-docs.vercel.app/docs/routing/middleware#usage-without-middleware-static-export

@Indian Spitz If I do app[lang] then how can I NOT provide a subcontext

2023-12-30T16:11:04.000Z

I think you can do app/product/[...params]/page.tsx

then in the page component

export default async function Page({ params }: { params: { params: string[] } }}) {
  const category = params[0]
  if (!category) notFound()
  const locale = params[1] || "fr"
}

Indian SpitzOP

2023-12-30T16:19:43.000Z

Like that?

2023-12-30T16:20:15.000Z

oh should be params.params[0] and params.params[1]

this will look better

export default async function Page({ params }: { params: { params: string[] } }}) {
  const [category, locale = "fr"] = params.params
  if (!category) notFound()
}

Indian SpitzOP

2023-12-30T16:22:14.000Z

2023-12-30T16:22:23.000Z

then the english url will be /product/category/en

update the generateStaticParams too

export async function generateStaticParams() {
  const locales = [undefined, "en"]
  const allCategorySlugs = ...
  return locales.map(locale => allCategorySlugs.map(category => ({ params: [category, locale]  }))  )
}

Indian SpitzOP

2023-12-30T16:26:45.000Z

Ok done

2023-12-30T16:26:54.000Z

does it work?

Indian SpitzOP

2023-12-30T16:28:09.000Z

I need to do the redirect in the page.tsx in app/ right?

2023-12-30T16:28:38.000Z

i dont know, you don't have the index page?

Indian SpitzOP

2023-12-30T16:28:50.000Z

http://localhost:3000/ says not found

Probably I deleted it accidentally

2023-12-30T16:29:16.000Z

what is the code in app/page.tsx

Indian SpitzOP

2023-12-30T16:32:44.000Z

The same as in app/product/[...params]/page.tsx SO:

import { ProductPath } from "@/global/consts";
import readProductDataForCategory from "@/lib/api/readProductDataForCategory";
import { enumToArray } from "@/utils/enumToArray";
import { notFound } from "next/navigation";
import Client from "./product/[...params]/client";
import { getDictionary } from "./product/[...params]/dictionaries";

export default async function Page({
params,
}: {
params: { params: string[] };
}) {
const [category, locale = "de"] = params.params;
if (!category) notFound();

const dict = await getDictionary(locale);
const productData: any = await readProductDataForCategory(category);
return <Client productData={productData} dict={dict} />;
}

export async function generateStaticParams() {
const locales = ["de", "en"];
const allCategorySlugs: any = enumToArray(ProductPath).map((p) => ({
category: p,
}));
return locales.map((locale) =>
allCategorySlugs.map((category) => ({ params: [category, locale] }))
);
}

2023-12-30T16:33:14.000Z

oh

set the default value for category in app/page.tsx

or redirect it

you don't need generateStaticParams in app/page.tsx

Indian SpitzOP

2023-12-30T16:37:35.000Z

Ok, I was a bit confused

Fixed it now

But what about the layout.tsx in the app folder?

Should it make usage of params.lang or shall I set a default here?

export async function generateStaticParams() {
return [{ lang: "en-US" }, { lang: "de" }];
}

const RootLayout = ({ children, params }) => (
<html lang={params.lang}>
<body className={inter.className}>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
);

export default RootLayout;

Because for the entry point we do not even have params correct?

@Indian Spitz export async function generateStaticParams() { return [{ lang: "en-US" }, { lang: "de" }]; } const RootLayout = ({ children, params }) => ( <html lang={params.lang}> <body className={inter.className}> <StyledComponentsRegistry>{children}</StyledComponentsRegistry> </body> </html> ); export default RootLayout;

2023-12-30T16:47:44.000Z

yes put this in app/product/[...params]/layout.tsx

export async function generateStaticParams() {
  return [{ lang: "en-US" }, { lang: "de" }];
}

const RootLayout = ({ children, params }) => (
  <html lang={params.lang}>
    <body>
      {children}
    </body>
  </html>
);

just this is fine

Indian SpitzOP

2023-12-30T16:57:18.000Z

Yes, this is clear

But my question is as well: If I want to have i18n from the very beginning on (meaning from app/page.tsx) if I call localhost:3000, then I would also need to do something for it right?

Because app/page.tsx looks like this at the moment:

"use client";

import styles from "../styles/page.module.scss";
import { NavCategories } from "@/app/components/Navigation/NavCategories/NavCategories";
import PageLayout from "@/app/components/PageLayout/PageLayout";
import { Typography } from "antd";

export default function Page() {
return (
#Unknown Channel
<PageLayout>
<Typography.Title className={styles.pageWelcomeTitle}>
Hello World:
</Typography.Title>
<NavCategories />
</PageLayout>
</>
);
}

Here I also need:

export default async function Page({
params,
}: {
params: { params: string[] };
}) {
const [category, locale = "de"] = params.params;
if (!category) notFound();

const dict = await getDictionary(locale);

correct?

2023-12-30T17:00:16.000Z

for app/page.tsx

export default async function Page() {

  const dict = await getDictionary("de");

Indian SpitzOP

2023-12-30T17:03:00.000Z

app-index.js:34 ./app\product[...params]\dictionaries.ts
ReactServerComponentsError:

You're importing a component that needs server-only. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.

But if I remove the use client, I get this:

2023-12-30T17:03:53.000Z

you should only import getDictionary in server component

seem like you are importing it a client component

Indian SpitzOP

2023-12-30T17:04:35.000Z

So I need to create a app/client.tsx file?

Same as you've shown once for the pages

2023-12-30T17:05:01.000Z

you have 'use client' on top of app/page.tsx?

yes you need to do that too

@Ray you have 'use client' on top of `app/page.tsx`?

Indian SpitzOP

2023-12-30T17:05:11.000Z

Yes

Indian SpitzOP

2023-12-30T17:13:17.000Z

Ok somewhere in the product routes it still has a problem

app\product[...params]\page.tsx looks like this:

import { ProductPath } from "@/global/consts";
import readProductDataForCategory from "@/lib/api/readProductDataForCategory";
import { enumToArray } from "@/utils/enumToArray";
import Client from "./client";
import { getDictionary } from "./dictionaries";
import { notFound } from "next/navigation";

export default async function Page({
params,
}: {
params: { params: string[] };
}) {
const [category, locale = "de"] = params.params;
if (!category) notFound();

const dict = await getDictionary(locale);
const productData: any = await readProductDataForCategory(category);
return <Client productData={productData} dict={dict} />;
}

export async function generateStaticParams() {
const locales = ["de", "en"];
const allCategorySlugs: any = enumToArray(ProductPath).map((p) => ({
category: p,
}));
return locales.map((locale) =>
allCategorySlugs.map((category) => ({ params: [category, locale] }))
);
}

2023-12-30T17:21:37.000Z

does it work before adding i18n?

Indian SpitzOP

2023-12-30T17:22:43.000Z

Good question

I have done so much code changes

2023-12-30T17:23:06.000Z

lol

Indian SpitzOP

2023-12-30T17:25:04.000Z

Good thing is: I can start the application. And I can see the translations. So this part works

But once a product page is opened, I get the error

2023-12-30T17:27:05.000Z

export default async function Page({
  params,
}: {
  params: { params: string[] };
}) {
  const [category, locale = "de"] = params.params;
  if (!category) notFound();

  const dict = await getDictionary(locale);
  const productData: any = await readProductDataForCategory(category);
  return <div>test</div>
}

try this and see if it still error

Indian SpitzOP

2023-12-30T17:27:57.000Z

Error is still there

2023-12-30T17:28:42.000Z

export default async function Page({
  params,
}: {
  params: { params: string[] };
}) {
  const [category, locale = "de"] = params.params;
  if (!category) notFound();

  //const dict = await getDictionary(locale);
  const productData: any = await readProductDataForCategory(category);
  return <div>test</div>
}

comment out getDictionary

Indian SpitzOP

2023-12-30T17:29:07.000Z

This I have tried as well. It does not come from the dictionary it seems

2023-12-30T17:29:39.000Z

// const productData: any = await readProductDataForCategory(category);

Indian SpitzOP

2023-12-30T17:32:46.000Z

Also not. I have even tried to return static <h1> in client.tsx

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at mod.require (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\require-hook.js:65:28)
at require (node:internal/modules/helpers:176:18)
at @ant-design/icons/es/components/Context (C:\Users\siri\Desktop\product-recommendovic.next\server\pages_app.js:62:18)

Somehow it talks about C:\Users\siri\Desktop\product-recommendovic.next\server\pages_app.js:196:3

2023-12-30T17:35:12.000Z

what is enumToArray?

Indian SpitzOP

2023-12-30T17:35:21.000Z

type NonFunctional<T> = T extends Function ? never : T;

/**
* Helper to produce an array of enum values.
* @param enumeration Enumeration object.
*/
export function enumToArray<T>(enumeration: T): NonFunctional<T[keyof T]>[] {
return Object.keys(enumeration)
.filter((key) => isNaN(Number(key)))
.map((key) => enumeration[key])
.filter((val) => typeof val === "number" || typeof val === "string");
}

2023-12-30T17:37:25.000Z

change the generateStaticParams to this

export async function generateStaticParams() {
//  const locales = ["de", "en"];
//  const allCategorySlugs: any = enumToArray(ProductPath).map((p) => ({
//    category: p,
//  }));
//  return locales.map((locale) =>
//    allCategorySlugs.map((category) => ({ //params: [category, locale] }))
//  );

  return [{ params: ["some-category-name", "en"] }]
}

Indian SpitzOP

2023-12-30T17:44:02.000Z

I deleted the next folder once and in the console I see this now:

Warning: [antd: Breadcrumb] Breadcrumb.Item and Breadcrumb.Separator is deprecated. Please use items instead.
â—‹ Compiling /product/[...params] ...
âœ“ Compiled /product/[...params] in 1930ms (5127 modules)
â¨¯ Error: Page "/product/[...params]/page" is missing param "/product/schliesszylinder" in "generateStaticParams()", which is required with "output: export" config.
at DevServer.renderToResponseWithComponentsImpl (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:1046:27)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async DevServer.renderPageComponent (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:1843:24)
at async DevServer.renderToResponseImpl (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:1881:32)
at async DevServer.pipeImpl (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:909:25)
at async NextNodeServer.handleCatchallRenderRequest (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\next-server.js:266:17)
at async DevServer.handleRequestImpl (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:805:17) {
page: '/product/schliesszylinder'
}

@Ray change the `generateStaticParams` to this ts export async function generateStaticParams() { // const locales = ["de", "en"]; // const allCategorySlugs: any = enumToArray(ProductPath).map((p) => ({ // category: p, // })); // return locales.map((locale) => // allCategorySlugs.map((category) => ({ //params: [category, locale] })) // ); return [{ params: ["some-category-name", "en"] }] }

Indian SpitzOP

2023-12-30T17:44:21.000Z

Ok, will try that

@Indian Spitz I deleted the next folder once and in the console I see this now: Warning: [antd: Breadcrumb] `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead. â—‹ Compiling /product/[...params] ... âœ“ Compiled /product/[...params] in 1930ms (5127 modules) â¨¯ Error: Page "/product/[...params]/page" is missing param "/product/schliesszylinder" in "generateStaticParams()", which is required with "output: export" config. at DevServer.renderToResponseWithComponentsImpl (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:1046:27) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async DevServer.renderPageComponent (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:1843:24) at async DevServer.renderToResponseImpl (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:1881:32) at async DevServer.pipeImpl (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:909:25) at async NextNodeServer.handleCatchallRenderRequest (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\next-server.js:266:17) at async DevServer.handleRequestImpl (C:\Users\siri\Desktop\product-recommendovic\node_modules\next\dist\server\base-server.js:805:17) { page: '/product/schliesszylinder' }

2023-12-30T17:44:53.000Z

oh that's something wrong with antd

Indian SpitzOP

2023-12-30T17:45:43.000Z

It clearly says: " Error: Page "/product/[...params]/page" is missing param "/product/schliesszylinder" in "generateStaticParams()", which is required with "output: export" config." though

Is it really correct like that?

This is it as JSON:

@Ray update the generateStaticParams too ts export async function generateStaticParams() { const locales = [undefined, "en"] const allCategorySlugs = ... return locales.map(locale => allCategorySlugs.map(category => ({ params: [category, locale] })) ) }

2023-12-30T17:51:39.000Z

notice that the first element in array is undefined

Indian SpitzOP

2023-12-30T17:53:56.000Z

Ok so what should I try?

undefined outputs the same error

This is what it looks like in total:

client.tsx:

"use client";

import ProductPageLayout from "@/app/components/PageLayout/ProductPageLayout";
import { ProductOverview } from "@/app/components/Product/ProductOverview/ProductOverview";
import ReduxProvider from "@/app/store/ReduxProvider";

export default function Client({ productData, t }) {
return (
<ReduxProvider>
<ProductPageLayout>
<ProductOverview productData={productData} t={t} />
</ProductPageLayout>
</ReduxProvider>
);
}

2023-12-30T17:54:55.000Z

can you liveshare

Indian SpitzOP

2023-12-30T17:55:08.000Z

Of course

Indian SpitzOP

2023-12-30T20:19:10.000Z

Solved! thanks a lot