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 ルートにビルトインの型を使用する方法の例です:
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;
Next.js は、tsconfig.json
の "paths"
および "baseUrl"
オプションを自動的にサポートします。
この機能の詳細については、モジュールパスエイリアスのドキュメントをご覧ください。