🛣️
【Next.js】ルーティング実装はnext/routerとnext/linkどちらが最適解なのか
やりたいこと
- Next.jsにおいて、画面遷移の書き方は以下の2つのどちらが最適解かを知りたい。
- next/router
- next/link
結論
基本的に以下のように使い分ければ良さそう。
-
トリガーがクリックの場合は、next/link
- 例：ヘッダーメニューでクリックしてページ遷移するときなど
-
トリガーがクリック以外の場合は、next/router
- 例：ログイン認証が通ったら、TOPページにリダイレクトさせるなど
具体的に何が良いのか、Pros/Consでまとめてみました。
next/link
-
Pros
- SEOに強くなる
- aタグが生成され、クローラーに検出してもらいやすくなる。クローラビリティが向上する。
- SPAのような挙動になるため、パフォーマンス・UX向上につながる。
- SEOに強くなる
-
Cons
- 特になし
※ちなみに<a>のみだと、SPA機能が提供されないのでメリットがあまりない。
next/router
-
Pros
- ロジック内でroutingのトリガーを発火することができる。
-
Cons
- SEOに弱い。
-
aタグが生成されないので、クローラーに検出されない。
window.locationに似た挙動になるっぽい。
-
- SEOに弱い。
→ 他のページに移動するためだけに使用するのは避けたい。
参考サイト
Discussion