Support to set <html lang /> from metadata? #49415

ViliamKopecky · 2023-05-07T18:26:54Z

ViliamKopecky
May 7, 2023

As far as I know you can only set <html lang={lang} /> in root layout. It can be dynamic from [lang] route, which is problematic when you want to have a default locale.

In my opinion lang should be configurable same as other metadata as layout cannot always know before route loads data.

export async function generateMetadata() {
  return {
    lang: "cs",
    title: "Ahoj",
  }
}

This should result in something like

<html lang="cs">
  <head>
    <title>Ahoj</title>
  </head>
  <body>
...

Do you plan tu support this? Or maybe is there a workaround similar to useServerInsertedHTML.

I would like to avoid unnecessary usage of middleware.ts.

ryami333 · 2023-05-18T09:28:36Z

ryami333
May 18, 2023

I would also like to add my support for this feature, and I would also like to request other <html> element attributes such as dir. Perhaps a generic API would work, something like:

export async function generateMetadata() {
  return {
    htmlAttributes: {
      lang: "ar-AE",
      dir: "rtl",
    },
    title: "Ahoj",
  }
}

Here's a summary of the currently available options/workaround we have, to demonstrate why I think we need framework-level support for this.

Pattern 1. - `lang` can be derived from params

Solution/Workaround 1a.

We can use a layout file, and simply pass params.lang to the <html> element.

// app/[lang]/layout.tsx

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

The problem: if I now navigate from eg. /en/foo to /de/foo, the lang attribute will not be updated client-side.

Solution/Workaround 1b.

~~We can use a template file, because that re-renders upon navigation (as opposed to layout files, which do not).~~

EDIT: actually we can't because template doesn't receive params.

Solution/Workaround 1c.

We can change the lang attribute on the client-side only, with an effect.

// `app/[lang]/layout.tsx`

import { LangChangeHandler } from "./LangeChangeHandler";

export const Layout = ({ children }) => {
  return (
    <html>
      <LangChangeHandler />
      <body>{children}</body>
    </html>
  );
}

// app/LangChangeHandler.tsx

"use client";
import { useParams } from "next/navigation";

export const LangChangeHandler = () => {
  const { lang } = useParams();
  
  useEffect(() => {
    document.documentElement.setAttribute("lang", lang);
  }, [lang];
  
  return null;
};

The problem: this works on the client-side only. Pages will not be server-side rendered with an appropriate lang tag on the <html> element.

Solution/Workaround 1d.

We could do both 1c and 1a (or 1b). This would ensure that the template is server-side-rendered with the correct lang on page-load, and that it is correctly updated upon navigation.

The problem: we now have two sources-of-truth for our document's lang attribute.

2 replies

j7i May 8, 2024

@ryami333 It is worth mentioning that by following pattern 1c we might run into problems with adding a custom not-found.js file.
Thus, according to my current understanding/experience, it would not be possible to catch the 404 errors from its [lang] boundaries.
Additionally, by placing the not-found.js file in the root /app directory, it currently requires a layout.js file on the same level; which then further requires that the <html> tag is placed in the very outer root layout.

ryami333 May 8, 2024

Yeah none of these workarounds are without compromise and I didn't intend to present them as solutions - the solution here would be for Next.js to introduce an API (like metadata) for changing these attributes on a per-page/directory basis, but they seem completely uninterested in this.

ryami333 · 2023-05-18T09:48:33Z

ryami333
May 18, 2023

Pattern 2. - `lang`/`dir` must be asynchronously computed from params

Consider what happens when the attribute cannot be trivially derived from params. To demonstrate, I'll use the dir attribute here because it's a more obvious use-case than for lang, but the reasoning is still applicable to the lang attribute.

Consider a "blog", where each blog-post is fetched by its "slug" property. The blog post object contains a dir property, with a value of either "rtl" or "ltr".

// app/[slug]/page.tsx
import { BlogMetadataHandler } from './BlogMetadataHandler';
import { getPost } from './getPost';

export const Page = async ({ params }) => {
  const post = await getPost(params.slug);
  
  return (
    <>
      <BlogMetadataHandler lang={post.lang} dir={post.dir} />
      <h1>{post.title}</h1>
      </p>{post.content}</p>
    </>
  );
}

// app/[slug]/BlogMetadataHandler.tsx
"use client";

export const BlogMetadataHandler = ({ lang, dir }) => {
  useEffect(() => {
    document.documentElement.setAttribute("lang", lang);
    document.documentElement.setAttribute("dir", dir);
  });
  
  return null;
}

The problem: this works on the client-side only! The layout will not be SSR'ed with any lang or dir attribute on the document element. And as far as I can tell, this is the only way to set these attributes for this pattern where the attributes are not trivially derived from params. The OP briefly mentions middleware, but I haven't been able to find any solution or workaround that would leverage middleware.

It's clear to me that this simply must be either be added to the generateMetadata API or given a dedicated API called something like generateDocumentAttributes.

0 replies

ViliamKopecky · 2023-05-18T11:59:24Z

ViliamKopecky
May 18, 2023
Author

@ryami333

Solution/Workaround 1a.
The problem: if I now navigate from eg. /en/foo to /de/foo, the lang attribute will not be updated client-side.

I think layouts do refresh (via RSC) when their parameters change. The difference is keeping internal state of the component by remounting the component with changing key like <Template key={routeParam}><Page /></...>. But the parameters should be always fresh.

Problem is supporting default lang /[lang]/[slug]/page.tsx (or even /[lang]/[[...path]]/page.tsx) when you would like default lang en so you could have /contact and /de/kontakt - here the solution is middleware.ts, but I would love if it could be supported without the need for middleware.

I like idea of the dedicated api generateDocumentAttributes so it would provide only the data that actually are needed for layout to rerender. Or even something like generateLayoutExtraParameters which would allow you to pass anything to parent layouts and it would refresh when these parameters change - like dependencies of useEffect etc.

0 replies

ViliamKopecky · 2023-05-18T14:28:50Z

ViliamKopecky
May 18, 2023
Author

This is a demo what I think could be achieved without middleware. https://middleware-cache-three.vercel.app

4 replies

outruller Nov 28, 2023

Hey, @ViliamKopecky!

Did I get it right that the demoed solution not using middleware and essentially SSG friendly?
If so, would you mind sharing a repo please or at least giving a couple of hints on how to achieve this behavior?

Thanks!

ViliamKopecky Nov 28, 2023
Author

No, it’s with middleware. I just hope it should be possible without it. 🥲

6mint Apr 4, 2024

Hey, @ViliamKopecky!
Could you please share the code for the demo?
It would certainly be helpful in the context of the discussion.
Thank you 🙂

rkanani108 Apr 20, 2024

Hey, @ViliamKopecky !
Could you please share the code for the demo? 🥇

jasperhartong · 2023-12-12T13:17:57Z

jasperhartong
Dec 12, 2023

Also looking for a solution for this.

As far as I can see, there's now no way to set the lang attribute serverside AND keep a certain component mounted while navigating between locales (e.g. have the NextTopLoader correctly indicate the loading state while navigating from /en to /nl). All because the lang needs to be set in the root layout and thus this root layout will always be fully remounted.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support to set <html lang /> from metadata? #49415

{{title}}

Replies: 5 comments 6 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Support to set <html lang /> from metadata? #49415

Replies: 5 comments · 6 replies

Pattern 1. - lang can be derived from params

Solution/Workaround 1a.

Solution/Workaround 1b.

Solution/Workaround 1c.

Solution/Workaround 1d.

Pattern 2. - lang/dir must be asynchronously computed from params

ViliamKopecky May 18, 2023 Author

ViliamKopecky May 18, 2023 Author

ViliamKopecky Nov 28, 2023 Author

Replies: 5 comments 6 replies

Pattern 1. - `lang` can be derived from params

Pattern 2. - `lang`/`dir` must be asynchronously computed from params

ViliamKopecky
May 18, 2023
Author

ViliamKopecky
May 18, 2023
Author

ViliamKopecky Nov 28, 2023
Author