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

pages/
└── posts/
    └── [id].js

// pages/posts/[id].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
      {/* 这里可以添加更多内容 */}
    </div>
  );
};

export default Post;

// pages/posts/[id].js
import { useRouter } from 'next/router';

const Post = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticPaths() {
  // 获取所有可能的post id
  const paths = await fetch('https://api.example.com/posts').then(res => res.json());

  return {
    paths,
    fallback: true, // 允许ISR
  };
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.id}`).then(res => res.json());

  return {
    props: { post },
    revalidate: 10, // 每10秒重新生成页面
  };
}

export default Post;

// pages/posts/[id].js
import { useRouter } from 'next/router';

const Post = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticPaths() {
  // 获取所有可能的post id
  const paths = await fetch('https://api.example.com/posts').then(res => res.json());

  return {
    paths,
    fallback: false, // 不允许ISR
  };
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.id}`).then(res => res.json());

  return {
    props: { post },
  };
}

export default Post;