next memo tips

多言語 Next.js の HTML タグに動的に lang を設定する

Keita Imatomi
2021-8-17 10:37

仕事では多言語対応がデフォルト仕様です。 少し前まではNext.jsの多言語対応には next-i18-next を使用してましたが、今はNext.js単体で多言語対応できるので、試してみました。

設定は公式の通りとても簡単で、各コンポーネント内でのlocale情報はuseRouterから取得できます。

1点、HTMLタグに lang を設定するのをどうやろうか少し考えたのでメモを残します。

ちなみに

僕はこれで日本語のときだけ、一部テキストにtext-align: justify;をかけたりします。

_typo.scss

html[lang=ja] .text-justify { text-align: justify; }

結論

簡単でした。。。ほんと1、2行だけ。。。

  • render()__NEXT_DATA__からlocaleを取得できる。

_document.ts

import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps, } from 'next/document' class imDocument extends Document { static async getInitialProps( ctx: DocumentContext ): Promise<DocumentInitialProps> { const initialProps = await Document.getInitialProps(ctx) return initialProps } render(): JSX.Element { const { locale } = this.props.__NEXT_DATA__ // localeを取得 return ( <Html lang={locale} dir="ltr"> { // langに設定 } <Head /> <body> <Main /> <NextScript /> </body> </Html> ) } } export default MyDocument

おまけ、最初にやったこと

ctxlocaleをもってるので普通に、

  • getInitialProps内で locale を取得しての返り値に足す
  • render()this.propsからlocaleを取得する

ということをしました。普通にできました。

_document.ts

import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps, } from 'next/document' // 型にlocaleを足す type Props = DocumentInitialProps & { locale: string } class MyDocument extends Document { static async getInitialProps( ctx: DocumentContext ): Promise<Props> { const initialProps = await Document.getInitialProps(ctx) return {...initialProps, locale: ctx?.locale || 'ja' } // locale を取得 } render(): JSX.Element { return ( <Html lang={this.props.locale} dir="ltr"> { // langに設定 } <Head /> <body> <Main /> <NextScript /> </body> </Html> ) } } export default MyDocument
こちらもどうぞ