面试题：Next.js中如何在动态路由的数据驱动场景下获取参数并进行数据请求

获取 id 参数的方法：

在 Next.js 中，对于动态路由 pages/post/[id].js，可以通过 getServerSideProps 函数中的 context 对象获取 id 参数。示例代码如下：

export async function getServerSideProps(context) {
  const { id } = context.query;
  return {
    props: {
      id
    }
  };
}

const PostPage = ({ id }) => {
  return (
    <div>
      <p>文章 ID: {id}</p>
    </div>
  );
};

export default PostPage;

也可以在客户端使用 useRouter 钩子来获取参数。首先要导入 useRouter：

import { useRouter } from 'next/router';

const PostPage = () => {
  const router = useRouter();
  const { id } = router.query;
  return (
    <div>
      <p>文章 ID: {id}</p>
    </div>
  );
};

export default PostPage;

使用该参数进行数据请求并展示在页面上：

使用 getServerSideProps 进行数据请求（服务端渲染）：

当使用 getServerSideProps 获取到 id 参数后，可以使用 fetch 等方式向 API 发送请求。假设 API 地址为 https://example.com/api/posts/${id}，示例代码如下：

export async function getServerSideProps(context) {
  const { id } = context.query;
  const res = await fetch(`https://example.com/api/posts/${id}`);
  const data = await res.json();
  return {
    props: {
      post: data
    }
  };
}

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

export default PostPage;

在客户端进行数据请求（客户端渲染）：

如果使用客户端渲染，在获取 id 参数后，在 useEffect 钩子中进行数据请求。示例代码如下：

import { useRouter } from 'next/router';
import { useEffect, useState } from'react';

const PostPage = () => {
  const router = useRouter();
  const { id } = router.query;
  const [post, setPost] = useState(null);

  useEffect(() => {
    const fetchPost = async () => {
      const res = await fetch(`https://example.com/api/posts/${id}`);
      const data = await res.json();
      setPost(data);
    };
    if (id) {
      fetchPost();
    }
  }, [id]);

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

export default PostPage;

星途面试题库

面试题：Next.js中如何在动态路由的数据驱动场景下获取参数并进行数据请求

知识考点

面试题答案