この記事の目的
- Next.jsでブログを作成したときの備忘録
- Next.js13のLinkコンポーネントについて
- エラーについての備忘録
概要
- Linkコンポーネントについて
- Next.js12と１３での書き方の違い
- 新規タブで開く際の書き方
Linkコンポーネントについて
Linkコンポーネントは画面遷移に使用するaタグのようなもの
下記のようにインポートしてから使用する
import { ImTwitter } from "react-icons/im";
import Link from "next/link"
Next.js12と１３での書き方の違い
Next.js12と１３でLinkコンポーネント書き方が変わったのでそれについて記載。
Next.js12の場合
import Link from 'next/link'
// Next.js12まではaタグを常にネストする必要がある
<Link href="https://twitter.com/piki_maru_ten">
<a><ImTwitter /></a>
</Link>
Next.js13の場合
import { ImTwitter } from "react-icons/im";
import Link from 'next/link'
// Next.js13ではaタグを記載するとエラーになる
<Link href="https://twitter.com/piki_maru_ten">
<ImTwitter />
</Link>
Next.js13ではaタグを記載すると下記のようなaタグにaタグをネストする書き方はダメ！というエラーが出ます
エラーにあるドキュメントはこちら
新規タブで開く際の書き方
aタグ必要ないのはわかったけど、新規タブで遷移させる時はどう書くのか気になったのでまとめました
Linkタグにそのままtargetとrel属性を追加すればいいだけでした
import { ImTwitter } from "react-icons/im";
import Link from 'next/link'
// Linkタグにtargetとrel属性を追加
<Link href="https://twitter.com/piki_maru_ten" target="_blank" rel="noopener noreferrer">
<ImTwitter />
</Link>