问题： **Next.js中如何实现动态路由和嵌套路由？**

Question

在使用 Next.js 开发应用时，动态路由和嵌套路由是构建复杂页面结构的重要功能。那么，如何在 Next.js 中实现动态路由与嵌套路由？动态路由通过文件名中使用方括号 `[param]` 的方式实现，可以捕获路径片段并作为组件的 props 传入；而嵌套路由则通过文件夹结构组织页面路径，结合 `useRouter` 或 `next/link` 进行导航与参数获取。理解这两者的实现机制，有助于开发者构建灵活、可维护的路由系统。本文将围绕这一主题，深入探讨其原理与实际应用方式。

Answer 1

一、Next.js 中的路由机制概述

Next.js 作为 React 的服务端渲染框架，其路由系统基于文件结构，开发者无需手动配置路由表。Next.js 的路由机制分为静态路由、动态路由和嵌套路由。理解这些机制对于构建复杂、可维护的 Web 应用至关重要。

• 静态路由：基于文件路径直接映射页面
• 动态路由：通过 [param] 文件名实现路径参数捕获
• 嵌套路由：通过文件夹结构组织页面层级

二、动态路由的实现方式

Next.js 的动态路由功能允许开发者创建可变路径的页面，适用于博客、用户详情等场景。其核心在于使用方括号 [param] 来定义参数。

1. 基础用法

例如，在 pages/posts/[id].js 文件中，访问 /posts/123 时，id 参数将作为 props 传入页面组件。

function Post({ id }) {
  return 
Post ID: {id}
;
}

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

export default Post;

2. 多参数动态路由

可以使用多个方括号定义多个参数，如 [id]/[commentId].js，对应路径为 /posts/123/comments/456。

3. 捕获所有路径参数（Catch-all 路由）

使用 [...params].js 可以捕获任意层级的路径片段，适用于 404 页面或深层结构页面。

三、嵌套路由的实现方式

Next.js 的嵌套路由通过文件夹结构实现页面层级，提升项目的组织结构清晰度。

1. 基本嵌套结构

例如，pages/dashboard/settings/index.js 对应路径 /dashboard/settings。

文件路径	访问路径
pages/index.js	/
pages/dashboard/index.js	/dashboard
pages/dashboard/settings.js	/dashboard/settings

2. 嵌套动态路由

结合动态路由与嵌套结构，可以构建如 /user/[id]/profile 的路径结构。

四、动态与嵌套路由的结合应用

在实际项目中，动态路由和嵌套路由常常结合使用，以实现复杂的页面结构。

1. 示例：用户中心页面结构

pages/
├── users/
│   ├── [id]/
│   │   ├── index.js         → /users/[id]
│   │   └── settings.js     → /users/[id]/settings
│   └── index.js             → /users

2. 使用 useRouter 获取参数

在组件中使用 useRouter 可以获取当前路径参数：

import { useRouter } from 'next/router';

function UserProfile() {
  const router = useRouter();
  const { id } = router.query;

  return 
User ID: {id}
;
}

export default UserProfile;

五、高级技巧与注意事项

1. 动态导入与路由懒加载

使用 dynamic 模块可以实现组件的懒加载，提高性能。

import dynamic from 'next/dynamic';

const LazyComponent = dynamic(() => import('../components/Lazy'));

export default function Page() {
  return ;
}

2. 预加载路由

通过 next/link 组件的 prefetch 属性，可以在用户悬停链接时预加载目标页面。

import Link from 'next/link';

<link href="/dashboard" />Dashboard

3. 自定义 404 页面

创建 pages/404.js 文件可自定义 404 页面。

六、流程图：Next.js 路由解析过程

graph TD
    A[请求路径] --> B{路径是否存在静态页面}
    B -- 是 --> C[渲染静态页面]
    B -- 否 --> D{是否匹配动态路由}
    D -- 是 --> E[执行 getServerSideProps 获取参数]
    D -- 否 --> F[返回 404 页面]
    E --> G[渲染动态页面]