next-env.d.ts とは
Next.js が提供する型を参照している型定義ファイル です。next build または next dev を実行すると自動生成されます。内容をみると node_modules 下の next/index.d.ts および next/image-types/global.d.ts を読み込んでいることがわかります。
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
エラーとその原因
create-next-app の環境下において、next-env.d.ts は .gitignore の対象になっています。そのため、CI 上でコードのチェックアウトと依存パッケージのインストールを実行しただけでは生成されません。それに起因して、TypeScript によるチェック tsc --noEmit が失敗しているようです。
対応方法
こちらの Issue にある通り、いくつかの対応方法 (next-env.d.ts をコミットしてしまう等) が考えられます。ここでは、ワークフロー内にビルド処理を追加することで next-env.d.ts を生成する方法を採りました。
まずは package.json に postinstall スクリプトを追加します。
{
"scripts": {
"lint": "npm run -s lint:es; npm run -s lint:style",
"test:ci": "jest --ci --silent --passWithNoTests",
"type": "bash -c tsc --noEmit",
+ "postinstall": "next build"
},
すると npm ci によるパッケージのインストールが実行された後に、next build コマンドが動きます。このタイミングで next-env.d.ts も生成されるためエラーは解消されます。しかし、ビルドキャッシュが有効になっていないという警告が出てきました。
Next.js のドキュメントに従って、ビルドキャッシュを利用するための設定を追加します。
jobs:
main:
+ - uses: actions/cache@v3
+ with:
+ path: |
+ ~/.npm
+ ${{ github.workspace }}/.next/cache
+ key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+ restore-keys: |
+ ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
- name: install dependencies
run: npm ci
- name: run Prettier
- name: run Jest
run: npm run test:ci
- name: run TypeScript Compiler
run: npm run type
これでビルドキャッシュが有効になるため、2 回目以降の実行時間は短縮されます。
おわりに
GitHub Actions で TypeScript のエラーチェックを動かすため、ワークフローにビルドを組み込みました。本来不要なことをやっているので、キャッシュを使うとはいえ実行時間の観点から望ましくありません。何かよい方法をご存知であれば、ぜひ教えていただきたいです 🙏
