Next.jsにtypescriptの導入方法
コンテンツ
開発でTypeScriptの導入は下記コマンドを実行します。
yarn add --dev typescript @types/react @types/node
導入時にエラーが発生した場合
typescript導入時にエラがー発生した場合、プロジェクトのビルド時に下記エラーが発生する場合があります。
$ yarn dev
yarn run v1.22.17
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
<w> [webpack.cache.PackFileCacheStrategy] Restoring failed for Compilation/modules|~/home/・・・/node_modules/@next/react-refresh-utils/runtime.js from pack: TypeError: Cannot read properties of undefined (reading 'length')
<w> [webpack.cache.PackFileCacheStrategy] Restoring failed for Compilation/modules|~/home/・・・/node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app! from pack: TypeError: Cannot read properties of undefined (reading 'length')
typescript導入コマンド実行時に通信障害や空き容量等でエラーが発生した場合、typescriptが正常にビルドできない状態になります。
その場合は下記手順で入れ直しを実行します。
Node.jsを最新のバージョンにアップグレード
下記コマンドでnvmでNode.jsを最新バージョンにアップグレードします。
Node.js 安定版のバージョンを確認します。
$nvm ls
v11.10.1
v12.18.3
v14.9.0
-> v14.17.0
default -> node (-> v14.17.0)
node -> stable (-> v14.173.0) (default)
stable -> 14.17 (-> 14.17.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/gallium (-> v16.13.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.7 (-> N/A)
lts/fermium -> v14.18.1 (-> N/A)
lts/gallium -> v16.13.0 (-> N/A)
v116.13.0にアップグレードします。
$nvm install --lts
または
$nvm install v16.13.0
この場合に、容量オーバーの場合下記 curlでエラーが発生する場合あり
$nvm install --lts
‥
curl: (23) Failure writing output to destination
※上記エラーは、snapでcurlをインストールした場合も発生するケースあり。
yarn のインストール
Node.js をアップグレードした場合、yarn も再度インストールする必要があります。
$ npm install -g yarn
node_modulesディレクトリを削除
node_modulesディレクトリを削除します。
$ rm -rf node_modules
typescriptをインストール
下記コマンドでtypescriptをインストール します。
$ yarn add --dev typescript @types/react @types/node
プロジェクトのビルド
$ yarn dev
yarn run v1.22.17
warning ../../../package.json: No license field
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled successfully in 6.2s (172 modules)
ビルド時のエラーが解消されました。