nextjs_skill

This skill provides Next.js guidance on app structure, routing, data fetching, and optimization to help you build scalable interfaces.

Python

1

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 bankkroll/skills-builder --skill nextjs

SKILL.md10.9 KB

Overview

This skill provides concise, practical guidance for building, migrating, and optimizing Next.js applications using both the App Router and Pages Router. It covers routing, data fetching strategies, caching, performance, and common errors so you can make informed architecture and implementation choices. Use it to resolve framework-specific questions, migration steps, and configuration decisions quickly.

How this skill works

The skill inspects Next.js patterns and documentation across App and Pages routers, API routes, data fetching methods (getStaticProps, getServerSideProps, Server Components, and client components), and platform-specific behaviors like edge runtime and image optimization. It synthesizes best practices for routing, caching, authentication, testing, and upgrade paths, and surfaces concrete fixes for common runtime and build-time messages.

When to use it

Choosing between App Router and Pages Router for a new or migrating app
Designing data fetching and caching strategies (SSG, SSR, ISR, server components)
Configuring edge runtime, image/video optimization, or custom headers/CSP
Debugging Next.js build, runtime messages, or migration errors
Setting up testing, instrumentation (OpenTelemetry), or PWA support

Best practices

Prefer server components for data-heavy UI and client components only for interactivity
Use generateStaticParams and ISR for scalable static generation with dynamic routes
Apply caching controls (revalidate, cache headers) at the route or fetch level for predictable performance
Migrate incrementally from Pages to App Router — keep Pages where needed and adopt App features stepwise
Run linting, type checks, and debug tools locally; replicate Production edge behavior in staging before deploy

Example use cases

Migrate a legacy Create React App site to Next.js with SSR and incremental adoption of App Router
Implement authentication with server functions, cookie handling, and secure CSP headers
Optimize images and videos using built-in Image component and custom loader for a CDN
Set up Jest with Next.js and add CI tests for server and client components
Instrument a Next.js app with OpenTelemetry for tracing requests across edge and server runtimes

FAQ

Use server components for rendering on the server without client JavaScript if you can fetch data there; use getServerSideProps when you need per-request props in the Pages Router or access to request-specific context not yet supported by server components.

Can I use App Router and Pages Router together?

Yes. You can progressively adopt the App Router while keeping existing Pages routes. Follow migration steps to avoid route conflicts and update shared configuration incrementally.