Q&A
環境
Next.js + TypeScript + styled-components
https://github.com/vercel/next.js/tree/canary/examples/with-typescript-styled-components
やりたいこと
html要素にlang="ja"を追加したい
試したこと
下記を参考に_document.tsxを書き換えるとビルド時は解決します。
https://nextjs.org/docs/advanced-features/custom-document#typescript
js
1import NextDocument, { Html, Head, Main, NextScript } from "next/document"; 2 3type Props = {}; 4 5class Document extends NextDocument<Props> { 6 render() { 7 return ( 8 <Html lang="ja"> 9 <Head /> 10 <body> 11 <Main /> 12 <NextScript /> 13 </body> 14 </Html> 15 ); 16 } 17} 18 19export default Document; 20
困っていること
上記のように_document.tsxを書き換えてしまうと開発時に、下記の問題が生じます。
https://zenn.dev/nbr41to/articles/c0c691653e3d55#next.js-%E3%81%A7-styled-components-%E3%82%92%E4%BD%BF%E3%81%86%E3%81%A8%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%8C%E3%81%82%E3%81%9F%E3%82%89%E3%81%AA%E3%81%84%E7%8A%B6%E6%85%8B%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%82%E3%82%8B%E3%82%92%E5%AF%BE%E5%87%A6
最終的にはSSG (next build && next export)で利用しますので、
その時だけ_document.tsxを出し分ける、もしくは1つの_document.tsx内で分岐させることは可能でしょうか？
Next.jsでstyled-componentsを利用している日本人は多いと思いますが、
プラクティスが見つからず、皆さんどのように解決しているのか知りたいです。
あなたの回答
tips
プレビュー
