Next.js 取得網址參數與動態路由設計

以下是介紹如何在 Next.js 中使用 useSearchParam 取得網址參數，並利用動態路由建立 [id] 或 [slug] 的方式來處理查詢參數：

Next.js 取得網址參數與動態路由設計

在 Next.js 中，我們可以透過動態路由來取得網址查詢參數。動態路由的名稱可以使用 [] 包圍，像是 [id] 或 [slug]，來捕捉來自網址的參數。這裡將介紹如何使用 useSearchParam 和動態路由來取得這些參數。

使用 useSearchParam 取得查詢參數 useSearchParam 是一個 Next.js hook，可以用來從網址中取得查詢參數。這對於取得 URL 中的各種參數（例如 ID 或 slug）特別有用。

安裝與引入在你的 Next.js 專案中，首先需要安裝並引入 next/navigation 來使用 useSearchParam。

npm install next
然後在你的組件中引入 useRouter 和 useSearchParam：

import { useRouter } from "next/router";

範例：取得查詢參數假設你有一個網址是 /products?id=12345，並且希望取得 id 參數：

const ProductPage = () => {
  const router = useRouter();
  const { id } = router.query; // 這會從網址中取得 id 參數

  return (
    <div>
      <h1>商品詳細頁面</h1>
      <p>商品ID: {id}</p>
    </div>
  );
};

export default ProductPage;

在這個範例中，當使用者進入 /products?id=12345 時，id 會被抓取並顯示在頁面中。

使用動態路由取得參數除了查詢參數外，Next.js 也支援動態路由，可以讓你根據網址的結構動態取得參數。

範例：使用動態路由建立 [id] 或 [slug] 在 Next.js 中，可以使用 pages 資料夾來建立動態路由。假設你有一個商品頁面，並且希望根據 id 或 slug 來取得商品資料。

首先，你可以在 pages/products/ 資料夾中創建 [id].js 或 [slug].js 來定義動態路由：

例：建立商品頁面以 id 為路由參數在 pages/products/[id].js 中，動態路由會根據網址中的 id 參數來加載對應的頁面：

import { useRouter } from "next/router";

const ProductPage = () => {
  const router = useRouter();
  const { id } = router.query; // 取得網址中的 id 參數

  return (
    <div>
      <h1>商品詳細頁面</h1>
      <p>商品ID: {id}</p>
    </div>
  );
};

export default ProductPage;

當使用者訪問 /products/12345 時，id 會是 12345，並顯示在頁面上。

例：建立商品頁面以 slug 為路由參數如果你希望使用 slug 來建立商品頁面（例如 /products/awesome-product），可以創建 pages/products/[slug].js：

import { useRouter } from "next/router";

const ProductPage = () => {
  const router = useRouter();
  const { slug } = router.query; // 取得網址中的 slug 參數

  return (
    <div>
      <h1>商品詳細頁面</h1>
      <p>商品名稱: {slug}</p>
    </div>
  );
};

export default ProductPage;

當使用者訪問 /products/awesome-product 時，slug 會是 awesome-product，並顯示在頁面上。

完整範例：商品頁面假設你的商品頁面需要依據 id 來載入商品詳細資料，可以結合 API 請求來取得商品資料：

import { useRouter } from "next/router";
import { useEffect, useState } from "react";

const ProductPage = () => {
  const router = useRouter();
  const { id } = router.query;
  const [product, setProduct] = useState(null);

  useEffect(() => {
    if (id) {
      // 假設有一個 API 來根據 id 取得商品資料
      fetch(`/api/products/${id}`)
        .then((res) => res.json())
        .then((data) => setProduct(data));
    }
  }, [id]);

  if (!product) return <p>載入中...</p>;

  return (
    <div>
      <h1>商品詳細頁面</h1>
      <p>商品ID: {product.id}</p>
      <p>商品名稱: {product.name}</p>
      <p>價格: {product.price}</p>
    </div>
  );
};

export default ProductPage;

在這個範例中，當使用者訪問 /products/12345 時，會根據 id 參數載入商品資料並顯示在頁面上。

總結查詢參數：可以使用 useRouter 的 router.query 來取得 URL 查詢參數。動態路由：透過 pages 資料夾中的 [id].js 或 [slug].js 來取得動態路由參數。範例：以商品頁面為例，展示如何根據 id 或 slug 動態獲取並顯示資料。

Next.js 取得網址參數與動態路由設計​

Next.js 取得網址參數與動態路由設計