面试题：Next.js 动态路由在用户个性化页面中的应用

创建页面组件：

在 pages 目录下创建 user 文件夹，然后在该文件夹中创建 [username].js 文件。这是 Next.js 中定义动态路由页面的方式。
在 [username].js 文件中，编写如下代码示例（以 React 函数式组件为例）：

import React from'react';
import { useRouter } from 'next/router';

const UserPage = () => {
  const router = useRouter();
  const { username } = router.query;
  return (
    <div>
      <h1>User: {username}</h1>
      {/* 这里后续可以添加从数据库获取数据后的展示逻辑 */}
    </div>
  );
};

export default UserPage;

获取动态参数并查询数据库：
- 前端部分：
  - 在上述 UserPage 组件中，通过 useRouter 钩子函数获取动态参数 username。const { username } = router.query; 这行代码从 router.query 对象中解构出 username 参数。
- 后端部分（假设使用 Node.js 和 MongoDB 为例）：
  - 可以创建一个 API 路由（在 Next.js 中，pages/api 目录下的文件会自动作为 API 路由），比如 pages/api/user/[username].js。
  - 在这个 API 路由文件中，使用数据库连接库（如 mongoose 连接 MongoDB），根据接收到的 username 参数查询数据库。示例代码如下：
```
import { connectToDatabase } from '../../../lib/mongodb';

export default async (req, res) => {
  const { username } = req.query;
  const { db } = await connectToDatabase();
  const user = await db.collection('users').findOne({ username });
  if (user) {
    res.status(200).json(user);
  } else {
    res.status(404).json({ message: 'User not found' });
  }
};
```
  - 上述代码中，connectToDatabase 是自定义的用于连接 MongoDB 的函数。通过 req.query.username 获取前端传递过来的 username 参数，然后在数据库的 users 集合中查询对应的用户数据，并将结果返回给前端。
- 在前端组件中调用 API 获取数据：
  - 在 UserPage 组件中，可以使用 useEffect 钩子函数来调用 API 获取用户数据。示例代码如下：
```
import React, { useEffect, useState } from'react';
import { useRouter } from 'next/router';

const UserPage = () => {
  const router = useRouter();
  const { username } = router.query;
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      const response = await fetch(`/api/user/${username}`);
      const data = await response.json();
      setUserData(data);
    };
    if (username) {
      fetchUserData();
    }
  }, [username]);

  return (
    <div>
      {userData? (
        <div>
          <h1>User: {username}</h1>
          {/* 展示用户数据 */}
          <p>{userData.bio}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default UserPage;
```
  - 上述代码通过 fetch 调用后端 API，获取用户数据并更新组件状态 userData，然后根据数据是否加载完成进行相应的展示。

星途面试题库

面试题：Next.js 动态路由在用户个性化页面中的应用

知识考点

面试题答案