面试题：Next.js动态路由参数复杂验证与数据预处理

Question

在Next.js应用中，有一个动态路由`pages/user/[username].js`，`username`不仅要验证其格式（例如必须是字母、数字、下划线组成，且长度在3到20之间），还要在使用前将其转换为小写。请详细说明实现步骤并给出关键代码示例，包括如何与Next.js的路由系统集成。

Answer 1

实现步骤

1. 验证用户名格式：使用正则表达式来验证用户名是否由字母、数字、下划线组成，且长度在3到20之间。
2. 转换用户名到小写：在验证通过后，将用户名转换为小写。
3. 与Next.js路由系统集成：在getStaticProps或getServerSideProps函数中获取动态路由参数，并进行验证和转换。

关键代码示例

1. 创建pages/user/[username].js文件：

import React from 'react';

const UserPage = ({ username }) => {
  return (
    <div>
      <h1>User: {username}</h1>
    </div>
  );
};

export async function getStaticProps({ params }) {
  const { username } = params;
  const regex = /^[a-zA-Z0-9_]{3,20}$/;
  if (!regex.test(username)) {
    // 处理错误，例如返回404页面
    return {
      notFound: true,
    };
  }
  const lowerCaseUsername = username.toLowerCase();
  return {
    props: {
      username: lowerCaseUsername,
    },
    revalidate: 60, // 可选，用于增量静态再生
  };
}

export async function getStaticPaths() {
  // 假设从数据库获取所有用户名，这里模拟
  const users = ['JohnDoe', 'JaneSmith'];
  const paths = users.map(username => ({
    params: { username },
  }));
  return { paths, fallback: false };
}

export default UserPage;

2. 另一种使用getServerSideProps的方式：

import React from 'react';

const UserPage = ({ username }) => {
  return (
    <div>
      <h1>User: {username}</h1>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const { username } = params;
  const regex = /^[a-zA-Z0-9_]{3,20}$/;
  if (!regex.test(username)) {
    // 处理错误，例如返回404页面
    return {
      notFound: true,
    };
  }
  const lowerCaseUsername = username.toLowerCase();
  return {
    props: {
      username: lowerCaseUsername,
    },
  };
}

export default UserPage;

在上述代码中，getStaticProps（或getServerSideProps）函数从动态路由参数中获取username，验证其格式，然后转换为小写，并将其作为属性传递给页面组件。getStaticPaths函数用于生成静态页面路径，这里只是简单模拟，实际应用中可能需要从数据库获取真实的用户名列表。如果用户名格式不符合要求，可以返回notFound: true来显示404页面。