如何在Next.js中使动态路由看起来像静态路由

// pages/[slug]/index.js

import { useRouter } from 'next/router';

export default function DynamicPage() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Dynamic Page</h1>
      <p>Slug: {slug}</p>
    </div>
  );
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug: 'page1' } },
      { params: { slug: 'page2' } },
      // 可以根据实际需求添加更多的参数值
    ],
    fallback: false, // 如果为true，则允许在运行时生成缺失的页面
  };
}

// pages/[slug]/index.js

import { useRouter } from 'next/router';

export default function DynamicPage({ data }) {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Dynamic Page</h1>
      <p>Slug: {slug}</p>
      <p>Data: {data}</p>
    </div>
  );
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug: 'page1' } },
      { params: { slug: 'page2' } },
      // 可以根据实际需求添加更多的参数值
    ],
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // 根据参数值获取数据
  const data = await fetchData(params.slug);

  return {
    props: {
      data,
    },
  };
}