More than 1 year has passed since last update.

Next.jsでLinkのhrefでType Errorが出たときの対策

Last updated at 2022-09-22Posted at 2022-09-15

<Link href={item.href}>
    {item.name}
</Link>

上記のようにLinkのhrefにstringの変数を展開すると以下のエラーが出た。

 Type 'string | undefined' is not assignable to type 'Url'.

この変数はmapで呼び出した配列の要素であり、型の定義もしている。
色々原因を調べたがわからずだったが、テンプレートリテラルを使用したらエラーは解消した。

<Link href={`${item.href}`}>
    {item.name}
</Link>

よくよく考えたらダブルクォーテーションは使用できないので、
文字列と明示すればよかった。