以前、簡単にNext.jsの設定方法などをまとめました
これだけで、コードを書いたりはできるのですが、実際の開発となった場合、さまざまな知識が必要になってきます

例えば、今表示している画面以外にも、別ページを用意して、表示を切り替えたいなどがあるかと思います
（ログインのページとログインした後のページなど）

そのような時に、さまざまなページ遷移の際に必要なルーティングについて、学びたいと思います

ルーティングとは

簡単に言うと、Webサイトに訪問した際に、どのページにアクセスした、どんなページが表示するのかを制御すること

ちょっとわかりにくいので、ECサイトで説明すると、
ドラゴンボールという漫画が欲しいとします

その場合、検索窓で「ドラゴンボール　漫画」みたいな感じで入力して「Enter」すると、検索一覧が出てきます

この検索一覧から欲しい本（ドラゴンボールの３０巻が欲しいなど）をクリックするとその本の詳細ページに行くかと思います

このように３０巻の詳細のページに行ったら３０巻の詳細の内容が表示されたり、
検索の画面では、検索結果が表示されたり、このような動作を制御しているのがルーティングになります

このルーティングをちゃんと設定していないと、３０巻の詳細ページを押したのに１巻の詳細ページが表示されたなどが起きるため、うまく行ってほしい挙動ができなくなります

Next.jsでのルーティングについて

世の中にはさまざまな言語やフレームワークなどツールがあります
このため、ルーティングの設定についても、使うものによって、異なります

Next.jsはこのルーティングの設定がとてもシンプルにできるため、最近、ますます流行ってきています

Next.jsのルーティングの種類について

Next.jsには２種類のルーティング方法があります
ただ、少し前に備わった新しい、ルーティングであるApp Routerが現状ではよく使われています

これから学習する際も、まずは、App Routerを学んだ方がいいので、App Routerを説明したいと思います

App Routerとは

Next.js13より登場したもので、現在よく使われています
このApp Routerにより、開発の方法が変更されました

まず、Next.jsのインストールを行うと、appというフォルダ作成されます
このappフォルダがルーティングの際のキーになります

appのフォルダの下にフォルダを作成することで簡単にルーティングの設定が可能になります

例えば、下記のようにフォルダやファイルを設置したとします

appのフォルダにはpage.tsxというファイルが入っている
appフォルダの中にaboutのフォルダとdashboardのフォルダが入っている
aboutのフォルダとdashboardのフォルダにはそれぞれ、page.tsxが入っている

Next.jsを起動すると最初のページが表示されるかと思います
この最初のページが上記の'/'で示している階層になります
'/'＝appのフォルダのpage.tsxのファイルを読み込んで、表示する
（URLだと、https://localhost:3000のようになっていると思います）

appのフォルダの中にあるaboutのフォルダは'/about'のようにして、表示することができ、
’/about’にすると、aboutの中のpage.tsxのファイルを読んで表示する
（URLだと、https://localhost:3000/aboutのようになっていると思います）

このような感じで、フォルダの階層で、ルーティングを制御します

他の言語だと、http://xxx/xxxの場合は、こういう表示をしたいからファイルを引っ張ってきてなど、設定が必要なことが多いですが、
Next.jsはフォルダの階層とそのフォルダにpage.tsxを入れるだけで制御できるので、かなり簡単に、ルーティングの設定を行えます

まとめ

今回、App Routertの際のルーティングの最初の部分だけ、記事にしました
他にもServerComponentsやレイアウトのファイルの配置などで効率よく開発ができたりなど、App Routerの知識を前提に、学ぶべきことがたくさんあります

SSGやSSRなど専門用語やより細かい仕組みを学んでいきつつ、
もっと深ぼったものもまとめていきたいと思います

Next.jsは奥が深い
いろんな仕組みが学べるし、開発がしやすいので、もっと学習せねば〜