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ファイルを削除してください。

さらに、型推論を改善するために、next.config.jsの代わりにnext.config.tsの使用をお勧めします。

最小TypeScriptバージョン

型修飾子付きインポート名やパフォーマンス改善などの構文機能を利用するために、TypeScriptのv4.5.2以上を強くお勧めします。

Next.js設定での型チェック

next.config.jsの型チェック

next.config.jsファイルを使用する場合、以下のようにJSDocを使用してIDEで型チェックを追加できます：

// @ts-check
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
}
 
module.exports = nextConfig

next.config.tsの型チェック

next.config.tsを使用することで、TypeScriptを使い、型をNext.js設定にインポートできます。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  /* config options here */
}
 
export default nextConfig

注意: next.config.tsでのモジュール解決は現在、CommonJSに限定されています。これにより、next.config.tsにロードされるESMのみのパッケージとの間に非互換性が生じる可能性があります。

サーバーとクライアントコンポーネント間のデータ受け渡し

サーバーとクライアントコンポーネント間でpropsを介してデータを受け渡す場合、データはブラウザで使用するためにシリアライズ（文字列に変換）されます。ただし、特別な型を必要としません。コンポーネント間で他のpropsを渡すのと同じように型付けされます。

さらに、レンダリングされていないデータはサーバーとクライアント間を移動しない（サーバー上に残る）ため、シリアライズされるコードは少なくなります。これはサーバーコンポーネントのサポートによって初めて可能になりました。

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

getStaticProps、getStaticPaths、[getServerSideProps](/docs/pages/api-reference/functions/get-server-side-props）については、それぞれGetStaticProps、GetStaticPaths、GetServerSideProps型を使用できます：

import type { 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" オプションをサポートします。

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

増分型チェック

v10.2.1 以降、Next.jsは tsconfig.json で有効にされた場合、増分型チェックをサポートします。これは大規模なアプリケーションでの型チェックを高速化するのに役立ちます。

TypeScriptエラーの無視

Next.jsは、プロジェクト内にTypeScriptエラーがある場合、本番ビルド（next build）を失敗させます。

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

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

next.config.ts を開き、typescript 設定の ignoreBuildErrors オプションを有効にします：

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  typescript: {
    // !! 警告 !!
    // プロジェクトに型エラーがある場合でも、
    // 本番ビルドを成功させることを危険に許可します。
    // !! 警告 !!
    ignoreBuildErrors: true,
  },
}
 
export default nextConfig

補足： tsc --noEmit を実行して、ビルド前にTypeScriptエラーを自分でチェックできます。これは、デプロイ前にTypeScriptエラーをチェックしたいCI/CDパイプラインで役立ちます。

カスタム型宣言

カスタム型を宣言する必要がある場合、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"]
}

バージョンの変更