コンテンツにスキップ
ドキュメントエラー`_document` での `styled-jsx` は使用できません

`_document` での `styled-jsx` は使用できません

pages/_document.js で styled-jsx を使用しないでください。

このエラーが発生した理由

カスタムドキュメントでは、`styled-jsx` のようなカスタム CSS は許可されていません。

修正する方法

すべてのページで共有 CSS が必要な場合は、カスタム `App` ファイルを確認するか、カスタムレイアウトを定義してください。

例として、`styles.css` という名前の次のスタイルシートを考えてみましょう。

styles.css
body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

まだ存在しない場合は、`pages/_app.{js,tsx}` ファイルを作成します。次に、`styles.css` ファイルをインポートします。

pages/_app.js
import '../styles.css'
 
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

これらのスタイル (`styles.css`) は、アプリケーションのすべてのページとコンポーネントに適用されます。