Docs: App Router Guides Internationalization #86864
Description
What is the documentation issue?
There is a wrong information about the type of the lang param when reading from params.
While trying to implement intl for a next.js 16 app router based project.
Using the given way (from the doc) to read the params in my root layout:
(Note i use 'en' as short for english , not 'en-US' because i do not play on different 'en' support)
`export async function generateStaticParams() {
return [{ lang: 'en' }, { lang: 'de' }]
}
export default async function RootLayout({
children,
params,
}: Readonly<{
children: React.ReactNode
params: Promise<{ lang: 'en' | 'de' }>
}>) {
return (
<html lang={(await params).lang}>
{children}
)
}`
I ended up receiving a type error when building (see context).
My currnet workaround is to simply type params as Promiselang:string and then when calling getDictionary() cast it => await getDictionary(lang as "de" | "en");
Is there any context that might help us understand?
The error received when running build is:
`
.next/dev/types/validator.ts:121:31
Type error: Type 'typeof import("/home/musa/webProjects/musarochi/src/app/[lang]/layout")' does not satisfy the constraint 'LayoutConfig<"/[lang]">'.
Types of property 'default' are incompatible.
Type '({ children, params, }: Readonly<{ params: Promise<{ lang: "en" | "de"; }>; children: ReactNode; }>) => Promise' is not assignable to type 'ComponentType<LayoutProps<"/[lang]">> | ((props: LayoutProps<"/[lang]">) => void | ReactNode | Promise | Promise<...>)'.
Type '({ children, params, }: Readonly<{ params: Promise<{ lang: "en" | "de"; }>; children: ReactNode; }>) => Promise' is not assignable to type 'FunctionComponent<LayoutProps<"/[lang]">>'.
Types of parameters '__0' and 'props' are incompatible.
Type 'LayoutProps<"/[lang]">' is not assignable to type 'Readonly<{ params: Promise<{ lang: "en" | "de"; }>; children: ReactNode; }>'.
Types of property 'params' are incompatible.
Type 'Promise<{ lang: string; }>' is not assignable to type 'Promise<{ lang: "en" | "de"; }>'.
Type '{ lang: string; }' is not assignable to type '{ lang: "en" | "de"; }'.
Types of property 'lang' are incompatible.
Type 'string' is not assignable to type '"en" | "de"'.
119 | type __IsExpected<Specific extends LayoutConfig<"/[lang]">> = Specific
120 | const handler = {} as typeof import("../../../src/app/[lang]/layout.js")
121 | type __Check = __IsExpected
| ^
122 | // @ts-ignore
123 | type __Unused = __Check
124 | }
Next.js build worker exited with code: 1 and signal: null
`