Next.js 14 App Router 完全指南
4 min read
#Next.js#React#App Router#SSR
Next.js 14 App Router 完全指南
Next.js 14 带来了革命性的 App Router，彻底改变了我们构建 React 应用的方式。让我们深入了解这些令人兴奋的新特性。
什么是 App Router？
App Router 是 Next.js 13 引入并在 14 中稳定的新路由系统，它基于 React Server Components 构建，提供了更好的性能和开发体验。
核心概念
文件系统路由
在 app 目录下，文件结构直接映射到 URL 路径：
app/
├── page.tsx # /
├── about/
│ └── page.tsx # /about
└── blog/
├── page.tsx # /blog
└── [slug]/
└── page.tsx # /blog/:slug
服务端组件 (RSC)
默认情况下，所有组件都是服务端组件：
// 这是一个服务端组件
export default function Page() {
return <div>Hello from Server!</div>
}
如果需要客户端交互，添加 "use client" 指令：
"use client"
import { useState } from "react"
export default function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
数据获取
服务端数据获取
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>{JSON.stringify(data)}</div>
}
并行数据获取
export default async function Page() {
// 这些请求会并行执行
const [user, posts] = await Promise.all([
fetch('https://api.example.com/user'),
fetch('https://api.example.com/posts')
])
}
流式渲染与 Suspense
利用 React 18 的 Suspense 实现流式渲染：
import { Suspense } from 'react'
export default function Page() {
return (
<div>
<h1>My Page</h1>
<Suspense fallback={<LoadingSkeleton />}>
<SlowComponent />
</Suspense>
</div>
)
}
路由组和布局
共享布局
// app/dashboard/layout.tsx
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div>
<nav>Dashboard Nav</nav>
{children}
</div>
)
}
路由组
使用 (folder) 语法组织路由而不影响 URL：
app/
├── (marketing)/
│ ├── about/page.tsx # /about
│ └── pricing/page.tsx # /pricing
└── (shop)/
├── products/page.tsx # /products
└── cart/page.tsx # /cart
性能优化
图片优化
import Image from 'next/image'
export default function Page() {
return (
<Image
src="/hero.jpg"
alt="Hero"
width={800}
height={600}
priority
/>
)
}
字体优化
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function RootLayout({ children }) {
return (
<html className={inter.className}>
<body>{children}</body>
</html>
)
}
最佳实践
- 尽可能使用服务端组件：减少客户端 JavaScript 体积
- 合理使用 Suspense：提升用户体验
- 善用缓存策略：Next.js 提供了强大的缓存机制
- 代码分割：利用动态导入减少初始加载
总结
Next.js 14 App Router 带来了前所未有的性能提升和开发体验。虽然学习曲线有些陡峭，但掌握之后你会发现它的强大之处。
开始你的 App Router 之旅吧！