如何在Next.js Pages目录中设置动态路由默认值实现分页？

1. 搭建路由文件结构 #

• 创建 pages/products/index.js：对应 /products 路径，专门处理页码为1的分页逻辑
• 创建 pages/products/[page].js：对应 /products/2、/products/3 等路径，处理页码≥2的情况

2. 复用分页核心逻辑 #

把获取产品列表、分页计算这类重复逻辑抽成共用函数，比如新建 utils/fetchProducts.js：

export async function fetchProducts(page = 1) {
  // 替换为实际接口请求逻辑，获取对应页码的产品数据
  const res = await fetch(`https://your-api.com/products?page=${page}`);
  return res.json();
}

两个路由文件直接调用该函数，避免代码冗余。

3. 路由跳转与链接处理 #

使用 next/link 时，根据页码判断跳转路径：

import Link from 'next/link';

function Pagination({ currentPage, totalPages }) {
  return (
    <div>
      {currentPage > 1 && (
        <Link href={currentPage - 1 === 1 ? '/products' : `/products/${currentPage - 1}`}>
          上一页
        </Link>
      )}
      {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
        <Link
          key={page}
          href={page === 1 ? '/products' : `/products/${page}`}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </Link>
      ))}
      {currentPage < totalPages && (
        <Link href={`/products/${currentPage + 1}`}>
          下一页
        </Link>
      )}
    </div>
  );
}

4. 服务端渲染（SSR）逻辑处理 #

• 在 pages/products/index.js 中，默认传入页码1：

import { fetchProducts } from '../../utils/fetchProducts';
import ProductList from '../../components/ProductList';
import Pagination from '../../components/Pagination';

export async function getServerSideProps() {
  const page = 1;
  const { products, totalPages } = await fetchProducts(page);
  return { props: { products, totalPages, currentPage: page } };
}

export default function ProductsPage({ products, totalPages, currentPage }) {
  return (
    <div>
      <ProductList products={products} />
      <Pagination currentPage={currentPage} totalPages={totalPages} />
    </div>
  );
}

• 在 pages/products/[page].js 中，校验页码有效性，无效则返回404：

import { fetchProducts } from '../../utils/fetchProducts';
import ProductList from '../../components/ProductList';
import Pagination from '../../components/Pagination';

export async function getServerSideProps(context) {
  const { page } = context.params;
  const pageNum = parseInt(page);
  
  // 校验页码：必须是≥2的有效数字
  if (isNaN(pageNum) || pageNum < 2) {
    return { notFound: true };
  }

  const { products, totalPages } = await fetchProducts(pageNum);
  // 页码超过总页数也返回404
  if (pageNum > totalPages) {
    return { notFound: true };
  }

  return { props: { products, totalPages, currentPage: pageNum } };
}

export default function ProductsPage({ products, totalPages, currentPage }) {
  return (
    <div>
      <ProductList products={products} />
      <Pagination currentPage={currentPage} totalPages={totalPages} />
    </div>
  );
}

5. 移除URL中的locale前缀 #

确保 next.config.js 中没有配置自动添加locale的相关设置；如果需要保留全局locale但该路由例外，在 Link 组件中显式设置 locale: false：

<Link href="/products" locale={false}>首页</Link>

内容的提问来源于stack exchange，提问作者BurgerBurglar