nextjs-knowledge-skill

Provide structured Next.js architectural knowledge for app planning and design decisions.

2|2|Updated Dec 16, 2025

Search Tags:#next.js #ssr #ssg #app-router #rsc

Ready to run

npx skills add https://github.com/adilkalam/orca --skill nextjs-knowledge-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-knowledge-skill
Source: https://github.com/adilkalam/orca/tree/main/skills/nextjs-knowledge-skill
Command: npx skills add https://github.com/adilkalam/orca --skill nextjs-knowledge-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides structured Next.js knowledge to guide architecture decisions without prompting bloat.

Core Features & Use Cases

App Router & RSC: Documented patterns for app router, server vs client components.
Rendering Strategies: SSG, SSR, ISR, and streaming fundamentals.
Use Case: Guide a Next.js plan with clear server/client boundaries.

Quick Start

Reference core Next.js concepts while designing a new route or page.

Frequently Asked Questions about nextjs-knowledge-skill

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

FAQPage Schema

How do I decide between SSR, SSG, and ISR for Next.js pages?▼

SSR renders pages on each request for dynamic content, SSG pre-builds static pages at build time for performance, and ISR revalidates static pages on a schedule without rebuilding. Choose SSR for user-specific data, SSG for stable content, and ISR for content that updates periodically.

What's the difference between Server Components and Client Components in Next.js App Router?▼

Server Components run only on the server, reducing JavaScript sent to browsers and enabling direct database access, while Client Components run in the browser for interactivity and state management. App Router defaults to Server Components; mark interactive components with 'use client'.

How do I structure data fetching in a Next.js app with the App Router?▼

Fetch data directly in Server Components using async/await, leverage Next.js caching automatically, and use Client Components with useEffect only when browser-side fetching is necessary. This pattern reduces API calls and improves performance.

Can I use static export with dynamic routes in Next.js?▼

Static export generates a fully static site but requires generateStaticParams to pre-define dynamic route segments at build time. Routes without pre-generated params won't be available in the static export output.

What CSS options work best with Next.js rendering strategies?▼

Use CSS Modules for component scoping across SSR, SSG, and ISR. Tailwind CSS works seamlessly with all rendering strategies. Avoid runtime CSS-in-JS libraries with SSG and ISR; they add JavaScript overhead during static generation.

How do I handle streaming in Next.js for faster perceived page loads?▼

Streaming sends HTML chunks progressively using React Server Components and Suspense boundaries, letting browsers render content while the server processes data. Wrap slow components in Suspense with a fallback to enable streaming.