Next.js にてページ内リンクを扱う

最終更新日:

Next.js にてページ内リンクを扱おうとした時に、
ビルドエラーが起きたのでメモ。

技術的にはあまり Next.js は関係ないかも。

環境

  • Next.js v15
  • React v18

ビルドエラー

下記のように古い書き方だとビルドエラーが起きる。

<Link href="#sample">go to sample</Link>

<a name="sample"></a>

Type error: Type '{ name: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'name' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

name ではなく id を使う

最近？では name ではなく id を使うらしい。

<Link href="#sample">go to sample</Link>

<div id="smaple" />