Nextjsでプロジェクトを新規作成した時に初期状態からエラーが発生している

目次

• バージョン
• 状況
• 原因
• 解決方法

バージョン

• yarn 4.2.1
• Node v20.9.0
• Nextjs 14系
• TypeScript 5系　

状況

Nextjsでプロジェクトを新規作成した時に初期状態からエラーが発生している

• page.tsxやlayout.tsxで
  • import の部分で「モジュール next/imageまたはそれに対応する型宣言が見つかりません。」
  • return の部分で「インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。」

原因

• node_modulesがない

解決方法

• tsconfig.json に以下の記述を追加する
  tsconfig.json

  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  }
  
  

.yarnrc.ymlファイルを作成して以下の記述を追加する

.yarnrc.yml

nodeLinker: node-modules

その後

yarn install

するとnode_modulesが作成される

私はこの手順で解決しました