Next.js 13中如何在Server Component中获取查询参数？

在Next 13的App目录中，Server Component获取查询参数的方式和之前的getServerSideProps不同，具体分为两种场景：

页面级Server Component #

对于app目录下的page.js/page.tsx（包括动态路由页面），Next.js会自动向组件传递searchParams参数，你可以直接解构并使用：

// app/articles/page.js
export default async function ArticlesPage({ searchParams }) {
  // 获取查询参数，无值时用默认值
  const page = searchParams.page || '1';
  const category = searchParams.category || 'all';

  // 结合参数请求数据
  const articles = await fetchArticles(page, category);

  return (
    <div>
      <h2>分类：{category} | 第{page}页</h2>
      {/* 渲染文章列表 */}
    </div>
  );
}

如果是带动态路径的页面（比如app/articles/[id]/page.js），还会同时收到params参数用于获取路径参数，两者可结合使用：

// app/articles/[id]/page.js
export default async function ArticleDetailPage({ params, searchParams }) {
  const articleId = params.id;
  const viewMode = searchParams.mode || 'default';

  const article = await fetchArticleDetail(articleId, viewMode);

  return <div>文章ID：{articleId} | 查看模式：{viewMode}</div>;
}

子级Server Component #

子级Server Component无法直接获取searchParams，需要从父页面组件将所需参数传递进去：

// app/articles/components/ArticleList.js
export default async function ArticleList({ page, category }) {
  const articles = await fetchArticles(page, category);
  return (
    <ul>
      {articles.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

// 在页面组件中调用子组件
export default async function ArticlesPage({ searchParams }) {
  const page = searchParams.page || '1';
  const category = searchParams.category || 'all';

  return (
    <div>
      <h2>分类：{category} | 第{page}页</h2>
      <ArticleList page={page} category={category} />
    </div>
  );
}

注意：useSearchParams是客户端组件专属Hook，Server Component不可使用，必须通过上述参数传递的方式获取查询参数。

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