Next.jsにおけるルーティングについて解説
今回はNext.jsについて解説していきます。
フロントエンドエンジニアとして働くなら、Nextは必須技術となるのでぜひこれを機に学んでみましょう。
特に今回は、ルーティングについて重点的に解説していきます。
ルーティング
まず、Nextにおけるルーティングについて解説していきます。
Nextではsrc/pages配下が勝手にルーティングと紐付きます。
例えば、src/pages/index.jsxは/に対応します。
そしてsrc/pages/hoge.jsxは/hogeに対応します。
このように、ゼロコンフィグでルーティングが設定できるのもNextの強みの1つと言えます。
ちなみに、コンポーネントは次のように定義します。
const Hoge = () => {
return(
<div>hoge</div>
)
}
export default 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を使うことでパスの情報を取得したり、ページ遷移したりすることができます。
まず基本的な使い方は以下の通りです。
const Bar = () => {
const router = useRouter()
const onClickLink = () => {
router.push('/')
}
return(
<>
<div>hoge</div>
<div onClick={onClickLink}>Home</div>
</>
)
}
このようにすることでページ遷移が可能になります。
また、reloadやbackメソッドなどのwindow.locationやwindow.historyオブジェクトにあるような関数も実行可能です。
2.Linkコンポーネント
次にLinkコンポーネントについて解説していきます。
こちらは普通のHTMLで例えると、aタグのような存在になります。
aタグと同じように、このLinkコンポーネントにhref属性を追加することで、ページ遷移をすることが可能です。
<Link href="/">Home</Link>
またダミーurlも設定可能だったり、クエリなどをオブジェクトで渡すことも可能なのでとても便利です。
まとめ
今回はNext.jsにおけるルーティングについて解説しました！
ぜひ、この記事を参考にNextの理解を深めてください！
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion