Next.js でWebアプリケーションを開発しよう～！と意気込んだのはいいものの、Next.js をインストールして、それを VS Code で開くだけで、このエラーが出てしまいました。

エラーの内容

'Image' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element.ts(2786)

↓スクショ

↓Problem view のログも見てみるとエラー出てる

自分が実装したコードならエラーが起きることも想定できますが、インストールしただけでエラーになると困りますよね。

結論

結論としては、自分の場合は、VS Code の設定が問題でエラーが出ているだけでした。

以下のように、VS Code が使用する Typescript のバージョンを、workspace のバージョン、つまり package.json と npm install によってインストールされた、ローカルな typescript バージョンを使うようにすればエラーが解消されました。

状況を箇条書きで整理すると:

いつも通り npx create-next-app@latest . しただけ。
その後 VS code でファイルを開くと、このエラー。
エラー文面の解釈としては、Next.js に含まれる Image コンポーネントが JSX の中では使えないよ、なぜなら ReactNode は JSX としてただしくないから。
npm run build と npm start はなんの問題もなく実行できたので、false alert だとわかった。
- なので、無視すればOK
- けど、気持ち悪い(ただの潔癖)
- もしくは、Image コンポーネントを使わないようにする(画像がないサイトって素敵ですよね！)

試した解消法(無駄足)

VS Code を再起動
- VS Code で時々問題あると、再起動することで治ること結構ありますが、これでは解消せず
古い Next.js バージョンを明示的に利用
- package.json を書き換えて、14.x のバージョンの中の一番古いものを使ってみましたが解消せず(Reactのバージョンアップなどで、breaking changes があったのかなーと思い)
- 比較的新しい app router などの next の機能を使いたかったので、13 以前には戻れなかった