nextjs-app-architecture-skill
Architecture patterns for Next.js 16 App Router apps. Feature-sliced design, Suspense streaming, Cache Components, UX patterns.
A packaged set of architectural rules and reference documents for AI coding agents to follow consistent Next.js 16 app patterns when generating or reviewing code.
This repository is a packaged skill for AI coding agents, specifically designed for building web apps with Next.js 16 or later. Rather than being an app you run or a library you install in the usual sense, it is a set of rules and reference documents that an AI assistant can load to follow consistent architectural patterns when generating code.
The skill is built around five design principles drawn from a blog post by the author. The core ideas are: pages should arrange components rather than fetch data themselves; each component that needs data should fetch it directly; loading placeholder screens should live in the same file as the component they cover; the page controls how loading states sequence and appear; and interactive client-side code should be pushed as far down the component tree as possible rather than wrapping large sections.
Beyond those five principles, the skill includes reference documents organized into two groups. The core group covers folder organization, data-fetching patterns, component design, and page-level loading behavior. An optional group adds patterns for making the app feel faster, covering a caching approach called Cache Components and a set of user experience patterns.
Installing the skill takes a single command using npx, and from that point an AI coding agent can reference the included documents when generating or reviewing code. The README links to a companion skill for view transitions and several blog posts for developers who want to read the reasoning behind each pattern in more depth.
Where it fits
- Load this skill into your AI coding agent so it follows consistent Next.js 16 folder structure and data-fetching patterns every time it generates code.
- Use the included reference docs to teach an AI assistant to co-locate loading placeholder screens with the components they cover, following the author's design principles.
- Apply the optional Cache Components and UX patterns to make your Next.js app feel faster without manually explaining the architecture to your AI tool each time.