Zenn
🚀

【Next.js和訳】Basic Features/TypeScript

2021/10/02に公開・約4,900字
Next.js
tech

この記事について

この記事は、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（通常は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.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) => {
  // ...
}

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

ログインするとコメントできます