Next.js 开发指南 路由篇 | 动态路由、路由组、平行路由和拦截路由

Next.js 开发指南 - 冴羽 - 掘金小册

前言

实际项目开发的时候，有的路由场景会比较复杂，比如数据库里的文章有很多，我们不可能一一去定义路由，此时该怎么办？组织代码的时候，有的路由是用于移动端，有的路由是用于 PC 端，该如何组织？如何有条件的渲染页面，比如未授权的时候显示登录框？如何让同一个路由根据情况不同展示不同的内容？

本篇我们会一一解决这些问题，在此篇，你将会感受到 App Router 强大的路由功能。

1. 动态路由（Dynamic Routes）

有的时候，你并不能提前知道路由的地址，就比如根据 URL 中的 id 参数展示该 id 对应的文章内容，文章那么多，我们不可能一一定义路由，这个时候就需要用到动态路由。

1.1. [folderName]

使用动态路由，你需要将文件夹的名字用方括号括住，比如 [id]、[slug]。这个路由的名字会作为 paramprop 传给布局（layout）、 页面（page）、 路由处理程序（route）以及 generateMetadata（用于生成页面元数据） 函数。

举个例子，我们在 app/blog&