👌

基礎から始めるNext.js【３_app.tsx】

2022/10/30に公開

Next.js

tech

基礎から始めるNext.js【３_app.tsx】

YouTube: https://youtu.be/mfdhVUvCv-M

https://youtu.be/mfdhVUvCv-M

今回は_app.tsxと_document.tsxについて解説します。

_app.tsxはアプリ全体に共通する設定、
例えばContextのProviderなどの設定を行います。

_document.tsxではHTMLファイルのドキュメント内の設定を行います。
アプリ全体のレイアウトやheadタグ内の設定、外部ソースの読み込みなどを
こちらで設定が可能です。

ただ、レイアウトはLayoutコンポーネントを作成するのが通常ですし、
外部ソースにつきましては、なるべくReactやNext.jsのライブラリを
インポートして使用する方が良いので、
個人的には_document.tsxはあまり使用しない印象です。

こちらのファイルはこの後使用しませんので
動画が終わりましたら削除をお願いいたします。

pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossOrigin="anonymous"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
        <Script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" />
      </body>
    </Html>
  )
}

基礎から始めるNext.js【３_app.tsx】

Discussion