> ## Documentation Index
> Fetch the complete documentation index at: https://base.bangwu.me/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Next.js is a React full-stack framework by Vercel with SSR, SSG, and API Routes, covering project setup, file-system routing, and data fetching.
## Next.js
Next.js is one of the most popular React frameworks in recent years, developed and maintained by Vercel.
### Core Features
* **Hybrid rendering**: supports SSR, SSG, and ISR
* **File-based routing**: automatic routing built on the file system
* **API Routes**: built-in API endpoints
* **Performance optimizations**: automatic code splitting and image optimization
* **TypeScript**: first-class TypeScript support
* **Zero config**: sensible defaults out of the box
### Quick Start
```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
# 创建新项目
npx create-next-app@latest my-app
cd my-app
# 启动开发服务器
npm run dev
# Visit http://localhost:3000
```
### Project structure
```
my-app/
├── app/ # App Router（推荐）
│ ├── layout.tsx # 根布局
│ ├── page.tsx # Home
│ └── api/ # API 路由
├── public/ # 静态资源
├── components/ # Component
├── lib/ # Tool函数
└── next.config.js # Next.js Configuration
```
### App Router（Next.js 13+）
#### Pages & Layouts
```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
// app/page.tsx - Home
export default function Home() {
return Welcome to Next.js
}
// app/layout.tsx - 根布局
export default function RootLayout({ children }) {
return (
{children}
)
}
// app/about/page.tsx - /about 路由
export default function About() {
return About Page
}
```
#### Dynamic Routes
```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
// app/blog/[slug]/page.tsx
export default function BlogPost({ params }) {
return Post: {params.slug}
}
// app/shop/[...slug]/page.tsx - 捕获所有路由
export default function Shop({ params }) {
return {params.slug.join('/')}
}
```
#### Data Fetching
```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Server Components (Default)（默认）
async function getData() {
const res = await fetch('https://api.example.com/data', {
cache: 'force-cache', // Caching
// next: { revalidate: 3600 } // ISR - 每小时重新Validation
})
return res.json()
}
export default async function Page() {
const data = await getData()
return {data.title}
}
```
#### Client Components
```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
'use client' // 必须in顶部Declaration
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
setCount(count + 1)}>
Count: {count}
)
}
```
#### Loading and error UI
```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
// app/loading.tsx - loading states
export default function Loading() {
return Loading...
}
// app/error.tsx - error handling
'use client'
export default function Error({ error, reset }) {
return (
Something went wrong!
reset()}>Try again
)
}
```
### API Routes
```typescript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// app/api/hello/route.ts
import { NextResponse } from 'next/server'
export async function GET(request: Request) {
return NextResponse.json({ message: 'Hello World' })
}
export async function POST(request: Request) {
const body = await request.json()
return NextResponse.json({ data: body })
}
```
### Middleware
```typescript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
// authentication检查
const token = request.cookies.get('token')
if (!token) {
return NextResponse.redirect(new URL('/login', request.url))
}
return NextResponse.next()
}
export const config = {
matcher: '/dashboard/:path*',
}
```
### Image Optimization
```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import Image from 'next/image'
export default function Avatar() {
return (