// ❌ 不推荐
<img src="/logo.png" />
 
// ✅ 推荐 - 自动优化
import Image from 'next/image';
<Image src="/logo.png" width={200} height={100} alt="logo" />
 

// ❌ 不要用 <a>
<a href="/about">关于</a>
 
// ✅ 用 Link - 客户端路由
import Link from 'next/link';
<Link href="/about">关于</Link>
 

# .env.local
 
# 服务端可用（不会暴露给浏览器）
DATABASE_URL=xxx
API_SECRET=xxx
 
# 客户端可用（会暴露给浏览器）
NEXT_PUBLIC_API_URL=https://api.com
 

// 默认缓存（生产环境）
fetch('https://api.com/data')
 
// 不缓存，每次请求
fetch('https://api.com/data', { cache: 'no-store' })
 
// 缓存 60 秒
fetch('https://api.com/data', { next: { revalidate: 60 } })
 

// ❌ 服务端组件不能用
localStorage
sessionStorage
window
document
useEffect, useState, useRouter...
 
// ✅ 只能在客户端组件用
'use client'
 

// ✅ page.tsx - 服务端
export const metadata = {
  title: '商品列表',
  description: '...'
}
 
// ❌ 客户端组件不能用 metadata
'use client'
export const metadata = { ... }  // 报错
 

[id]        → 必填参数  /goods/123
[...slug]   → 捕获所有  /blog/a/b/c
[[...slug]] → 可选捕获  /blog 或 /blog/a/b
 

app/
  └── goods/
      ├── page.tsx       # 页面
      ├── loading.tsx    # 加载状态（自动）
      └── error.tsx      # 错误处理（自动）
// loading.tsx
export default function Loading() {
    return <div>加载中...</div>
}
 
// error.tsx
'use client'
export default function Error({ error, reset }) {
    return <button onClick={reset}>重试</button>
}
 

import { redirect, notFound } from 'next/navigation';
 
export default async function Page({ params }) {
    const { id } = await params;
    
    if (id === '0') {
        redirect('/');  // 重定向
    }
    
    const data = await fetchData(id);
    if (!data) {
        notFound();  // 显示 404
    }
    
    return <div>{data.name}</div>
}
 

// app/api/xxx/route.ts
import { NextResponse } from 'next/server';
 
export async function GET() {
    return NextResponse.json({ data: [] });  // ✅
    // return Response.json({ data: [] });   // ✅ 也可以
}
 

// ❌ 不能直接导入
'use client'
import ServerComponent from './server';  // 报错
 
// ✅ 可以通过 children 传递
'use client'
export default function Client({ children }) {
    return <div>{children}</div>
}
 
// page.tsx
<Client>
    <ServerComponent />  // ✅ 正确
</Client>