agentmentoragentmentor

第 03 节:文件夹就是路线:页面、布局、导航

本节 objectives:

  • 能用 app/ 目录创建 /about 这样的页面。
  • 能解释 layout.tsx 和 page.tsx 的区别。
  • 能用 Link 做站内导航,而不是普通刷新式跳转。

先修:会写简单组件和 JSX ｜ 上一节 << 02 ｜ 下一节 04 >>

你不是先写路由表,而是先放对文件

很多框架会让你先配置一张「地址到组件」的表。Next.js App Router 的新手体验更具体:你在 app/ 下放一个文件夹,里面放 page.tsx,它就成为一个 URL 路径。官方文档把这种方式称为通过文件夹定义路由段,并用 page 文件让该路由可公开访问1。

这一节你要把网站从一个首页扩成三个页面:首页、关于页、学习计划页。重点不是页面内容,而是路由的空间感。

讲解

page.tsx 是这一条路线的可见内容。
app/page.tsx 对应 /。app/about/page.tsx 对应 /about。app/plan/page.tsx 对应 /plan。没有 page.tsx 的文件夹可以参与组织,但不会单独成为可访问页面1。

layout.tsx 是共享外壳。
app/layout.tsx 会包住它下面的页面。你可以把全站导航、共同字体、外层 <html> 和 <body> 放在这里1。页面内容变,布局外壳保留。

站内导航优先用 Link。
Next.js 提供 next/link,用于客户端导航和预取等体验优化2。初学阶段只要记住:站内页面之间跳转,先用 <Link href="/about">关于</Link>;外部网站链接才常用普通 <a>。

跟我做一遍(worked example)

目标:新增 /about,并把导航放进根布局。

  1. 创建 app/about/page.tsx:
tsx
export default function AboutPage() {  return (    <main>      <h1>关于这个学习站</h1>      <p>这里记录我学习 Next.js 的路线和作品。</p>    </main>  );}
  1. 修改 app/layout.tsx,加入导航。保留项目里已有的 metadata 或字体导入也可以,这里展示最小结构:
tsx
import Link from "next/link";import "./globals.css";
export default function RootLayout({  children,}: {  children: React.ReactNode;}) {  return (    <html lang="zh-CN">      <body>        <header>          <nav>            <Link href="/">首页</Link>            <Link href="/about">关于</Link>          </nav>        </header>        {children}      </body>    </html>  );}

为什么这样写:

  • children 是当前页面会被放进去的位置。
  • header 和 nav 属于全站外壳,所以放在 layout。
  • Link 的 href 指向站内路径。

换你补全(faded example)

请新增一个 /plan 页面,并把导航补上。下面留了三个空。

tsx
// app/plan/page.tsxexport default function ______() {  return (    <main>      <h1>学习计划</h1>      <p>每天只推进一个小概念。</p>    </main>  );}
tsx
// app/layout.tsx 里的 nav<nav>  <Link href="/">首页</Link>  <Link href="/about">关于</Link>  <Link href="______">学习计划</Link></nav>

参考答案:

tsx
export default function PlanPage() {  return (    <main>      <h1>学习计划</h1>      <p>每天只推进一个小概念。</p>    </main>  );}
tsx
<Link href="/plan">学习计划</Link>

关键判断点:文件夹名 plan 决定路径 /plan,组件名可以叫 PlanPage,但 URL 不由组件名决定。

小结 + 通向下一节

你已经能把站点拆成多条路线,并用 layout 放共享导航。下一节开始让页面由数据生成,否则每多一张卡片都手写 JSX,很快就会乱。

Footnotes

  1. Next.js Layouts and Pages — https://nextjs.org/docs/app/getting-started/layouts-and-pages ↩ ↩2 ↩3

  2. Next.js Linking and Navigating — https://nextjs.org/docs/app/getting-started/linking-and-navigating ↩

练习

Level 1:做一张路由表。
做法:在纸上写三列:文件路径、URL、页面用途。填入 /、/about、/plan。

提示 1

先去掉 app/ 和最后的 page.tsx。

提示 2

剩下的文件夹名就是路径段。 Level 2:加一个作品页。
做法:创建 app/projects/page.tsx,页面里列出两个你想做的小作品。把导航也加上。

自评