Next.jsのカスタムDocumentは関数コンポーネントでも使える

2022/8/31 19:57

2025/5/16 07:28

タグ:

JavaScript

Next.js

プログラミング

Next.js ではページの共通の文書を設定できる _document というものがある。

class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

ずっと NextDocument を継承したクラスコンポーネントで書いていたが、関数コンポーネントでも書けるらしい。

const Document = () => (
  <Html>
    <Head />
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
);

_document をいじっている際にふと思いついて調べて知った。

参考

Advanced Features: Custom `Document` | Next.js
reactjs - How to use function instead of class in Nextjs custom document for Styled Components? - Stack Overflow

Next.jsのカスタムDocumentは関数コンポーネントでも使える

#参考

履歴

参考