TypeScript

Next.js は、あなたの React アプリケーションを構築するための TypeScript を最初に使用する development 体験を提供します。

それは、必要なパッケージを自動的にインストールし、適切な settings を設定するための組み込みの TypeScript サポートが付属しています。

New Projects

create-next-appは今、TypeScript を default で配布しています。

npx create-next-app@latest

Existing Projects

ファイルの名前を .ts / .tsx に変更することで、プロジェクトに TypeScript を追加します。next dev および next build を実行して、必要な依存関係を自動的にインストールし、推奨の config options を持つ tsconfig.json ファイルを追加します。

すでにjsconfig.jsonファイルをお持ちの場合は、古いjsconfig.jsonからpaths compiler オプションをコピーして新しいtsconfig.jsonファイルに貼り付け、古いjsconfig.jsonファイルを delete してください。

Minimum TypeScript Version

v4.5.2以上の TypeScript を使用することを強く推奨します。この Version では、import の名前についての type 修飾子 やパフォーマンスの向上 などといった syntax フィーチャが利用可能になります。

Static Generation and Server-side Rendering

getStaticProps、getStaticPaths、およびgetServerSidePropsについては、それぞれGetStaticProps、GetStaticPaths、GetServerSidePropsの type を使用することができます。

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 に追加されました。最新の version の TypeScript にアップグレードすることをお勧めします。

API Routes

以下は、API routes 用の組み込み type の使用方法の一例です：

import type { NextApiRequest, NextApiResponse } from "next";

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

あなたはまた、response データを type することもできます：

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" });
}

Custom App

あなたがカスタム Appを持っている場合、組み込みの type AppPropsを使ってファイル名を./pages/_app.tsxに変更することができます。そのように：

import type { AppProps } from "next/app";

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

Path aliases and baseUrl

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

この機能については、モジュール Path エイリアスのドキュメンテーションで詳しく学べます。

Type checking next.config.js

next.config.jsファイルは、Babel または TypeScript によって解析されないため、JavaScript ファイルでなければなりません。しかし、以下のように JSDoc を使用して IDE でいくつかの type チェックを追加することができます:

// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* config options here */
};

module.exports = nextConfig;

Incremental type checking

v10.2.1以降、 Next.js は、tsconfig.jsonで有効にした場合に増分の type チェック をサポートします。これにより、大規模なアプリケーションにおける type チェックの速度を向上させることができます。

Ignoring TypeScript Errors

あなたのプロジェクトに TypeScripterror が存在する場合、Next.js はあなたのproduction build (next build)に失敗します。

あなたのアプリケーションに error がある場合でも、Next.js による危険な production code の生成を希望する場合、組み込みの type チェックステップを無効にすることができます。

無効になっている場合、type チェックを build プロセスあるいは deploy プロセスの一部として実行していることを確認してください。そうでない場合、これは非常に危険である可能性があります。

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

module.exports = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
}

Custom Type Declarations

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

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

Version Changes