Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

i18n is overwriting custom HTML lang attribute

See original GitHub issue

What version of Next.js are you using?

12.0.1

What version of Node.js are you using?

v14.17.3

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

I need a custom lang attribute because the language is only the first part of the locale. This works, but after using next router to switch to a different local, Next.js injects the whole locale instead of using my lang props. I would not expect Next.js to overwrite my custom code.

import Document, { Head, Html, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

import { splitLocale } from '_utils/locales'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    const [lang = 'en'] = splitLocale(ctx?.locale)

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        lang,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }

  render() {
    return (
      <Html lang={this.props.lang}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Expected Behavior

Only overwrite the html lang attribute when there is no custom lang attribute, or an option to disable the behaviour.

To Reproduce

Switch to a different locale with next router.

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

balazsorban44commented, Dec 20, 2021

That sounds irrelevant/more of a feature request. As the docs state, we do support a standardized version of locales, but thanks for the extra information.

0reactions

balazsorban44commented, Jan 27, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Top Results From Across the Web

Next.js route.replace changing custom html lang attribute set ...

I am using Next js with i18n-routing with following next.config.js ... I am overriding html lang attribute to en-IN using _document.js

NextJS add lang attribute to HTML tag - Daily Dev Tips

There is an alternative way of adding a custom HTML tag if you want to override multiple HTML properties. Inside your pages directory,...

i18n - Tutorial - Docusaurus

This tutorial will walk you through the basics of the Docusaurus i18n system.

Configure internationalization (i18n) rewrites | Firebase Hosting

Use internationalization rewrites ("i18n rewrites") to serve different content depending on a user's country or preferred language. Here are some example ...

Rails Internationalization (I18n) API - Ruby on Rails Guides

To tell the I18n library where it can find your custom translation files you can ... If you want to translate your Rails...