結論
セキュリティ対策としてnoopener noreferrer 属性を設定しても問題ないかなと思います。ユーザー投稿型アプリケーションのエディターには、nofollowを追加してもいいでしょう。
noopener, noreferrer, nofollow の説明
- noopener: リンク先ページが元のページの JavaScript を制御することを防ぎ、セキュリティを向上させます。
- noreferrer: リファラー情報をリンク先に送らないようにします。これにより、リンク元のプライバシーが保たれます。
- nofollow: 検索エンジンにリンク先を信用しないよう伝えるための属性です。リンクの SEO 効果を回避する場合に使います。
a タグが非推奨な理由
Next.js では、Link コンポーネントを使うことで、クライアントサイドのナビゲーションが有効になり、ページ遷移が速くなります。通常の <a> タグを使うと、サーバーサイドのリロードが発生するため、UX の観点から非推奨です。
知っておくべきこと:
aタグの属性（例えばclassNameやtarget="_blank"）は、Linkコンポーネントに props として追加すると、基底のa要素に渡されます。
Next.js の Link コンポーネントのプロパティ一覧
以下は、Link コンポーネントの主要なプロパティです。
| プロパティ | 例 | 型 | 必須 |
|---|---|---|---|
| replace | replace={false} | Boolean | - |
| scroll | scroll={false} | Boolean | - |
| prefetch | prefetch={false} | Boolean or null | - |
詳細は公式ドキュメントを参照してください。
まとめ
Next.js の Link コンポーネントを使用することで、外部リンクを安全かつ最適に実装できます。適切な属性を追加することで、セキュリティと SEO を両立させたリンクを作成しましょう。
