nextjs-pro

Identify optimal Next.js App Router patterns for server rendering and performance.

Updated Jan 24, 2026
One-click install
npx skills add https://github.com/pikakit/agent-skills --skill nextjs-pro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-pro
Source: https://github.com/pikakit/agent-skills/tree/main/.agent/skills/nextjs-pro
Command: npx skills add https://github.com/pikakit/agent-skills --skill nextjs-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js Pro provides a structured decision framework to guide large-scale Next.js App Router development: it helps teams decide when to render on the server vs the client, select caching and data fetching strategies, and enforce routing conventions with clear performance-oriented rules.

Core Features & Use Cases

  • Server-vs-client decision tree to determine when to emit 'use client' versus server components.
  • Data fetching strategies (static/default, ISR with revalidate, dynamic/no-store) to minimize waterfalls and optimize CWV.
  • Routing conventions and required route files (page.tsx, layout.tsx, loading.tsx, error.tsx) for predictable App Router structure.
  • 60+ performance rules spanning 8 categories to guide optimization and safe, scalable patterns.
  • Clear boundaries and expert decision logic suitable for large-scale Next.js apps (FAANG-scale guidance).

Quick Start

Provide a production-ready plan for a Next.js App Router page, including server/client decision, data strategy, and route structure.

Frequently Asked Questions about nextjs-pro

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

FAQPage Schema
How do I decide between server components and client components in Next.js App Router?▼

To decide between server and client components in Next.js App Router, apply a structured decision tree that evaluates rendering requirements to maximize server-side execution before emitting 'use client'.

What's the best way to structure data fetching strategies in Next.js?▼

The best way to structure data fetching in Next.js is selecting from three strategies—static default, ISR with revalidate, or dynamic no-store—to minimize waterfalls and optimize Core Web Vitals.

What route files are required for a predictable Next.js App Router structure?▼

Required route files for a predictable Next.js App Router structure include page.tsx, layout.tsx, loading.tsx, and error.tsx, enforcing fixed routing conventions across your application.

How do I optimize performance for large-scale Next.js applications?▼

Optimize performance for large-scale Next.js applications by applying a taxonomy of 60+ rules across eight categories, enforcing server-first defaults and scalable patterns suitable for FAANG-scale guidance.

Does this Next.js App Router pattern guidance work for high-traffic applications?▼

Yes, this Next.js App Router pattern guidance works for high-traffic applications by providing clear boundaries and expert decision logic specifically designed for large-scale, FAANG-level Next.js deployments.