既存のNext.jsプロジェクトに TypeScript を導入すると「Error: Line 1: Unexpected token ILLEGAL」のエラーになる。

開発環境

・OS：Windows
・エディタ：VSCode

エラー内容

Next.jsにTypeScriptを導入する際、以下の手順を行うとエラーになった。

1. ルートディレクトリにtsconfig.jsonを作成。
2. npm install --save-dev typescript @types/react @types/nodeを実行
3. npm run devを実行

npm run dev       

> dev
> next dev

   ▲ Next.js 15.0.3
   - Local:        http://localhost:3000

 ✓ Starting...
Error: Line 1: Unexpected token ILLEGAL
    at ErrorHandler.constructError (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:127785)
    at ErrorHandler.createError (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:128021)
    at ErrorHandler.throwError (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:128155)
    at Scanner.throwUnexpectedToken (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:132914)
    at Scanner.scanPunctuator (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:140960)
    at Scanner.lex (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:150049)
    at Tokenizer.getNextToken (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:155439)
    at Object.tokenize (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:12452)
    at tokenize (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:2939)
    at Object.parse (C:\Users\hidek\Desktop\private\study-typescript\node_modules\next\dist\compiled\comment-json\index.js:1:5765) {
  index: 0,
  lineNumber: 1,
  description: 'Unexpected token ILLEGAL'
}

解決策

ChactGPTによると、エラー内容としては「このエラーの主な原因は、tsconfig.jsonやpackage.jsonのようなJSON形式の設定ファイルが、無効な構文や、特殊文字（ILLEGAL TOKEN） を含んでいる」とのこと。

「手動でtsconfig.jsonを作成した」or「tsconfig.jsonに無駄な文字列が入っていた」ことが原因かもしれなかったので、以下の手順でTypeScriptを導入すると上手くいった。

1. npm install --save-dev typescript @types/react @types/nodeを実行
2. npx tsc --initを実行
3. npm run devを実行