Next.js ✖️ TypeScriptのプロジェクトをbuildしようとしたらエラーが発生した

概要

初めてNext.js ✖️ TypeScriptのプロジェクトをbuildしようとしたら複数のエラーが発生したため解決方法を備忘録のため投稿する。

環境

■ Nodeバージョン
16.16.0
■ TypeScriptバージョン
4.7.4

Linkの使用

発生したエラー。

Error: Do not use an `<a>` element to navigate to `/`. Use `<Link />` from `next/link` instead.

下記コードを記載していたがLinkを使用する必要がある。

<a href="/" >〇〇</a>

下記に変換後エラーが解消された。

<Link href="/">
  <a>〇〇</a>
</Link>

関数コンポーネントをpagesフォルダの外に配置

エラー

Generating static pages (0/9)TypeError: Cannot read properties of undefined (reading '００')

// 以下の同じようなエラーが出ていたので省略

外部の関数コンポーネントをpagesフォルダ配下に格納していたことによりエラーが発生した。

pages/index.tsx

import Header from '../components/header'

<Header />

上記コードのimportしているファイルをpagesフォルダの外に配置してパスを変更して解決できた。