从reactjs迁移时在nextjs中动态路由

Question

import { ClientOnly } from './client';
import '../../assets/main.scss';
 
export function generateStaticParams() {
  return [{ slug: [""] }]
}
 
// Default component
export default function Page() {
  return <ClientOnly />;
}

我通过参考 next.js 文档中有关迁移的步骤将react.js项目迁移到Next.js 这是 src/app/[[...slug]]/page.js 中的代码

在这段代码中，我给出了默认为主页的静态slug，我的项目有一个管理面板，通过它我可以创建一个新页面，我没有管理面板的后端或前端代码，因为它是一个CMS类型系统 我只拥有用户面板的前端代码，我将其转换为 next.js 以用于 SEO 目的 当我创建 n 个新页面时，每个新页面都有自己独特的 slug

现在的问题是这个代码只允许我去静态slugs，就像如果我想去客户页面我需要像这样改变 return [{ slug: ["client"] }]

但是大约有 200 个页面，其中的 slug 是未知的，新页面每天都会添加它，所以很明显我不能静态地放置每个 slug

所以我想让这段代码动态化以获取任何slug，如果带有该slug的页面不在数据库中，那么应该出现404页面

Answer 1

generateStaticParams

您在此函数中放入的每个 slug 都会在构建时静态生成（除非您在服务器组件上进行重新验证）。

现在，如果有任何新的 slug 到达此服务器组件，请为该 slug 生成一个静态页面。您不需要将每个 slug 放在函数上，但如果您想在构建时缓存静态页面，请从 API/DB 获取所有 slug 并返回它。

对于 404 问题，当未找到 slug 时，可以使用服务器组件中的 notFound 帮助器。

例如。

import { notFound } from "next/navigation";

export const dynamicParams = true;

export async function generateStaticParams() {
  return [{ slug: "1" }, { slug: "2" }];
}

async function getPost(params: { slug: string }) {
  return await new Promise<{ id: number; title: string } | false>((resolve) => {
    setTimeout(function () {
      const id = Number(params.slug);
      if (isNaN(id) || !id || ![1, 2].includes(id)) resolve(false);
      else resolve({ id: id, title: "this is title" });
    }, 500);
  });
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params);
  if (!post) return notFound();

  return (
    <div>
      {post.title} for {post.id}
    </div>
  );
}