TypeScript

例

• TypeScript

Next.js は、IDE のように統合された革新的なTypeScript体験を提供します。

はじめに、プロジェクトのルートに空の tsconfig.json ファイルを作成します:

touch tsconfig.json

Next.js はこのファイルをデフォルト値で自動的に構成します。独自の tsconfig.json カスタムコンパイラオプションを提供することもサポートされています。

Next.jsはTypeScriptを処理するためにBabelを用いますが、いくつかの注意点があり、一部のコンパイラオプションの挙動が異なります。

次に、next（通常は npm run dev）を実行すると、セットアップのために Next.js が必要なパッケージのインストールを案内します:

npm run dev

# 次のような指示が表示されます:
#
# Please install typescript, @types/react, and @types/node by running:
#
#         yarn add --dev typescript @types/react @types/node
#
# ...

これで、ファイルを .js から .tsx に変換し、TypeScript の利点を活用する準備が整いました！

next-env.d.tsという名前のファイルがプロジェクトのルートに作成されます。 このファイルにより、TypeScriptコンパイラによってNext.jsの型が確実に取得されます。このファイルを削除することはできませんが、編集することはできます（ただし、必須ではありません）。

Next.jsでは strict モードはデフォルトでオフになっています。TypeScriptに慣れてきたら tsconfig.json でオンにすることをお勧めします。

デフォルトでは、Next.js はアクティブに開発に取り組んでいるページに対して TypeScript のエラーを報告します。アクティブでないページに対する TypeScript のエラーは開発工程を邪魔しません。

エラー報告を静かにさせたい場合は、TypeScriptのエラーを無視するためのドキュメントを参照してください。

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

getStaticProps、getStaticPaths、getServerSidePropsに対して、 それぞれ GetStaticProps 、GetStaticPaths、GetServerSideProps型を使用できます。

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

export const getStaticProps: GetStaticProps = async context => {
  // ...
};

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

export const getServerSideProps: GetServerSideProps = async context => {
  // ...
};

getInitialPropsを使用している場合は、このページの指示に従ってください。

APIのルート

以下は、API ルートにビルトインの型を使用する方法の例です:

import { NextApiRequest, NextApiResponse } from 'next';

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

レスポンスデータにも型を指定できます:

import { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  name: string;
};

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

カスタム App

カスタム App がある場合は、ビルトインの AppProps 型を使用して、ファイル名を ./pages/_app.tsx に変更できます:

import { AppProps } from 'next/app';

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

export default MyApp;

PathのエイリアスとbaseUrl

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

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