Communitygithub.com

Next.js App Router 模式指南

适用于 Next.js 14+ App Router 架构、服务端组件及现代全栈 React 开发的全面模式指南。

Next.js App Router 模式指南 是什么?

该技能为使用 Next.js 14+ App Router 的开发者提供了权威的模式和最佳实践指南,涵盖服务端组件、流式渲染、并行路由、拦截路由以及数据获取和缓存优化。它特别适合将 Pages Router 迁移到 App Router 的项目,以及构建全栈功能(如利用 Server Actions)的场景。技能基于详细的 SKILL.md 文档,包括清晰的适用和不适用范围说明,并链接到一个更丰富的实现手册(`resources/implementation-playbook.md`)以获取详细示例。支持平台:Claude Code、Cursor、Codex 等 AI 代理工具。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/web-development/nextjs-app-router-patterns

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Next.js App Router 模式指南 是做什么的?

适用于 Next.js 14+ App Router 架构、服务端组件及现代全栈 React 开发的全面模式指南。

何时使用此技能

  • 使用 App Router 构建新的 Next.js 应用
  • 从 Pages Router 迁移到 App Router
  • 实施服务端组件和流式渲染
  • 设置并行路由和拦截路由
  • 优化数据获取和缓存
  • 使用 Server Actions 构建全栈功能

请勿使用此技能的情况

  • 任务与 next.js app router 模式无关
  • 需要此范围之外的不同领域或工具

说明

  • 澄清目标、约束和所需输入。
  • 应用相关的最佳实践并验证结果。
  • 提供可操作的步骤和验证。
  • 如果需要详细示例,请打开 resources/implementation-playbook.md。

资源

  • resources/implementation-playbook.md 提供详细模式和示例。

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

marnixGeerkens/rocketlauncher-claude-code

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

相关技能