Docs: unclear documentation about layout.js

SmartMointy commented 8 months ago

What is the improvement or update you wish to see?

Remove this line from layout.js docs under Root Layouts

The app directory must include a root app/layout.js.

Or provide a workaround on how to set <html lang={params.lang} inside a app/[lang]/layout.js

Is there any context that might help us understand?

In the docs about layouts it says that:

"The app directory must include a root app/layout.js"
"The root layout must define <html> and <body> tags".

Using next-intl or any similar i18n routing leads all pages being inside app/[lang] or app/[locale].

So if we have to put the root layout into the app folder we can't set <html lang={params.lang}> since we can only access the locale inside the app/[lang]/layout.js file.

Also having no app/layout.js works without any error or warning.

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/api-reference/file-conventions/layout

JasonA-work commented 8 months ago

Just ran in this problem when trying to implement i18n on my site too.

Additionally, this introduces a problem with the not-found.js. When we don't have app/layout.tsx, we get this error:

not-found.tsx doesn't have a root layout. To fix this error, make sure every page has a root layout.

And when you do put the root layout in the app dir, we get the problem where we need an html tag in app/[locale]/layout.tsx too - and that's where we need to have language parameters as an attribute to the html tag like mentioned above.

SmartMointy commented 7 months ago

@JasonA-work I am on version "14.0.4" and get the same error trying to use a custom 404 page.

Another issue for me is that you can't have a navbar and footer on the 404 page, since they need i18n and mostlikly are used inside the app/[lang]/layout.tsx layout, which is not wrapped by the app/not-found.tsx... Therefore having a generic Link to the homepage on the 404 page is the only option atm.

JasonA-work commented 7 months ago

@SmartMointy I'm on 14.1. Perhaps that's why.

I finally found a solution that works from here:

https://next-intl-docs.vercel.app/docs/environments/error-files

Hope it becomes useful to you!

To the Next JS team: @leerob Is it possible to include the information in your docs under the i18n topic? This is issue should be a common one and the solution to it is not straightforward. So having this in the docs will be very helpful.

Thank you!

vercel / next.js