【Next.js】ルーティングの設定方法

はじめに

　本記事は、プログラミング初学者が学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

ルーティングの設定方法

Reactの場合

Reactの場合にはreact-router-domを使用して以下のようにルーティングの設定をします。

Router.jsx

    <BrowserRouter>
      <Routes>
        <Route path="sign_in" element={<SignIn />} />
        <Route path="sign_up" element={<SignUp />} />
        <Route path="mypage" element={<PrivateRoute><Header /><MyPage /></PrivateRoute>} />
        <Route path="todo" element={<PrivateRoute><Header /><PageTodo /></PrivateRoute>} />
        <Route path="*" element={<Page404 />} />
      </Routes>
    </BrowserRouter>

Next.jsの場合

Next.jsの場合には、pagesフォルダにファイルを作成することでルーティングを設定できます。
具体的には以下の通りです。

pagesフォルダにファイルを作成する

まず、pagesフォルダにフォルダを追加します。
今回は、postsフォルダを追加します。
次に、postsフォルダの中にファイルを作成します。
今回は、samplePost.jsファイルを作成します。

このようにすることで、http://localhost:3000/posts/samplePost でsamplePost.jsの中身が表示されます。

内容を記述する

ファイルの作成ができたら、内容を記述していきます。

samplePost.js

export default function() {
  return (
    <>
      <h1>samplePost</h1>
      <p>samplePostのページが表示されています。</p>
    </>
  );
}

ローカルサーバーを立ち上げる

ターミナルでnpm run devを実行するとローカルサーバーを立ち上げることができます。

ターミナル

$ npm run dev

ブラウザで表示を確認する

postsフォルダ内のsamplPost.jsの内容が表示されるか確認します。
ブラウザを開いて、http://localhost:3000/posts/samplePost にアクセスします。
すると以下のようにsamplePost.jsに記述した内容が表示されます。

上記のように、pagesフォルダにフォルダやファイルを作成することでルーティングを設定することができます。