playbooks

home / skills / partme-ai / full-stack-skills / nextjs

nextjs skill

/skills/nextjs

This skill guides you through Next.js topics, routing, data fetching, and deployment using official docs to implement best practices.

npx playbooks add skill partme-ai/full-stack-skills --skill nextjs

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

Files (381)
SKILL.md
1.5 KB
---
name: nextjs
description: Guidance for Next.js using the official docs at nextjs.org/docs. Use when the user needs Next.js concepts, configuration, routing, data fetching, or API reference details.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- Follow Next.js documentation topics (App Router, Pages Router, architecture, community)
- Implement Next.js routing, data fetching, caching, or deployment
- Use official APIs and configuration options from the docs

## How to use this skill

1. **Identify the topic** from the user request.
2. **Open the matching example file** in `examples/`.
3. **Follow the official Next.js docs** linked in the file.

## Mapping Rules (one-to-one with https://nextjs.org/docs)

The `examples/` directory mirrors the official docs structure:

- `examples/index.md` → https://nextjs.org/docs
- `examples/app/...` → https://nextjs.org/docs/app/...
- `examples/pages/...` → https://nextjs.org/docs/pages/...
- `examples/architecture/...` → https://nextjs.org/docs/architecture/...
- `examples/community/...` → https://nextjs.org/docs/community/...

**Path rule:**
- Remove numeric prefixes from doc folders and filenames (e.g., `01-app` → `app`).
- `index.mdx` pages map to `index.md` inside the corresponding directory.

## Resources
- Docs: https://nextjs.org/docs

## Keywords
Next.js, App Router, Pages Router, routing, data fetching, caching, server components, client components, middleware, deployment, configuration

Overview

This skill provides focused guidance for Next.js using the official docs at nextjs.org/docs. It helps you find authoritative information and examples for routing, data fetching, configuration, server and client components, caching, middleware, and deployment. Use it when you need concise, accurate references mapped to the official documentation structure.

How this skill works

I map user requests to the corresponding Next.js documentation topics and examples that mirror the official docs structure. The examples directory follows a one-to-one mapping with nextjs.org/docs, so I locate the right doc, remove numeric prefixes from paths, and surface the relevant guidance. When needed I provide configuration patterns, routing snippets, and links to official API details for precise implementation.

When to use it

  • Exploring App Router vs Pages Router and their migration patterns
  • Implementing data fetching (fetch, getStaticProps, getServerSideProps) and caching strategies
  • Configuring Next.js (next.config.js, environment variables, image and i18n settings)
  • Adding middleware, edge functions, or optimizing server components
  • Preparing builds and deployments (Vercel and other providers) with official recommendations

Best practices

  • Prefer the App Router for new features but follow migration guidelines when updating legacy code
  • Use server components for data-heavy UI and client components only where interactivity is required
  • Leverage built-in caching and revalidation options before introducing custom caching layers
  • Keep configuration centralized in next.config.js and document environment-specific settings
  • Refer to official API docs for breaking changes when upgrading Next.js versions

Example use cases

  • Create nested routes with layouts using the App Router and shared UI components
  • Implement incremental static regeneration with revalidate for frequently updated pages
  • Configure image optimization and device-safe loading using next/image settings
  • Add middleware to handle redirects, authentication checks, or headers at the edge
  • Set up environment-specific builds and optimize bundle sizes for production

FAQ

Does this skill replace the official docs?

No. It guides you to and interprets the official documentation but relies on nextjs.org/docs as the authoritative source.

Which router should I choose for a new project?

Prefer the App Router for new projects to access modern features, but review migration guidance if you depend on Pages Router APIs.