Next.js 13 App目录下如何获取页面slug？解决原写法报错问题

Next.js 13 的 App Router 完全重构了数据获取逻辑，不再支持 getStaticProps 这类 Pages Router 中的 API，这也是你之前写法报错的原因。以下是不同场景下获取页面 slug 的具体实现方式：

服务器组件中获取slug #

如果你的页面组件是服务器组件（默认就是服务器组件，无需额外标记），且路由为动态路由（比如 app/[slug]/page.js），可以直接通过组件的 params 参数拿到 slug：

// app/[slug]/page.js
export default async function Page({ params }) {
  // 直接从params中提取slug
  const slug = params.slug;
  
  // 示例：用slug请求对应数据
  const postData = await fetch(`https://your-api-domain/posts/${slug}`).then(res => res.json());
  
  return (
    <div>
      <h1>{postData.title}</h1>
      <p>{postData.content}</p>
    </div>
  );
}

静态预渲染时生成路径（替代getStaticPaths） #

如果需要静态预渲染所有动态路由页面，需在同路由目录下创建 generateStaticParams.js 文件，返回所有可能的 slug 列表：

// app/[slug]/generateStaticParams.js
export async function generateStaticParams() {
  // 从API或数据库获取所有需要预渲染的slug
  const allPosts = await fetch('https://your-api-domain/posts').then(res => res.json());
  
  return allPosts.map(post => ({
    slug: post.slug,
  }));
}

客户端组件中获取slug #

如果是客户端组件（需添加 'use client' 指令），可以使用 next/navigation 提供的 useParams 钩子：

// app/[slug]/ClientComponent.js
'use client';

import { useParams } from 'next/navigation';

export default function ClientComponent() {
  const params = useParams();
  const slug = params.slug;
  
  return <div>当前页面的slug：{slug}</div>;
}

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