Zenn
💡

Next.js with TypeScript で最小限の _app.tsx, _document.tsx

2021/09/18に公開
Next.js
TypeScript
tech

この記事では Next.js with TypeScript で最小限の _app.tsx, _document.tsx について紹介します。

Gist: Next.js with typescript minimum pages/_document.tsx, pages/_app.tsx

pages/_app.tsx

こちらは Function Component でかけるのでシンプルです。

import { AppProps } from 'next/app'
import Head from 'next/head'

const App = ({ Component, pageProps }: AppProps) => (
  <>
    <Head>
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
      />
      {/* <link rel="shortcut icon" href="/favicon.png" key="shortcutIcon" /> */}
      {/* <link rel="manifest" href="/manifest.json" /> */}
    </Head>
    <Component {...pageProps} />
  </>
)

export default App

pages/_documents.tsx

こちらはまだ NextDocument クラスの継承が必要みたいです。

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

type Props = {}

class Document extends NextDocument<Props> {
  render() {
    return (
      <Html {/* lang="ja" */} >
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default Document

追記: 2020-11-03

Head 位置の変更が推奨されたので記事内のコードも更新しました。
next.js/no-document-viewport-meta.md at master · vercel/next.js

GitHubで編集を提案

Discussion