コンテンツへスキップ
ドキュメントエラー_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）は、アプリケーション内のすべてのページとコンポーネントに適用されます。