playbooks

home / skills / bankkroll / skills-builder / nextjs

nextjs skill

/skills/nextjs

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

npx playbooks add skill bankkroll/skills-builder --skill nextjs

Review the files below or copy the command above to add this skill to your agents.

Files (67)
SKILL.md
10.9 KB
---
name: "nextjs"
description: "Scraped from https://nextjs.org/docs/ Source: https://nextjs.org/docs. Use when questions involve: app, architecture, community, messages, pages."
---

# Nextjs

> Official documentation: https://nextjs.org/docs

## Overview

This skill provides comprehensive documentation for nextjs.

**Total references:** 66 files (~439,464 tokens)

**Topics covered:**
New User-Agent Helper, Optional Props, Router navigation tracking, Running your tests, getServerSideProps return values, Using App Router together with Pages Router, Check your Custom App File pages_appjs, Using getStaticProps to fetch data from a CMS, TryexperimentalwebpackMemoryOptimizations, Caching APIs, generateViewportfunction, Guides...

## Reference Files

Load only the reference files relevant to the user's question:

### App

- **[create and more](references/app-1.md)** (~7,449 tokens)
  - Topics: Reference, Examples, Reference
- **[Form Component](references/app-2.md)** (~1,583 tokens)
  - Topics: Reference, Examples
- **[Image Component](references/app-3.md)** (~7,364 tokens)
  - Topics: Reference, Functions, Known browser bugs
- **[Link Component and more](references/app-4.md)** (~7,949 tokens)
  - Topics: Reference, Examples, Version history
- **[assetPrefix and more](references/app-5.md)** (~7,140 tokens)
  - Topics: Set up a CDN, Usage, Usage
- **[headers and more](references/app-6.md)** (~7,963 tokens)
  - Topics: Header Overriding Behavior, Path Matching, Header Cookie and Query Matching
- **[reactCompiler and more](references/app-7.md)** (~7,698 tokens)
  - Topics: How It Works, Annotations, Path Matching
- **[turbopack and more](references/app-8.md)** (~5,895 tokens)
  - Topics: Reference, Examples, Version History
- **[TypeScript and more](references/app-9.md)** (~7,633 tokens)
  - Topics: IDE Plugin, End-to-End Type Safety, Route-Aware Type Helpers
- **[use cache and more](references/app-10.md)** (~7,173 tokens)
  - Topics: Usage, Howuse cacheworks, Serialization
- **[Dynamic Route Segments and more](references/app-11.md)** (~7,536 tokens)
  - Topics: Convention, Behavior, Examples
- **[loading.js and more](references/app-12.md)** (~7,515 tokens)
  - Topics: Reference, Behavior, Platform Support
- **[page.js and more](references/app-13.md)** (~7,329 tokens)
  - Topics: Good to know, Reference, Examples
- **[Route Segment Config and more](references/app-14.md)** (~7,017 tokens)
  - Topics: Options, Version History, Reference
- **[cacheLife and more](references/app-15.md)** (~8,002 tokens)
  - Topics: Usage, Reference, Examples
- **[generateMetadata and more](references/app-16.md)** (~6,632 tokens)
  - Topics: Themetadataobject, generateMetadatafunction, Reference
- **[generateStaticParams and more](references/app-17.md)** (~7,831 tokens)
  - Topics: Parameters, Returns, Single Dynamic Segment
- **[refresh and more](references/app-18.md)** (~7,130 tokens)
  - Topics: Usage, Parameters, Returns
- **[useReportWebVitals and more](references/app-19.md)** (~7,553 tokens)
  - Topics: useReportWebVitals, Web Vitals, Sending results to external systems
- **[Cache Components and more](references/app-20.md)** (~7,400 tokens)
  - Topics: How rendering works with Cache Components, Automatically prerendered content, Defer rendering to request time
- **[Error Handling and more](references/app-21.md)** (~6,639 tokens)
  - Topics: Handling expected errors, Handling uncaught exceptions, API Reference
- **[Layouts and Pages and more](references/app-22.md)** (~5,423 tokens)
  - Topics: Creating a page, Creating a layout, Creating a nested route
- **[Project structure and organization and more](references/app-23.md)** (~7,421 tokens)
  - Topics: Folder and file conventions, Organizing your project, Examples
- **[Updating Data and more](references/app-24.md)** (~6,129 tokens)
  - Topics: What are Server Functions, Creating Server Functions, Invoking Server Functions
- **[How to implement authentication in Next.js](references/app-25.md)** (~5,852 tokens)
  - Topics: Authentication, Session Management, Authorization
- **[How to use Next.js as a backend for your frontend](references/app-26.md)** (~2,863 tokens)
  - Topics: Public Endpoints, Content types, Manipulating data
- **[Caching in Next.js and more](references/app-27.md)** (~7,207 tokens)
  - Topics: Overview, Rendering Strategies, Request Memoization
- **[How to set a Content Security Policy (CSP) for your Next.js application and more](references/app-28.md)** (~6,955 tokens)
  - Topics: Nonces, Static vs Dynamic Rendering with CSP, Without Nonces
- **[How to use debugging tools with Next.js and more](references/app-29.md)** (~7,849 tokens)
  - Topics: Debugging with VS Code, Using the Debugger in Jetbrains WebStorm, Debugging with Browser DevTools
- **[Internationalization and more](references/app-30.md)** (~5,497 tokens)
  - Topics: Terminology, Routing Overview, Localization
- **[How to use markdown and MDX in Next.js and more](references/app-31.md)** (~4,245 tokens)
  - Topics: Install dependencies, Configurenextconfigmjs, Add anmdx-componentstsxfile
- **[How to migrate from Pages to the App Router](references/app-32.md)** (~5,343 tokens)
  - Topics: Upgrading, Next Steps, Upgrading New Features
- **[How to migrate from Create React App to Next.js and more](references/app-33.md)** (~7,801 tokens)
  - Topics: Why Switch, Migration Steps, Additional Considerations
- **[How to set up instrumentation with OpenTelemetry and more](references/app-34.md)** (~6,431 tokens)
  - Topics: Getting Started, Testing your instrumentation, Deployment
- **[How to build a Progressive Web Application (PWA) with Next.js and more](references/app-35.md)** (~7,764 tokens)
  - Topics: Creating a PWA with Nextjs, Extending your PWA, Example
- **[How to self and more](references/app-36.md)** (~7,174 tokens)
  - Topics: Reverse Proxy, Image Optimization, Proxy
- **[How to set up Jest with Next.js and more](references/app-37.md)** (~7,683 tokens)
  - Topics: Quickstart, Manual setup, Optional Handling Absolute Imports and Module Path Aliases
- **[How to upgrade to version 15 and more](references/app-38.md)** (~7,993 tokens)
  - Topics: Upgrading from 14 to 15, React 19, Async Request APIs Breaking change
- **[How to use and optimize videos and more](references/app-39.md)** (~3,186 tokens)
  - Topics: Usingvideoandiframe, Self-hosted videos, Resources

### Architecture

- **[Accessibility and more](references/architecture.md)** (~4,317 tokens)
  - Topics: Route Announcements, Linting, Accessibility Resources

### Community

- **[Docs Contribution Guide and more](references/community.md)** (~3,532 tokens)
  - Topics: Why Contribute, How to Contribute, File Structure

### General

- **[App Router and more](references/general.md)** (~1,428 tokens)
  - Topics: Next Steps, Contributing, Discussions

### Messages

- **[Addressing "App Container Deprecated" Error in Next.js and more](references/messages-1.md)** (~7,628 tokens)
  - Topics: Why This Error Occurred, Possible Ways to Fix It, Useful Links
- **[No async Client Component and more](references/messages-2.md)** (~5,168 tokens)
  - Topics: Why This Error Occurred, Possible Ways to Fix It, Why This Error Occurred

### Pages

- **[create and more](references/pages-1.md)** (~7,497 tokens)
  - Topics: Reference, Examples, Reference
- **[Form and more](references/pages-2.md)** (~6,414 tokens)
  - Topics: Reference, Avoid duplicated tags, Use minimal nesting
- **[Image](references/pages-3.md)** (~7,289 tokens)
  - Topics: Reference, Functions, Known browser bugs
- **[Link and more](references/pages-4.md)** (~7,536 tokens)
  - Topics: Reference, Examples, Version history
- **[assetPrefix and more](references/pages-5.md)** (~7,321 tokens)
  - Topics: Set up a CDN, Version History, Disabling compression
- **[output and more](references/pages-6.md)** (~7,442 tokens)
  - Topics: How it Works, Automatically Copying Traced Files, Caveats
- **[turbopack and more](references/pages-7.md)** (~7,956 tokens)
  - Topics: Reference, Examples, Version History
- **[Edge Runtime and more](references/pages-8.md)** (~7,672 tokens)
  - Topics: Caveats, Reference, Exports
- **[getServerSideProps and more](references/pages-9.md)** (~7,993 tokens)
  - Topics: Context parameter, getServerSideProps return values, Version History
- **[useRouter and more](references/pages-10.md)** (~7,801 tokens)
  - Topics: routerobject, Thenextcompatrouterexport, Potential ESLint errors
- **[Client and more](references/pages-11.md)** (~7,246 tokens)
  - Topics: Client-side data fetching with useEffect, Client-side data fetching with SWR, Example
- **[API Routes and more](references/pages-12.md)** (~7,133 tokens)
  - Topics: Parameters, HTTP Methods, Request Helpers
- **[How to use CSS in your application and more](references/pages-13.md)** (~6,126 tokens)
  - Topics: Tailwind CSS, CSS Modules, Global CSS
- **[How to implement authentication in Next.js and more](references/pages-14.md)** (~7,681 tokens)
  - Topics: Authentication, Session Management, Authorization
- **[How to preview content with Draft Mode in Next.js and more](references/pages-15.md)** (~6,081 tokens)
  - Topics: Step 1 Create and access the API route, Step 2 UpdategetStaticProps, More Details
- **[How to implement internationalization in Next.js and more](references/pages-16.md)** (~5,786 tokens)
  - Topics: Getting started, Locale Strategies, Automatic Locale Detection
- **[How to migrate from Pages to the App Router](references/pages-17.md)** (~5,353 tokens)
  - Topics: Upgrading, Next Steps, Upgrading New Features
- **[How to migrate from Create React App to Next.js and more](references/pages-18.md)** (~7,696 tokens)
  - Topics: Why Switch, Migration Steps, Additional Considerations
- **[How to instrument your Next.js app with OpenTelemetry and more](references/pages-19.md)** (~7,377 tokens)
  - Topics: Getting Started, Testing your instrumentation, Deployment
- **[How to handle redirects in Next.js and more](references/pages-20.md)** (~7,421 tokens)
  - Topics: useRouterhook, redirectsinnextconfigjs, NextResponseredirectin Proxy
- **[How to set up Jest with Next.js and more](references/pages-21.md)** (~7,957 tokens)
  - Topics: Quickstart, Manual setup, Setting up Jest with Babel
- **[How to upgrade to version 11 and more](references/pages-22.md)** (~5,366 tokens)
  - Topics: React 16 to 17, Upgrading from 12 to 13, Migrating shared features

## Usage Guidelines

1. **Identify relevant sections** - Match the user's question to the appropriate reference file(s)
2. **Load minimally** - Only read files directly relevant to the question to conserve context
3. **Cite sources** - Reference specific sections when answering
4. **Combine knowledge** - For complex questions, you may need multiple reference files

### When to use each reference:

- **App**: App-related features and documentation
- **Architecture**: Architecture-related features and documentation
- **Community**: Community-related features and documentation
- **General**: General documentation, overview, and getting started
- **Messages**: Messages-related features and documentation
- **Pages**: Pages-related features and documentation

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

When should I use getServerSideProps vs server components?

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.