Next.js中getStaticProps处理查询参数的方案咨询

首先要明确：getStaticProps 是在构建阶段执行的，而URL查询参数是客户端请求阶段才会存在的，所以无法直接在构建时获取动态的请求query。但根据你的需求，分两种场景处理：

场景1：构建时预生成带固定查询参数的页面 #

如果你的页面需要基于一组已知的查询参数预生成静态页面，可以结合 getStaticPaths + getStaticProps 实现，不需要额外库：

// pages/your-page.js
export async function getStaticPaths() {
  // 定义需要预生成的查询参数组合
  const paths = [
    { params: {}, query: { id: '1', category: 'tech' } },
    { params: {}, query: { id: '2', category: 'design' } }
  ];

  return {
    paths,
    fallback: false // 或 'blocking'/'true' 根据需求选择
  };
}

export async function getStaticProps(context) {
  // 从context.query中获取预定义的查询参数
  const { id, category } = context.query;

  // 用这些参数请求数据
  const data = await fetch(`https://api.example.com/data?id=${id}&category=${category}`);
  const result = await data.json();

  return {
    props: { result }
  };
}

场景2：运行时动态处理查询参数（无法在getStaticProps中直接实现） #

如果查询参数是用户动态传入的（比如随机的id、搜索关键词），getStaticProps 无法在构建时预知这些参数，此时有两种替代方案：

方案A：客户端侧处理 #

在组件挂载后，用 useRouter 获取查询参数并请求数据：

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

export default function YourPage() {
  const router = useRouter();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      if (!router.isReady) return; // 确保query已加载
      const { id, keyword } = router.query;
      const res = await fetch(`https://api.example.com/search?id=${id}&keyword=${keyword}`);
      const result = await res.json();
      setData(result);
      setLoading(false);
    }

    fetchData();
  }, [router.isReady, router.query]);

  if (loading) return <div>Loading...</div>;

  return <div>{JSON.stringify(data)}</div>;
}

方案B：改用getServerSideProps #

如果需要在服务器端处理查询参数并获取数据（每次请求都运行），可以用 getServerSideProps，它能直接拿到请求的query：

export async function getServerSideProps(context) {
  const { query } = context;
  const { id, keyword } = query;

  const res = await fetch(`https://api.example.com/search?id=${id}&keyword=${keyword}`);
  const data = await res.json();

  return {
    props: { data }
  };
}

export default function YourPage({ data }) {
  return <div>{JSON.stringify(data)}</div>;
}

关于query-string库的使用 #

如果确实需要在处理query时做复杂解析（比如嵌套参数、数组格式），query-string 是个可靠的选择，比如在客户端或getServerSideProps中使用：

import queryString from 'query-string';

// 解析复杂query
const parsedQuery = queryString.parse(router.asPath.split('?')[1]);
// 或在getServerSideProps中
const parsedQuery = queryString.parse(context.req.url.split('?')[1]);

它的优势是支持更多解析选项（比如数组格式、嵌套对象），比原生的 URLSearchParams 更灵活，但如果只是简单的键值对，原生API足够用：

// 原生URLSearchParams示例
const params = new URLSearchParams(router.asPath.split('?')[1]);
const id = params.get('id');
const category = params.get('category');

总结：

• 构建时预生成：用 getStaticPaths + getStaticProps，无需额外库
• 运行时动态处理：优先客户端 useRouter 或服务器端 getServerSideProps
• 复杂query解析：query-string 是成熟方案，原生 URLSearchParams 可满足简单需求

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