【Next.js和訳】Basic Features/TypeScript
この記事について
この記事は、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