SuperAPI AI 工具集

nextjs-app-router

前端与建站

查看项目

更新于 10-15 20:10

技能介绍

用途:这是一份 Next.js 15 App Router 的实践模式参考,用于在 App Router 项目中组织页面、数据获取与交互逻辑。

主要能力:区分 Server Components(默认,无需指令)与 Client Components(需要 'use client',用于事件处理、浏览器 API、React hooks 和第三方客户端库);说明 Next.js 15 中 params 与 searchParams 为 Promise,必须 await,且 generateMetadata 同样使用异步 params;给出路由文件约定(layout.tsx、page.tsx、loading.tsx、error.tsx、not-found.tsx、route.ts 等);覆盖布局与嵌套布局、Server Actions('use server'、revalidatePath、revalidateTag、redirect)、Route Handlers(NextRequest、NextResponse)以及数据获取策略(next.revalidate、cache: 'no-store'、tags)与 generateStaticParams 静态生成。

必要用法:页面与布局中需按 Next.js 15 写法 await params;Server Action 在 Client Component 中通过 form action 调用;Route Handler 用 export async function GET/POST 定义。

限制与注意:文档明确列出反模式,如不 await params、在 Client Component 中做本可由 Server Component 完成的请求、整页滥用 'use client'、把 Server Component 导入 Client Component 等。更多高级组合与缓存策略见其 PATTERNS.md、DATA-FETCHING.md。