Next.js App Router开发避坑指南 常见错误与最佳实践

// 错误：在服务端组件中调用自己的API路由
export default async function Page() {
  // 这种方式需要创建多余的API路由，且API地址硬编码
  const data = await fetch('http://localhost:3000/api/posts').then(res => res.json())

  return (
    <ul>
      {data?.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

// 正确：直接在服务端组件中获取数据
export default async function Page() {
  // 直接调用外部API，代码更简洁，性能更好
  const data = await fetch('https://api.example.com/posts', {
    // Next.js会自动缓存fetch请求
    next: { revalidate: 3600 }
  }).then(res => res.json())

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

// app/api/time/route.js
export async function GET() {
  console.log('API被调用')
  // 生产环境下会被静态缓存，时间永远不会变
  return Response.json({ time: new Date().toLocaleTimeString() })
}

// 方法一：使用cookies或headers
export async function GET(request) {
  const token = request.cookies.get('token')
  return Response.json({ time: new Date().toLocaleTimeString() })
}

// 方法二：添加非GET方法
export async function GET() {
  return Response.json({ time: new Date().toLocaleTimeString() })
}

export async function POST() {
  return Response.json({ time: new Date().toLocaleTimeString() })
}

// 方法三：使用dynamic函数
export const dynamic = 'force-dynamic'

export async function GET() {
  return Response.json({ time: new Date().toLocaleTimeString() })
}

'use client'

import { useState } from 'react'

export default function PostsPage() {
  const [posts, setPosts] = useState([])

  return (
    <>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={async () => {
        // 错误：调用自己创建的API路由
        const res = await fetch('/api/posts')
        const data = await res.json()
        setPosts(data)
      }}>
        获取文章
      </button>
    </>
  )
}

'use client'

import { useState } from 'react'

export default function PostsPage() {
  const [posts, setPosts] = useState([])

  return (
    <>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={async () => {
        // 正确：直接调用外部API
        const res = await fetch('https://api.example.com/posts')
        const data = await res.json()
        setPosts(data)
      }}>
        获取文章
      </button>
    </>
  )
}

import { Suspense } from 'react'

async function Posts() {
  const data = await fetchPosts() // 模拟2秒延迟
  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export default async function Page() {
  return (
    <div>
      <h1>文章列表</h1>
      {/* 错误：Suspense放在异步组件内部 */}
      <Suspense fallback={<div>加载中...</div>}>
        <Posts />
      </Suspense>
    </div>
  )
}

import { Suspense } from 'react'

async function Posts() {
  const data = await fetchPosts()
  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export default function Page() {
  return (
    <div>
      <h1>文章列表</h1>
      {/* 正确：Suspense在父组件中包裹异步子组件 */}
      <Suspense fallback={<div>加载中...</div>}>
        <Posts />
      </Suspense>
    </div>
  )
}

'use client'

import { createContext, useContext, useState } from 'react'

const ThemeContext = createContext('light')

function ThemeButton() {
  const theme = useContext(ThemeContext)
  return <button>主题: {theme}</button>
}

// 错误：整个页面变成客户端组件
export default function Page() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeButton />
    </ThemeContext.Provider>
  )
}

// app/theme-provider.js
'use client'

import { createContext, useContext, useState } from 'react'

const ThemeContext = createContext()

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light')

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

export function useTheme() {
  return useContext(ThemeContext)
}

// app/layout.js
import { ThemeProvider } from './theme-provider'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}