Next.js 核心概念及应用

🧩 一、动态路由（Dynamic Routing）

作用：根据 URL 参数动态生成页面，避免硬编码路径。
实现方式：

1. 基础动态路由
   • 文件命名：app/blog/[slug]/page.js

   • 获取参数：
   export default function Page({ params }) {
   return

   {params.slug}

   ; // /blog/hello → slug=“hello”
   }

2. 嵌套动态路由
   • 结构：app/shop/[category]/[product]/page.js

   • 匹配路径：/shop/electronics/phone → params = { category: ‘electronics’, product: ‘phone’ }

3. Catch-All 路由
   • 文件命名：app/docs/[…slug]/page.js

   • 匹配路径：/docs/a/b/c → slug = [‘a’, ‘b’, ‘c’]

数据预取优化：
• SSG 场景：getStaticPaths + getStaticProps 预生成页面

• ISR 场景：revalidate 参数控制增量更新频率：
export async function getStaticProps() {
return { props: {}, revalidate: 60 }; // 60秒更新
}

🗂️ 二、路由组（Route Groups）

作用：逻辑分组页面文件，不影响 URL 路径。
实现方式：
• 文件夹命名：(marketing)/about/page.js → URL 仍为 /about

• 典型应用：

• 按功能分组：(auth)/login/page.js、(dashboard)/users/page.js

• 多布局管理：为不同组分配独立布局：
// (shop)/layout.js
export default function ShopLayout({ children }) {
return

{children}

;
}

注意：避免不同组的路由解析到相同路径（如 (a)/about 和 (b)/about 冲突）。

⚡ 三、并行路由（Parallel Routing）

作用：同一 URL 下同时渲染多个独立内容区块（如仪表盘多视图）。
实现方式：

1. 命名插槽：创建 @analytics、@team 文件夹
2. 布局集成：
   export default function Layout({ children, analytics, team }) {
   return (
   <>
   {children}
   
   
   {analytics} // 来自 @analytics 插槽
   {team} // 来自 @team 插槽
   
   
   </>
   );
   }

典型场景：
• 模态框与主页面共存（如 /login 弹出登录框而不离开当前页）

• 多视图仪表盘（数据面板+用户列表）

🛡️ 四、拦截路由（Intercepting Routes）

作用：拦截导航请求，在当前上下文局部加载目标页面（如弹窗形式）。
实现方案：

1. 文件结构：
   ├─ @modal
   │ └─ (.)login // 拦截规则：(.)表示同级
   └─ login
   └─ page.js // 完整页面

2. 触发方式：

   登录

   点击后以模态框形式加载登录页，URL 变为 /login?modal=true 。

🧪 五、假数据（Mocking）集成方案

推荐工具：Mock.js + 环境变量控制
实现步骤：

1. 安装依赖：npm install mockjs

2. 配置开关：

   .env.local

   NEXT_PUBLIC_MOCK=true

3. 动态加载 Mock：
   ‘use client’;
   import { useEffect } from ‘react’;
   export default function MockLoader() {
   useEffect(() => {
   if (process.env.NEXT_PUBLIC_MOCK === ‘true’) {
   require(‘@/mock’); // 导入 mock 定义
   }
   }, []);
   return null;
   }

4. 在根布局中引入：

   {children}

🔁 六、客户端 vs 服务端组件

特性 服务端组件 客户端组件

数据获取 直接访问数据库/API（无 CORS） useEffect + fetch

交互性 无 Hooks/事件 支持 useState、onClick

包体积 0KB（不包含在客户端 bundle） 包含所有依赖

声明方式 默认 文件顶部添加 ‘use client’

混合使用示例：
// 服务端组件（直接读 DB）
async function ServerComponent() {
const data = await db.query(‘SELECT * FROM products’);
return ;
}

// 客户端组件（处理交互）
‘use client’;
function ClientComponent({ products }) {
const [cart, setCart] = useState([]);
return products.map(p => (
<button onClick={() => addToCart§}>Add
));
}

📝 七、Server Actions 与表单提交

Server Actions 优势：
• 在服务端执行敏感操作（如数据库写入）

• 避免暴露 API 端点

• 支持渐进式增强（JS 禁用时仍可用）

表单提交示例：
// 服务端 Action（app/actions.js）
‘use server’;
export async function createPost(formData) {
const title = formData.get(‘title’);
await db.post.create({ data: { title } });
redirect(‘/posts’); // 提交后跳转
}

// 客户端表单
‘use client’;
import { createPost } from ‘@/actions’;
export default function Form() {
return (


提交

);
}

关键优化：
• 使用 useFormStatus 显示加载状态

• useOptimistic 提前更新 UI 增强用户体验

💎 总结：Next.js 全栈能力矩阵

功能 适用场景 性能影响 实现复杂度

动态路由 博客详情页、商品页 ⭐⭐ (SSG 缓存优化) ⭐⭐

路由组 大型项目模块化 ⭐ (组织开销) ⭐

并行路由 多视图仪表盘 ⭐⭐⭐ (并行加载) ⭐⭐⭐⭐

Server Actions 表单提交、数据变更 ⭐⭐⭐ (直连数据库) ⭐⭐

服务端组件 首屏渲染、SEO 关键内容 ⭐⭐⭐ (0KB 体积) ⭐