next-js

Guide building and operating modern Next.js applications with routing and data fetching.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/westonwrz/codex-skills-by-codex --skill next-js-westonwrz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-js
Source: https://github.com/westonwrz/codex-skills-by-codex/tree/main/next.js
Command: npx skills add https://github.com/westonwrz/codex-skills-by-codex --skill next-js-westonwrz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers build, optimize, and deploy modern Next.js applications efficiently, addressing complex routing, data fetching, caching, and performance challenges.

Core Features & Use Cases

  • Architecture & Routing: Guidance on App Router vs. Pages Router, nested layouts, and API routes.
  • Data Fetching & Caching: Strategies for server and client data fetching, caching, and revalidation.
  • Performance & Optimization: Techniques for optimizing bundle size, image delivery, and rendering.
  • SEO & Accessibility: Best practices for metadata, semantic HTML, and keyboard navigation.
  • Security & Deployment: Implementing security headers, CI/CD pipelines, and hosting trade-offs.
  • Use Case: You're building a new Next.js application and need to decide on the best routing strategy, data fetching methods, and how to optimize for performance and SEO.

Quick Start

Use the next-js skill to optimize the data fetching and caching strategy for a specific route in my Next.js application.

Frequently Asked Questions about next-js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Next.js routing from the Pages Router to the App Router?▼

Next.js routing migration involves transitioning to nested layouts and new data boundaries within the App Router. This Skill provides architectural guidance on navigating routing decisions to effectively structure modern applications.

What is the best way to handle data fetching and caching in Next.js?▼

Data fetching and caching in Next.js requires strategies for server and client data retrieval, caching primitives, and revalidation. This Skill outlines approaches to establish clear data boundaries and optimize state management.

How do I optimize Next.js bundle size and image delivery?▼

Next.js performance optimization targets bundle size reduction, image optimization, and rendering strategies. This Skill details techniques to enhance application delivery speed and overall operational efficiency.

How do I configure security headers and CSP for a Next.js application?▼

Configuring security headers and CSP in Next.js ensures application protection against vulnerabilities. This Skill offers guidance on implementing robust security measures alongside secure CI/CD pipelines.

Does Next.js support server-side rendering and static generation for SEO?▼

Next.js supports server-side rendering and static generation to enhance SEO and accessibility. This Skill details rendering strategies and metadata best practices to ensure semantic HTML and optimal search visibility.

What are the limitations of Next.js caching primitives?▼

Next.js caching primitives have specific revalidation constraints and data boundary limitations. This Skill explains when to utilize various caching strategies and how to manage build reproducibility and observability.