Next.js 动态参数路由

Next.js 提供了强大的动态路由功能，允许开发者根据 URL 的不同部分来渲染不同的页面。这使得应用能够更加灵活地处理各种请求。

动态路由的基本概念

在 Next.js 中，动态路由是通过在文件名中使用方括号 [] 来实现的。例如，如果你想要创建一个可以处理 /posts/1、/posts/2 等 URL 的页面，你需要创建一个名为 pages/posts/[id].js 的文件。这个文件将会匹配所有以 /posts/ 开头并且后面跟着任意 ID 的 URL。

创建动态路由

假设我们有一个博客应用，并且希望用户可以通过访问类似 /post/:postId 的 URL 来查看特定的文章。为了实现这一点，我们首先需要创建相应的动态路由文件。

步骤 1: 创建动态路由文件

在 pages 目录下创建一个名为 post/[postId].js 的文件。这个文件将负责处理所有带有 postId 参数的 URL。

// www.javascriptcn.com code example
// pages/post/[postId].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { postId } = router.query;

  return (
    <div>
      <h1>文章：{postId}</h1>
    </div>
  );
}

在这个例子中，我们从 router.query 中获取 postId 参数，并将其显示在页面上。

使用 getStaticProps 和 getServerSideProps

对于静态生成和服务器端渲染，Next.js 提供了 getStaticProps 和 getServerSideProps 方法来预取数据。这些方法可以在动态路由文件中使用。

使用 getStaticProps 静态生成

如果你知道所有可能的 postId 值，并且这些值不会经常改变，你可以使用 getStaticProps 来预先生成这些页面的数据。

// www.javascriptcn.com code example
// pages/post/[postId].js
export async function getStaticPaths() {
  // 返回一个数组，其中每个元素都是一个对象，包含 `params` 字段
  return {
    paths: [
      { params: { postId: '1' } },
      { params: { postId: '2' } }
    ],
    fallback: false // 如果设置为 true，则会为没有定义的路径返回一个 404 页面；如果设置为 blocking，则会在构建时等待所有路径生成完成。
  };
}

export async function getStaticProps(context) {
  const { postId } = context.params;
  // 这里可以调用 API 或其他数据源来获取具体的文章数据
  const data = await fetch(`https://your-api-endpoint.com/post/${postId}`);
  const post = await data.json();

  return {
    props: {
      post
    }
  };
}

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

使用 getServerSideProps 服务器端渲染

如果你的应用需要根据每次请求的不同来动态获取数据，那么应该使用 getServerSideProps。

// www.javascriptcn.com code example
// pages/post/[postId].js
export async function getServerSideProps(context) {
  const { postId } = context.params;
  const data = await fetch(`https://your-api-endpoint.com/post/${postId}`);
  const post = await data.json();

  return {
    props: {
      post
    }
  };
}

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

路由重定向和错误处理

除了基本的动态路由之外，Next.js 还提供了路由重定向和错误处理的功能，使得应用的导航更加友好。

路由重定向

在某些情况下，你可能需要将用户从一个 URL 重定向到另一个 URL。这可以通过在 getServerSideProps 或 getStaticProps 函数中返回一个 redirect 对象来实现。

// www.javascriptcn.com code example
// pages/post/[postId].js
export async function getServerSideProps(context) {
  const { postId } = context.params;
  if (postId === '3') {
    // 将用户重定向到 /posts/new-post
    return {
      redirect: {
        destination: '/posts/new-post',
        permanent: false,
      },
    };
  }

  const data = await fetch(`https://your-api-endpoint.com/post/${postId}`);
  const post = await data.json();

  return {
    props: {
      post
    }
  };
}

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

错误处理

在动态路由中处理错误也很重要。你可以通过在页面组件中捕获错误，或者通过 getInitialProps 或 getServerSideProps 返回错误对象来实现。

// www.javascriptcn.com code example
// pages/post/[postId].js
export async function getServerSideProps(context) {
  const { postId } = context.params;
  try {
    const data = await fetch(`https://your-api-endpoint.com/post/${postId}`);
    if (!data.ok) throw new Error('无法加载文章');
    const post = await data.json();
    return {
      props: {
        post
      }
    };
  } catch (error) {
    return {
      notFound: true, // 返回 404 页面
    };
  }
}

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

通过以上步骤，我们可以看到如何在 Next.js 应用中有效地使用动态路由，并结合不同的数据获取策略来提升用户体验。