Next.js 核心概念及应用
<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path>
</svg>
<p>🧩 一、动态路由（Dynamic Routing）</p>
<p>作用：根据 URL 参数动态生成页面，避免硬编码路径。<br>
实现方式：</p>
<ol><li>
<p>基础动态路由<br>
• 文件命名：app/blog//page.js</p>
<p>• 获取参数：<br>
export default function Page({ params }) {<br>
return </p><h2>{params.slug}</h2>; // /blog/hello → slug=“hello”<br>
}<p></p>
</li><li>
<p>嵌套动态路由<br>
• 结构：app/shop///page.js</p>
<p>• 匹配路径：/shop/electronics/phone → params = { category: ‘electronics’, product: ‘phone’ }</p>
</li><li>
<p>Catch-All 路由<br>
• 文件命名：app/docs/[…slug]/page.js</p>
<p>• 匹配路径：/docs/a/b/c → slug = [‘a’, ‘b’, ‘c’]</p>
</li></ol>
<p>数据预取优化：<br>
• SSG 场景：getStaticPaths + getStaticProps 预生成页面</p>
<p>• ISR 场景：revalidate 参数控制增量更新频率：<br>
export async function getStaticProps() {<br>
return { props: {}, revalidate: 60 }; // 60秒更新<br>
}</p>
<p>🗂️ 二、路由组（Route Groups）</p>
<p>作用：逻辑分组页面文件，不影响 URL 路径。<br>
实现方式：<br>
• 文件夹命名：(marketing)/about/page.js → URL 仍为 /about</p>
<p>• 典型应用：</p>
<p>• 按功能分组：(auth)/login/page.js、(dashboard)/users/page.js</p>
<p>• 多布局管理：为不同组分配独立布局：<br>
// (shop)/layout.js<br>
export default function ShopLayout({ children }) {<br>
return </p><div>{children}</div>;<br>
}<p></p>
<p>注意：避免不同组的路由解析到相同路径（如 (a)/about 和 (b)/about 冲突）。</p>
<p>⚡ 三、并行路由（Parallel Routing）</p>
<p>作用：同一 URL 下同时渲染多个独立内容区块（如仪表盘多视图）。<br>
实现方式：</p>
<ol><li>命名插槽：创建 @analytics、@team 文件夹</li><li>布局集成：<br>
export default function Layout({ children, analytics, team }) {<br>
return (<br>
<><br>
{children}<br>
<div><br>
{analytics}// 来自 @analytics 插槽<br>
{team} // 来自 @team 插槽<br>
</div><br>
</><br>
);<br>
}</li></ol>
<p>典型场景：<br>
• 模态框与主页面共存（如 /login 弹出登录框而不离开当前页）</p>
<p>• 多视图仪表盘（数据面板+用户列表）</p>
<p>🛡️ 四、拦截路由（Intercepting Routes）</p>
<p>作用：拦截导航请求，在当前上下文局部加载目标页面（如弹窗形式）。<br>
实现方案：</p>
<ol><li>
<p>文件结构：<br>
├─ @modal<br>
│ └─ (.)login // 拦截规则：(.)表示同级<br>
└─ login<br>
└─ page.js // 完整页面</p>
</li><li>
<p>触发方式：</p>
登录
<p>点击后以模态框形式加载登录页，URL 变为 /login?modal=true 。</p>
</li></ol>
<p>🧪 五、假数据（Mocking）集成方案</p>
<p>推荐工具：Mock.js + 环境变量控制<br>
实现步骤：</p>
<ol><li>
<p>安装依赖：npm install mockjs</p>
</li><li>
<p>配置开关：</p>
<h2>.env.local</h2>
<p>NEXT_PUBLIC_MOCK=true</p>
</li><li>
<p>动态加载 Mock：<br>
‘use client’;<br>
import { useEffect } from ‘react’;<br>
export default function MockLoader() {<br>
useEffect(() => {<br>
if (process.env.NEXT_PUBLIC_MOCK === ‘true’) {<br>
require(‘@/mock’); // 导入 mock 定义<br>
}<br>
}, []);<br>
return null;<br>
}</p>
</li><li>
<p>在根布局中引入：</p>
{children}
</li></ol>
<p>🔁 六、客户端 vs 服务端组件</p>
<p>特性 服务端组件 客户端组件</p>
<p>数据获取 直接访问数据库/API（无 CORS） useEffect + fetch</p>
<p>交互性 无 Hooks/事件 支持 useState、onClick</p>
<p>包体积 0KB（不包含在客户端 bundle） 包含所有依赖</p>
<p>声明方式 默认 文件顶部添加 ‘use client’</p>
<p>混合使用示例：<br>
// 服务端组件（直接读 DB）<br>
async function ServerComponent() {<br>
const data = await db.query(‘SELECT * FROM products’);<br>
return ;<br>
}</p>
<p>// 客户端组件（处理交互）<br>
‘use client’;<br>
function ClientComponent({ products }) {<br>
const = useState([]);<br>
return products.map(p => (<br>
<button onClick={() => addToCart§}>Add<br>
));<br>
}</p>
<p>📝 七、Server Actions 与表单提交</p>
<p>Server Actions 优势：<br>
• 在服务端执行敏感操作（如数据库写入）</p>
<p>• 避免暴露 API 端点</p>
<p>• 支持渐进式增强（JS 禁用时仍可用）</p>
<p>表单提交示例：<br>
// 服务端 Action（app/actions.js）<br>
‘use server’;<br>
export async function createPost(formData) {<br>
const title = formData.get(‘title’);<br>
await db.post.create({ data: { title } });<br>
redirect(‘/posts’); // 提交后跳转<br>
}</p>
<p>// 客户端表单<br>
‘use client’;<br>
import { createPost } from ‘@/actions’;<br>
export default function Form() {<br>
return (<br>
<br>
<br>
提交<br>
<br>
);<br>
}</p>
<p>关键优化：<br>
• 使用 useFormStatus 显示加载状态</p>
<p>• useOptimistic 提前更新 UI 增强用户体验</p>
<p>💎 总结：Next.js 全栈能力矩阵</p>
<p>功能 适用场景 性能影响 实现复杂度</p>
<p>动态路由 博客详情页、商品页 ⭐⭐ (SSG 缓存优化) ⭐⭐</p>
<p>路由组 大型项目模块化 ⭐ (组织开销) ⭐</p>
<p>并行路由 多视图仪表盘 ⭐⭐⭐ (并行加载) ⭐⭐⭐⭐</p>
<p>Server Actions 表单提交、数据变更 ⭐⭐⭐ (直连数据库) ⭐⭐</p>
<p>服务端组件 首屏渲染、SEO 关键内容 ⭐⭐⭐ (0KB 体积) ⭐</p><br><br>
来源：https://www.cnblogs.com/xingluke/p/19075854
頁:
[1]