← FC Coder · HomePhase 03 · Lesson 27 · 60 min
Lesson27
Phase Three · Fullstack · Matchday 27 · Folders Become URLs
路由 + 嵌套布局
文件就是 URL
Today's 3 Jobs · 今天这三件事
- 01给 /fantasy 加 layout.tsx 顶部导航包 children
- 02动态路由 /profile/[name]/page.tsx门牌号是变量
- 03🌟 导航点击跳转 · 嵌套 layout 看到<Link href=...>
App Router 心法:文件系统 = 路由。`app/about/page.tsx` → `/about` · `app/profile/[name]/page.tsx` → 动态。layout.tsx 包 children · 嵌套 layout 从外到内全部套上。比喻:宿舍门牌号 = 变量。
Concept · 文件 = 路由
文件夹起名就定了 URL
async function Profile({ params }) {
const { name } = await params;
return <h1>这是 {name} 的主页</h1>;
}
const { name } = await params;
return <h1>这是 {name} 的主页</h1>;
}
static
app/about/page.tsx → /about
nested
app/fantasy/layout.tsx 包 /fantasy/*
dynamic
app/profile/[name]/page.tsx → /profile/xxx
params Promise(Next 15+) · await 拿值。
Half 2 · 在屏幕上
Layout · 动态路由 · 嵌套 + AI
01Fantasy 加 layout
01Min
Cursor + pnpm dev
老三件套。
02Min
新建 app/fantasy/layout.tsx
export default function FantasyLayout({ children }) { return <div><nav>⚽ 我的梦幻足球</nav>{children}</div>; }。访问 /fantasy 看到顶部导航。
02动态路由 profile/[name]
03Min
新建 app/profile/[name]/page.tsx
async function Profile({ params }) { const { name } = await params; return <h1>这是 {name} 的主页</h1>; }
04Min
访问 /profile/haaland
看到 '这是 haaland 的主页'。同一文件 · 不同 URL。
05Min
访问 /profile/foden / /profile/anyone
同一页面 · name 变。这是动态路由。
03导航 + AI 写 leaderboard
06Min
fantasy/layout.tsx 加 <Link href='/profile/me'>
import Link from 'next/link'。点击不刷新页面(client-side nav)· 浏览器 console 看到 router 不重载。
07Min
AI Supervised:让 AI 加 /leaderboard 路由 (top 10)
Cmd+K · '加一个 /leaderboard server 组件 · 显示评分前 10'。爸爸陪坐 · 看每一行。
08Min
📸 截图
导航 + 动态路由两张。Phase 3 第二张战利品。
讲给爸爸听
4 题 · 路由 + Layout
01路由怎么定?Hint ↓
文件夹叫什么 URL 就长什么。0 配置。
02layout 和 page 差在哪?Hint ↓
layout 包 children · page 是终点。layout 每个子路由都套。
03动态路由 [name] 怎么读?Hint ↓
params 是 Promise · await 拿到 { name }。Next 15+ 新约定。
04嵌套 layout 顺序?Hint ↓
外层先 · 内层后。像衣服从内往外穿(根 → /fantasy → /fantasy/squad)。
温度计
给「文件 = URL」打分
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
文件夹起好名 · URL 自动有 —— 应用有结构了。
还有 8 步没打勾。Step 4-5 动态路由看到 = 算过。