Next.jsの開発過程で出たエラーの解消法

勉強し始めのエラーは解消に時間がかかるものです。
私が出会ったエラーとその解消について紹介しておきます。

【この記事をオススメしたい人】
・これからNext.jsを勉強しようとしている人
・Next.jsを勉強中で日が浅い人

ひとつでもお役に立てることがあれば幸いです！

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <p> in <p>.

上記のエラーが出ました。
<p>の中にHTMLが入っていることを怒っているようでした。
原因は、受け取ったchildrenをpタグで囲ってしまったことでした。

// コンポーネントの呼び出し側（一部を抜粋）
<Heading
  level={1}
  text="h1タグで囲まれたテキストがここに入ります。"
>
  <p>subtitleを入力する場合</p>
</Heading>

// コンポーネントの定義側（一部を抜粋）
<hgroup className="mb-6">
  <HeadingTag className={classes}>{text}</HeadingTag>
  <p>{children}</p> 
</hgroup>

// エラーの原因はコンポーネント側のchildrenの箇所
- <p>{children}</p>
+ {children}

〜は型 'JSX.IntrinsicElements' に存在しません

コンポーネントは大文字から始めないとエラーになります。

JSXのファイル内には通常のHTMLのように<div>とタグを書くことができます。
なので小文字から始めてしまうとエラーとなるため独自で定義したコンポーネントであることを明示的に示すためにお作法として「コンポーネントは大文字から始める」が基本となります！