Next.jsにおけるルーティングについて解説ZennShinyaHinohara😊Next.jsにおけるルーティングについて解説2023/03/20に公開・約2,100字ツイートJavaScriptNext.jsReacttech今回はNext.jsについて解説していきます。フロントエンドエンジニアとして働くなら、Nextは必須技術となるのでぜひこれを機に学んでみましょう。今回は、ルーティングについて重点的に解説していきます。ルーティングまず、Nextにおけるルーティングについて解説していきます。Nextではsrc/pages配下が勝手にルーティングと紐付きます。src/pages/index.jsxは/に対応します。src/pages/hoge.jsxは/hogeに対応します。このように、ゼロコンフィグでルーティングが設定できるのもNextの強みの1つと言えます。ちなみに、コンポーネントは次のように定義します。Hogeこのように定義したコンポーネントをデフォルトexportすればOKです。コンポーネント名は何でもOKですが、ファイル名に一致させるのが一般的です。ダイナミックルーティングはまたNextには、ダイナミックルーティングという機能があります。ダイナミックルーティングとは、1つのファイルを複数のURLに紐づける方法になります。/post/id2、posts/id2は、記事の内容以外は同じページ内容になるかと思います。それらに合わせて記事の数分、id1.jsxやid2.jsxなどのファイルを作成するのは面倒です。それを解決するのがダイナミックルーティングになります。方法は簡単で、ファイル名を[]で囲むだけです。先ほどの例で言うのならば、[id].jsxを作れば良いだけです。することで、1つのファイルでそれぞれの記事に合わせたページを表示させることができます。ちなみに、同階層は固定の値のファイル名が優先されます。同階層に[id].jsxとLatest.jsxがあった場合に、/posts/latestにアクセスがあった場合はLatest.jsxが優先して使用されます。当たり前ですが同階層にダイナミックルーティングを2つ置くことはできません。次に、Nextにおけるページ遷移について解説していきます。Nextでは、主に2つのページ遷移方法があります。1.useRouterまずはuseRouterについて解説します。こちらはNext.jsに最適化されたwindow.locationやwindow.historyみたいなものです。このuseRouterを使うことでパスの情報を取得したり、ページ遷移したりすることができます。基本的な使い方は以下の通りです。)}このようにすることでページ遷移が可能になります。reloadやbackメソッドなどのwindow.locationやwindow.historyオブジェクトにあるような関数も実行可能です。2.Linkコンポーネント次にLinkコンポーネントについて解説していきます。こちらは普通のHTMLで例えると、aタグのような存在になります。aタグと同じように、このLinkコンポーネントにhref属性を追加することで、ページ遷移をすることが可能です。href="/">Home</Link>またダミーurlも設定可能だったり、クエリなどをオブジェクトで渡すことも可能なのでとても便利です。まとめ今回はNext.jsにおけるルーティングについて解説しました!ぜひ、この記事を参考にNextの理解を深めてください!宣伝0からエンジニアになるためのノウハウをブログで発信しています。https://hinoshin-blog.com/また、YouTubeでの動画解説も始めました。YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UCqaBUPxazAcXaGSNbky1y4gインスタの発信も細々とやっています。https://www.instagram.com/hinoshin_enginner/興味がある方は、ぜひリンクをクリックして確認してみてください!ツイートShinyaHinohara主にReactを使っているフロントエンドエンジニアです。記事は読みやすいように短めを意識してます。SNSやブログでは、趣味で科学的なライフハックを発信してます。お仕事依頼などはブログよりどうぞ。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフト券が還元されます。約2,100字ShinyaHinohara主にReactを使っているフロントエンドエンジニアです。記事は読みやすいように短めを意識してます。SNSやブログでは、趣味で科学的なライフハックを発信してます。お仕事依頼などはブログよりどうぞ。バッジを贈るバッジを贈るとは?目次ルーティングダイナミックルーティングはページ遷移1.useRouter2.Linkコンポーネントまとめ宣伝Zennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。