UnleashZealUpliftPersevereOvercomeDrive

Typescriptの備忘録

Next.jsでブログ用アプリケーションを作成した際に、いくつかのトラブルに直面しました。
この記事では、私と同じようにNext.jsを使ってブログを構築しようとしている方々に向けて、TypeScript関連のトラブルシューティングのポイントを備忘録としてまとめましたので、参考になれば幸いです。

1. TypeScript導入の初期設定

Next.jsでTypeScriptを導入する場合、まずは以下のコマンドでTypeScript関連の依存パッケージをインストールする。

npm install --save-dev typescript @types/react @types/node

インストール後、プロジェクトルートにtsconfig.jsonを生成するために以下を実行する。

npx tsc --init

生成されたtsconfig.jsonは、Next.jsの設定に合うように以下のオプションを確認・調整する。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

1.1 strictオプションの調整

"strict: true"を設定すると、型チェックが非常に厳密になる。
これにより、未定義の変数やオプショナルなプロパティの使用に対してエラーが発生することを確認。

<解決策>

  1. 必要に応じてstrictをfalseに設定するか、個別のstrict系オプションを調整する。
  2. 必須の型アノテーションを追加する。

2. TypeScriptとCSS Modulesの併用

Next.jsでCSS Modulesを使用する場合、TypeScriptと組み合わせることで型のエラーが発生することがある。

2.1 型定義ファイルの追加

CSS Modulesを使用するファイルの型を認識させるために、型定義ファイルを作成。
例えば、styles.d.tsとして以下を追加。

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

これにより、import styles from './styles.module.css';のようなインポートが型エラーなしに使用可能になる。

3. getStaticProps / getServerSideProps での型指定

Next.jsでは、静的生成やサーバーサイドレンダリングのためにgetStaticPropsやgetServerSidePropsを使用するが、返り値の型指定を行わないとTypeScriptエラーが発生することがある。

3.1 型の定義

データフェッチ関数の返り値に対して、以下のように型を定義する。

import { GetStaticProps } from 'next';

type Props = {
  posts: { id: string; title: string }[];
};

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = await fetchPosts(); // データ取得の関数
  return {
    props: {
      posts,
    },
  };
};

これにより、propsの型が明確になり、コンポーネントで使用できる。

4. API Routesの型指定

Next.jsのAPI RoutesでTypeScriptを使用する場合、リクエストとレスポンスの型を明確にする必要がある。

4.1 型の定義と使用例

NextApiRequestとNextApiResponseをインポートし、リクエストとレスポンスの型を定義する。

import type { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  name: string;
};

export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
  res.status(200).json({ name: 'Smaple User' });
}

"NextApiResponse"の部分により、レスポンスが{ name: string }型であることが保証される。

5. 型定義のインポート整理

TypeScriptのプロジェクトが大きくなると、型のインポートが増え、コードが少し見辛くなる。
import type構文を使用して、型のみをインポートすることで、コードの見通しが改善された。

import type { GetStaticProps, NextPage } from 'next';
import type { Post } from '../types/post';

これにより、型のみに対してエイリアスを適用し、他の値や関数のインポートと区別できる。

まとめ

Next.jsとTypeScriptを組み合わせることで、より堅牢で保守性の高いブログアプリケーションを構築できるが、設定や型定義の問題でつまずくことが多かったです。
他にもトラブルシューティング方法や設定が見つかりましたら、記事の内容を随時修正したいと思います。

← TOP