Next.js 15新特性完全指南：升级须知与核心变化解析

import { useActionState } from 'react'

async function submitForm(prevState, formData) {
  // 表单提交逻辑
  const result = await fetch('/api/submit', {
    body: formData
  })
  return result.json()
}

export default function Form() {
  const [state, submitAction, isPending] = useActionState(submitForm, null)

  return (
    <form action={submitAction}>
      {/* 表单字段 */}
      <button type="submit" disabled={isPending}>
        {isPending ? '提交中...' : '提交'}
      </button>
    </form>
  )
}

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending, data, method, action } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? '提交中...' : '提交'}
    </button>
  )
}

import { cookies } from 'next/headers'

// Next.js 14（同步）
const cookieStore = cookies()
const token = cookieStore.get('token')

// Next.js 15（异步）
const cookieStore = await cookies()
const token = cookieStore.get('token')

import { cookies, type UnsafeUnwrappedCookies } from 'next/headers'

// 临时同步用法（不推荐，仅作过渡）
const cookieStore = cookies() as unknown as UnsafeUnwrappedCookies
// 开发模式下会收到警告
const token = cookieStore.get('token')

import { headers } from 'next/headers'

// Next.js 14（同步）
const headersList = headers()
const userAgent = headersList.get('user-agent')

// Next.js 15（异步）
const headersList = await headers()
const userAgent = headersList.get('user-agent')

import { draftMode } from 'next/headers'

// Next.js 14（同步）
const { isEnabled } = draftMode()

// Next.js 15（异步）
const { isEnabled } = await draftMode()

// Next.js 14
type Params = { slug: string }
type SearchParams = { [key: string]: string | string[] | undefined }

export default async function Page({
  params,
  searchParams,
}: {
  params: Params
  searchParams: SearchParams
}) {
  const { slug } = params
  const { query } = searchParams
}

// Next.js 15
type Params = Promise<{ slug: string }>
type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>

export default async function Page(props: {
  params: Params
  searchParams: SearchParams
}) {
  const params = await props.params
  const searchParams = await props.searchParams
  const { slug } = params
  const { query } = searchParams
}

import { use } from 'react'

type Params = Promise<{ slug: string }>

export default function Layout(props: {
  children: React.ReactNode
  params: Params
}) {
  const params = use(props.params)
  const { slug } = params

  return <div>{slug}</div>
}

// Next.js 14
type Params = { slug: string }
export async function GET(request: Request, segmentData: { params: Params }) {
  const params = segmentData.params
}

// Next.js 15
type Params = Promise<{ slug: string }>
export async function GET(request: Request, segmentData: { params: Params }) {
  const params = await segmentData.params
}