HTML Lang - App Router
Unanswered
Tamaskan Dog posted this in #help-forum
Tamaskan DogOP
Currently building a site using NextJS App router and Storyblok CMS.
I have a layout.jsx file that contains some scripts every page needs, the initial <html> tags, etc.
I then have a page at [[...slug]]/page.jsx to cover every possible path that may have a page in the CMS. That then makes a call to Storyblok to get the information for the given slug. One of the pieces of info is the language that the page is in. That language needs to be added to the html tag like:
I have a layout.jsx file that contains some scripts every page needs, the initial <html> tags, etc.
I then have a page at [[...slug]]/page.jsx to cover every possible path that may have a page in the CMS. That then makes a call to Storyblok to get the information for the given slug. One of the pieces of info is the language that the page is in. That language needs to be added to the html tag like:
<html lang={lang}. Is there any way to achieve this though since the call to Storyblok is in the page.jsx file but the html tag is in layout?7 Replies
Tamaskan DogOP
The biggest problem here is because its using dynamic routes. otherwise getting the slug is easy by destructuring it in the layout props that get passed in
@Tamaskan Dog Currently building a site using NextJS App router and Storyblok CMS.
I have a layout.jsx file that contains some scripts every page needs, the initial <html> tags, etc.
I then have a page at [[...slug]]/page.jsx to cover every possible path that may have a page in the CMS. That then makes a call to Storyblok to get the information for the given slug. One of the pieces of info is the language that the page is in. That language needs to be added to the html tag like: `<html lang={lang}`. Is there any way to achieve this though since the call to Storyblok is in the page.jsx file but the html tag is in layout?
is your route list and the cms organised in such a way that a path like
otherwise, try this:
and use this
[language]/[[...slug]] is possible? in that case you can add the lang prop in a root layout at [language]/layout.tsx.otherwise, try this:
"use client";
export function Html({ children }) {
const slug = useParams();
const language = getLangFromSlug(slug);
return <html lang={language}>{children}</html>;
}and use this
<Html> instead of <html> in the root layout(s) you have.Tamaskan DogOP
@joulev I can't because I need english specifically to not have the
I did figure something out slightly. If I just move the layout to the directory of
en within the url params. I did figure something out slightly. If I just move the layout to the directory of
[[...slug]] then it works, however, then 404 pages don't work since the not-found file is a step above in the directory structure@Tamaskan Dog <@484037068239142956> I can't because I need english specifically to not have the `en` within the url params.
I did figure something out slightly. If I just move the layout to the directory of `[[...slug]]` then it works, however, then 404 pages don't work since the not-found file is a step above in the directory structure
You can simply render the <html> and such tags in the root not-found no problem
Tamaskan DogOP
I don't have issues with rendering <html> tags in the not-found file. I have issues with the entire thing not rendering since you can't call notFound() in the root layout.
Looks like I'm not the only one with the issue: https://github.com/vercel/next.js/discussions/49415
That discussion still isn't resolved but seems to explain my exact problem