nextjs-architecture_skill
- Python
2
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill 89jobrien/steve --skill nextjs-architecture- SKILL.md3.4 KB
Overview
This skill provides specialist guidance for designing and evolving Next.js applications, with emphasis on the App Router, Server Components, and production performance. It helps plan architecture, execute migrations from the Pages Router, and apply best practices for full‑stack Next.js projects. Use it to reduce complexity, improve load times, and make maintainable routing and data‑fetching choices.
How this skill works
I evaluate your current app structure, routing needs, and data flows, then recommend an App Router layout, component partitioning (Server vs Client), and caching strategy. For migrations I provide stepwise changes: convert layouts, move pages to app/, and adapt data fetching to the new conventions. I also suggest performance tactics like static generation, ISR, streaming with Suspense, and image/code optimization tuned to your use case.
When to use it
- Designing a new Next.js app with App Router and Server Components
- Migrating an existing Pages Router app to the App Router
- Deciding which components should be Server vs Client
- Improving production performance and reducing TTFB
- Implementing streaming, ISR, or static generation strategies
Best practices
- Prefer Server Components by default and add 'use client' only where interactivity requires it
- Organize app/ into logical route groups and shared layouts to reduce duplication
- Use static generation for stable content and ISR for frequently changing pages
- Leverage streaming + Suspense for slow data sources and to improve perceived performance
- Centralize direct database access in Server Components or API routes to simplify security and caching
Example use cases
- Create an app/ directory layout for a multi‑tenant dashboard with nested layouts and auth boundary
- Migrate pages/_app and pages/* to app/layout.tsx and app/*/page.tsx with server data fetching
- Implement Server Components for data fetching and Client Components for charts and inputs
- Design a caching and ISR policy for a blog and product catalog to balance freshness and build time
- Introduce streaming for long queries and progressively render UI with Suspense
FAQ
Default to Server Components for data fetching and rendering. Use Client Components only when you need browser APIs, event handlers, or stateful UI. Keep client scope minimal to reduce bundle size.
What are the minimal steps to migrate from Pages Router to App Router?
Create app/layout.tsx to replace _app, move each page into app/<route>/page.tsx, convert API endpoints to route handlers under app/api or pages/api, and adjust data fetching to use async Server Components or client hooks where needed.
