TypeScript

Next.js は React アプリケーション構築のための TypeScript ファーストな開発体験を提供します。

必要なパッケージの自動インストールと適切な設定の構成を備えた、組み込みの TypeScript サポートが含まれています。

新しいプロジェクト

create-next-app は現在、デフォルトで TypeScript を同梱しています。

npx create-next-app@latest

既存のプロジェクト

ファイルを .ts または .tsx にリネームすることでプロジェクトに TypeScript を追加できます。next dev と next build を実行すると、必要な依存関係が自動的にインストールされ、推奨設定オプションを含む tsconfig.json ファイルが追加されます。

既に jsconfig.json ファイルがある場合、古い jsconfig.json から paths コンパイラオプションを新しい tsconfig.json ファイルにコピーし、古い jsconfig.json ファイルを削除してください。

TypeScript の最低バージョン

import 名の型修飾子 や パフォーマンス改善 などの構文機能を得るためには、少なくとも TypeScript v4.5.2 以上を使用することを強く推奨します。

静的生成とサーバーサイドレンダリング

getStaticProps、getStaticPaths、getServerSideProps では、それぞれ GetStaticProps、GetStaticPaths、GetServerSideProps 型を使用できます:

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

export const getStaticProps = (async (context) => {
  // ...
}) satisfies GetStaticProps

export const getStaticPaths = (async () => {
  // ...
}) satisfies GetStaticPaths

export const getServerSideProps = (async (context) => {
  // ...
}) satisfies GetServerSideProps

豆知識: satisfies は TypeScript 4.9 で追加されました。TypeScript の最新バージョンへのアップグレードを推奨します。

API ルート

API ルートで組み込み型を使用する例:

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ name: 'John Doe' })
}

レスポンスデータも型付けできます:

import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' })
}

カスタム App

カスタム App がある場合、組み込み型 AppProps を使用し、ファイル名を ./pages/_app.tsx に変更できます:

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

パスエイリアスと baseUrl

Next.js は tsconfig.json の "paths" と "baseUrl" オプションを自動的にサポートします。

この機能について詳しくは モジュールパスエイリアスドキュメント をご覧ください。

next.config.js の型チェック

next.config.js ファイルは Babel や TypeScript で解析されないため JavaScript ファイルである必要がありますが、JSDoc を使用して IDE で型チェックを追加できます:

// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* ここに設定オプション */
}

module.exports = nextConfig

インクリメンタル型チェック

v10.2.1 以降、Next.js は tsconfig.json で有効にした場合の インクリメンタル型チェック をサポートしています。これは大規模アプリケーションでの型チェック速度向上に役立ちます。

TypeScript エラーの無視

Next.js はプロジェクトに TypeScript エラーが存在する場合、プロダクションビルド (next build) を失敗させます。

アプリケーションにエラーがある場合でも Next.js に危険を承知でプロダクションコードを生成させたい場合は、組み込みの型チェックステップを無効にできます。

無効にする場合、ビルドまたはデプロイプロセスの一部として型チェックを実行していることを確認してください。そうでないと非常に危険です。

next.config.js を開き、typescript 設定で ignoreBuildErrors オプションを有効にします:

module.exports = {
  typescript: {
    // !! 警告 !!
    // プロジェクトに型エラーがあってもプロダクションビルドを成功させる
    // !! 警告 !!
    ignoreBuildErrors: true,
  },
}

カスタム型宣言

カスタム型を宣言する必要がある場合、next-env.d.ts を変更したくなるかもしれません。しかし、このファイルは自動生成されるため、変更は上書きされます。代わりに、新しいファイル（例: new-types.d.ts）を作成し、tsconfig.json で参照してください:

{
  "compilerOptions": {
    "skipLibCheck": true
    //...省略...
  },
  "include": [
    "new-types.d.ts",
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

バージョン変更点