面试题：Next.js中基于文件系统的页面路由解析 - 路径参数处理

Question

在Next.js基于文件系统的页面路由中，假设你有一个页面文件名为`pages/post/[id].js`，请阐述如何在页面组件中获取这个`id`参数的值，并举例说明如何利用该参数从后端获取特定文章的数据。

Answer 1

1. 获取 id 参数的值：
   • 在 Next.js 中，可以通过 getServerSideProps 或 useRouter 钩子来获取 id 参数的值。
   • 使用 getServerSideProps：

     import React from'react';
     import { GetServerSideProps } from 'next';
     
     const Post = ({ post }) => {
       return (
         <div>
           <h1>{post.title}</h1>
           <p>{post.content}</p>
         </div>
       );
     };
     
     export const getServerSideProps: GetServerSideProps = async (context) => {
       const { id } = context.query;
       // 这里的 id 是数组形式，通常取第一个值
       const postId = Array.isArray(id)? id[0] : id;
       // 从后端获取特定文章数据
       const res = await fetch(`https://api.example.com/posts/${postId}`);
       const post = await res.json();
     
       return {
         props: {
           post
         }
       };
     };
     
     export default Post;
     

   • 使用 useRouter 钩子（客户端渲染场景）：

     import React from'react';
     import { useRouter } from 'next/router';
     
     const Post = () => {
       const router = useRouter();
       const { id } = router.query;
       const postId = Array.isArray(id)? id[0] : id;
     
       return (
         <div>
           <p>文章 ID: {postId}</p>
         </div>
       );
     };
     
     export default Post;
     

2. 利用该参数从后端获取特定文章的数据：
   • 在 getServerSideProps 中： 如上述第一个代码示例，在 getServerSideProps 中，获取 id 参数后，使用 fetch 等方式向后端 API 发送请求。假设后端 API 地址为 https://api.example.com/posts/${postId}，将获取到的文章数据通过 props 传递给页面组件。
   • 在客户端（使用 useRouter）：

     import React, { useEffect, useState } from'react';
     import { useRouter } from 'next/router';
     
     const Post = () => {
       const router = useRouter();
       const { id } = router.query;
       const postId = Array.isArray(id)? id[0] : id;
       const [post, setPost] = useState(null);
     
       useEffect(() => {
         const fetchPost = async () => {
           const res = await fetch(`https://api.example.com/posts/${postId}`);
           const data = await res.json();
           setPost(data);
         };
         if (postId) {
           fetchPost();
         }
       }, [postId]);
     
       return (
         <div>
           {post && (
             <>
               <h1>{post.title}</h1>
               <p>{post.content}</p>
             </>
           )}
         </div>
       );
     };
     
     export default Post;
     

   这里在客户端通过 useEffect 钩子，当 postId 变化时，向后端 API 发送请求获取特定文章的数据，并更新组件状态显示文章内容。