清风自叙小筑

Appearance

Next.js App Router ​

基于文件系统的路由，app/ 目录下的文件自动映射为 URL 路径。

页面路由 ​

app/
  page.tsx          → /
  about/page.tsx    → /about
  blog/test/page.tsx→ /blog/test

layout vs template ​

layouttemplate
状态切换页面时保持状态每次重新渲染
场景导航栏、侧边栏页面切换动画、重置状态

渲染顺序 ​

layout → template → page

示例 ​

tsx
// app/layout.tsx — 根布局（必须存在）
export default function RootLayout({ children }) {
  return (
    <html lang="zh">
      <body>
        <nav>导航栏</nav>
        {children}
      </body>
    </html>
  )
}

// app/template.tsx — 模板（页面切换时重新挂载）
export default function Template({ children }) {
  return <div className="animate-fade-in">{children}</div>
}

// app/page.tsx — 首页
export default function Home() {
  return <h1>首页</h1>
}

嵌套布局 ​

tsx
// app/blog/layout.tsx → /blog/* 所有页面共享
export default function BlogLayout({ children }) {
  return <div><aside>博客侧边栏</aside>{children}</div>
}

关键规则 ​

规则说明
根布局必须app/layout.tsx 必须包含 <html> 和 <body>
layout 保持状态导航时不会卸载，只更新 children
每级目录可有一个 layout自动嵌套