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

在Next.js中，动态路由可以通过使用文件系统作为路由的基础来模拟静态路由的外观和行为。以下是实现这一目标的基础概念和相关步骤：

基础概念

动态路由：允许你创建带有参数的路由，例如 /posts/[id]。
静态路由：通常是指路径固定的路由，例如 /about 或 /contact。

实现步骤

1. 创建动态路由文件

在 pages 目录下创建一个文件夹，例如 posts，并在其中创建一个 [id].js 文件。这会告诉Next.js这是一个动态路由。

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

2. 编写动态路由组件

在 [id].js 文件中编写你的组件逻辑。你可以使用 useRouter 钩子来获取路由参数。

// 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;

3. 预渲染动态路由

为了使动态路由看起来像静态路由，你可以使用增量静态再生（ISR）或静态站点生成（SSG）。

使用增量静态再生（ISR）

ISR允许你在构建时生成页面，并在后台按需更新它们。

// 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;

使用静态站点生成（SSG）

SSG在构建时生成所有页面，适用于内容不经常变化的场景。

// 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;