Next.js App Router 入门指南

Next.js 14 引入了全新的 App Router，基于 React 的最新特性构建。让我们来深入了解。

什么是 App Router？

App Router 是 Next.js 13 引入的新路由系统，建立在 React Server Components 之上。

主要特性

• React Server Components - 在服务器上渲染组件
• 嵌套布局 - 更灵活的页面结构
• 数据加载 - 简化的数据获取方式
• 流式渲染 - 更快的页面加载

目录结构

app/
├── layout.tsx
├── page.tsx
├── about/
│   └── page.tsx
└── blog/
    ├── page.tsx
    └── [slug]/
        └── page.tsx

创建你的第一个页面

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Hello, Next.js!</h1>
    </main>
  )
}

数据获取

async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function Page() {
  const data = await getData()
  return <div>{data.title}</div>
}

App Router 让构建现代 Web 应用变得更加简单和高效！