0 Fork 0

Files

T

KeyInfo Bot 104a4b101d Publish Next.js Agent Skills

Constraint: Upstream next-skills is a multi-skill collection under skills/*/SKILL.md.\nRejected: Copy upstream README badge/install docs | marketplace README stays install-focused and plugin content avoids nonessential images.\nConfidence: high\nScope-risk: moderate\nDirective: Use skill-collection with skillsPath for repositories organized as direct child skill directories.\nTested: python scripts/validate_marketplace.py; python /Users/eapil/.codex/skills/.system/plugin-creator/scripts/validate_plugin.py plugins/codex/plugins/next-skills; temp CODEX_HOME codex plugin marketplace add/list/add plus debug prompt-input.\nNot-tested: scripts/sync_external_plugins.ps1 execution because pwsh/powershell is not installed.

2026-06-15 16:30:27 +08:00

1.6 KiB

Raw Blame History

Async Patterns

In Next.js 15+, params, searchParams, cookies(), and headers() are asynchronous.

Async Params and SearchParams

Always type them as Promise<...> and await them.

Pages and Layouts

type Props = { params: Promise<{ slug: string }> }

export default async function Page({ params }: Props) {
  const { slug } = await params
}

Route Handlers

export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params
}

SearchParams

type Props = {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ query?: string }>
}

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

Synchronous Components

Use React.use() for non-async components:

import { use } from 'react'

type Props = { params: Promise<{ slug: string }> }

export default function Page({ params }: Props) {
  const { slug } = use(params)
}

generateMetadata

type Props = { params: Promise<{ slug: string }> }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  return { title: slug }
}

Async Cookies and Headers

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

export default async function Page() {
  const cookieStore = await cookies()
  const headersList = await headers()

  const theme = cookieStore.get('theme')
  const userAgent = headersList.get('user-agent')
}

Migration Codemod

npx @next/codemod@latest next-async-request-api .

1.6 KiB Raw Blame History