【Next.js和訳】Basic Features/TypeScript
この記事について
株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。
この記事は、Basic Features/TypeScriptの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
TypeScript
Examples
Next.jsは、IDEのように統合されたTypeScriptをすぐに利用できます。
create-next-app support
create-next-appでは、以下のように --ts, --typescript フラグを使って TypeScript プロジェクトを作成することができます。
npx create-next-app --ts
# or
yarn create next-app --typescript
既存のプロジェクト
既存のプロジェクトで始めるには、ルートフォルダに空の tsconfig.json ファイルを作成します。
touch tsconfig.json
Next.jsは、このファイルを自動的にデフォルト値で設定します。カスタムのコンパイラオプションを使って、独自のtsconfig.jsonを提供することもサポートされています。
Next.jsはTypeScriptの処理にBabelを使用していますが、これにはいくつかの注意点と、いくつかのコンパイラオプションの扱いが異なるがあります。
その後、next（通常はnpm run devまたはyarn dev）を実行すると、Next.jsのガイドに従って必要なパッケージをインストールしてセットアップを完了します。
npm run dev
# 以下のような説明が表示されます。
#
# typescript, @types/react, @types/node をインストールしてください。
#
# yarn add --dev typescript @types/react @types/node
#
#...
これで、ファイルを.jsから.tsxに変換して、TypeScriptの利点を活用する準備が整いました。
プロジェクトのルートには、next-env.d.tsというファイルが作成されます。このファイルは、Next.jsのタイプがTypeScriptコンパイラーによってピックアップされるようにします。**このファイルはいつでも変更できるので、削除したり編集したりすることはできません。
TypeScriptのstrictモードは、デフォルトではオフになっています。TypeScriptに慣れてきたら、tsconfig.jsonでこのモードをオンにすることをお勧めします。
next-env.d.ts を編集する代わりに、例えば additional.d.ts という新しいファイルを追加して、それを tsconfig.json の include 配列で参照することで、追加のタイプをインクルードすることができます。
デフォルトでは、Next.jsは next build の一部としてタイプチェックを行います。開発時にはコードエディタでの型チェックを推奨します。
エラーレポートを黙らせたい場合は、Ignoring TypeScript errorsのドキュメントを参照してください。
Static Generation and Server-side Rendering
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 Routes
以下は、APIルート用の組み込み型の使い方の例です。
import type { NextApiRequest, NextApiResponse } from 'next'
export default (req: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ name: 'John Doe' })
}
レスポンスデータを入力することもできます
import type { 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 App from "next/app";
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
// アプリケーションの各ページにブロックデータが必要な場合にのみ、このメソッドをアンコメントしてください。
// このメソッドをアンコメントするのは、アプリケーションのすべてのページで // ブロッキングデータが必要な場合のみです。
// これにより、以下の機能が無効になります。
// 自動静的最適化ができなくなり、アプリケーションのすべてのページが
// サーバーサイドでレンダリングされます。
//
// MyApp.getInitialProps = async (appContext: AppContext) => {
// // calls page's `getInitialProps` and fills `appProps.pageProps`
// const appProps = await App.getInitialProps(appContext);
// return { ...appProps }
// }
export default MyApp
Path aliases and baseUrl
Next.jsは、tsconfig.jsonの"path"と"baseUrl"のオプションを自動的にサポートしています。
この機能については、Module Path aliases documentationで詳しく説明されています。
タイプチェック next.config.js
next.config.jsは、BabelやTypeScriptでは解析されないため、JavaScriptファイルでなければなりません。しかし、以下のようにJSDocを使用して、IDEで型チェックを追加することができます。
// @ts-check
/**
* @type {import('next').NextConfig}
**/
const nextConfig = {
/* コンフィグオプションはこちら */
}
module.exports = nextConfig
インクリメンタル型チェック
Next.js は v10.2.1 から tsconfig.json で有効にすると imcremental type checking をサポートしており、大規模なアプリケーションでの型チェックを高速化することができます。
この機能を利用して最高のパフォーマンスを得るためには、少なくとも TypeScript の v4.3.2 を利用することを強くお勧めします。
Discussion