[Next.js]Linkタグのやりがちミスについて

はじめに。

Next.jsでポートフォリオを作る際に、Linkタグのtypoで起きた不具合について簡単に説明したいと思います。

不具合

<SidebarBox>
    <Link href="dailyreport">
        <SidebarList>日報</SidebarList>
    </Link>
    <Link href="achivement">
        <SidebarList>成果</SidebarList>
    </Link>
    <Link href="presentation">
        <SidebarList>出力画面の見出し</SidebarList>
    </Link>
</SidebarBox>

上記のコードで、下記のようなボタンが3つできて、問題なく画面遷移できてました。

日報ボタンを押すと、domain/dailyreportに遷移、その後成果ボタンを押すとdomain/achivementに遷移。
ここで、下記のコードを追加したら、、

<Link href={`userprofile/${currentUserId}`}>
    <SidebarList>
    ユーザープロフィール
    </SidebarList>
</Link>

ユーザープロフィールボタンを押し、domain/userprofile/[user_id]に遷移後、dailyreportボタンを押すと、domain/dailyreportではなくdomain/userprofile/dailyreportに遷移されてしまいました。
コードを追加する前までは特になんのエラーもなかったので、原因がわかるまで時間がかかりました。

原因

本当に基本の基が原因でして、
Linkタグのhref要素の先頭に/がないことが原因でした。
下記のように修正することで、不具合解決。

  <SidebarBox>
    <Link href="/dailyreport">
      <SidebarList>日報</SidebarList>
    </Link>
    <Link href="/achivement">
      <SidebarList>成果</SidebarList>
    </Link>
    <Link href="/presentation">
      <SidebarList>出力画面の見出し</SidebarList>
    </Link>
    <Link href={`/userprofile/${currentUserId}`}>
      <SidebarList>
        ユーザープロフィール
      </SidebarList>
    </Link>
  </SidebarBox>

コードの修正後の動作確認は本当に大事ですね。
コードの修正前は不具合がなかったので、コードが悪いとも思わなかったので原因究明に時間がかかりました。
こういう不具合を防止するためにも、コード修正後の動作確認はとても重要ですね。

以上です。ありがとうございました。