Next.jsのApp Routerでクエリパラメータ（GETパラメータ）と動的パスを取得

2023/12/19 (火) - 00:00　JavaScript PHP&CMS

Next.jsでは従来Page Routerをベースとしていましたが、Next.js 13以降ではApp Routerが採用されそれに伴いApp Routerを使用して開発することが推奨されています。…ので私もそれに習って勉強し直しです。

Next.js App Router 公式ドキュメント

主にソースを配置するディレクトリ、ルーティングの設計が変わりました。今回はApp Routerにおけるクエリパラメータ（GETパラメータ）の取得と、動的パラメータ（Dynamic Params）の取得をテストしてみました。

環境は以下の通り。

Next.js 14.0.x
React.js 18.0.x

クエリパラメータの取得

任意の場所にpage.jsを作成し、以下のように記入しました。post_idというクエリパラメータを取得するとします。取得する際はuseSearchParamsを使用します。

"use client"; 
import { useSearchParams } from "next/navigation";
export default function Page() {
 const params = useSearchParams();
 const id = params.get('post_id');
 return (
  <main>
   <p>GETパラメータ post_idは、<i>{id}</i>です。</p>
  </main>
 );
}

アクセス結果

表示結果

動的パラメータの取得

従来のPage Routerで動的パラメータを使用する際には、任意のディレクトリに/pages/hoge/[id].jsのようなファイルを生成していましたが、App Routerでは/src/hoge/[id]/page.jsのような作成ルールに変わったようです。

そこで今回は[post_id]/page.jsを作成しました。取得する際はuseParamsを使用します。

"use client";
import { useParams } from "next/navigation";
export default function Page() {
 const prams = useParams();
 const post_id = prams.post_id;
 return (
  <main>
   <p>パスは、<i>{post_id}</i>です。</p>
  </main>
 );
}

表示結果

応用：取得したパラメータに応じてデータ表示

Next.jsで取得したパラメータに応じて表示を変えたい。今回は例として動的のAPIでid=10を読み込むと、以下のJSONが返ってくるものとします。

{
 "Member": [
  {
   "id": 10,
   "name": "櫻井優衣💖",
   "birthday":"2000.2.21",
   "place":"東京都",
   "content": "ねぇ 呼び出しなんてなぁになぁに？🥺"
  }
 ] 
}

クエリパラメータ・useSearchParamsを使った場合

useSearchParamsを使ったテストのコード。

"use client";
import { useSearchParams } from "next/navigation";
import { useState } from "react";
export default function Page() {
 const params = useSearchParams();
 const post_id = params.get('post_id');
 const [dataJSON, setdataJSON] = useState(null);
 const [loadJSON, setloadJSON] = useState(false);
 fetch(`https://example.com/member/?id=${post_id}`).then((res) => res.json()).then((data) => {
  setdataJSON(data)
  setloadJSON(true)
 })
 if(loadJSON){
  return (
   <main>
    <p>GETパラメータ post_idは、<i>{post_id}</i>です。</p>
    <hr />
    <h1>{dataJSON.Member[0].name}</h1>
    <p className="birthday">誕生日：{dataJSON.Member[0].birthday}</p>
    <p className="place">出身地：{dataJSON.Member[0].place}</p>
    <p className="content">{dataJSON.Member[0].content}</p>
   </main>
  );
 }else{
  return (
   <p>読み込み</p>
  );
 }
}

/member/?post_id=10のアクセス結果。

動的JSON取得した表示結果

動的パラメータ・useParamsを使った場合

useParamsを使った場合を使ったテストのコード。

"use client";
import { useParams } from "next/navigation";
import { useState } from "react";
export default function Page() {
 const prams = useParams();
 const post_id = prams.post_id;
 const [dataJSON, setdataJSON] = useState(null);
 const [loadJSON, setloadJSON] = useState(false);
 fetch(`https://example.com/member/?id=${post_id}`).then((res) => res.json()).then((data) => {
  setdataJSON(data)
  setloadJSON(true)
 })
 if(loadJSON){
  return (
   <main>
    <p>パスは、<i>{post_id}</i>です。</p>
    <hr />
    <h1>{dataJSON.Member[0].name}</h1>
    <p className="birthday">誕生日：{dataJSON.Member[0].birthday}</p>
    <p className="place">出身地：{dataJSON.Member[0].place}</p>
    <p className="content">{dataJSON.Member[0].content}</p>
   </main>
  );
 }else{
  return (
   <p>読み込み</p>
  );
 }
}

/member/10/のアクセス結果。

動的JSON取得した表示結果