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,
  },
}

バージョン変更点