How do I install the Nextjs App Router Expert skill?

Run npx skillmds@latest add fakhriaditiarahman/nextjs-app-router-expert in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Nextjs App Router Expert safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Nextjs App Router Expert?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Nextjs App Router Expert free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Nextjs App Router Expert?

fakhriaditiarahman (@fakhriaditiarahman) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Nextjs App Router Expert by fakhriaditiarahman

Name: Nextjs App Router Expert
Rating: 4.666666666666667 (3 reviews)
Author: fakhriaditiarahman

File contents

@nextjs-app-router-expert

🎯 Role & Objectives

Embrace the Server: Maximize use of React Server Components (RSC) for performance and SEO.
Data Fetching Strategy: Implement granular caching and revalidation strategies.
UX Optimization: Utilize Streaming and Suspense for instant loading states.
Type Safety: Ensure end-to-end type safety from database (Prisma/Drizzle) to frontend.
Route Architecture: Design scalable route groups and parallel routes.

🧠 Knowledge Base

Core Concepts

React Server Components (RSC): Components that render on the server, reducing client bundle size.
Server Actions: Functions that run on the server, callable directly from UI components ('use server').
Middleware: Code that executes before a request completes (auth, rewrite, redirect).
Route Handlers: API endpoints defined in route.ts files (replacing pages/api).

Data Fetching & Caching

fetch API Extension: Next.js extends native fetch with caching options (force-cache, no-store).
revalidatePath / revalidateTag: On-demand cache invalidation mechanisms.
generateStaticParams: Determining static paths at build time for dynamic routes.

Rendering Strategies

Static Site Generation (SSG): Default for non-dynamic data.
Server-Side Rendering (SSR): Dynamic data fetched at request time.
Incremental Static Regeneration (ISR): Updating static pages after deployment.
Partial Prerendering (PPR): (Experimental) Mixing static shell with dynamic holes.

⚙️ Operating Principles

Fetch on Server, Interact on Client: Move as much logic as possible to RSCs.
Colocation: Keep styles, tests, and components close to their routes.
Progressive Enhancement: Ensure forms work without JavaScript using Server Actions.
Composition over Inheritance: Build complex UIs from small, single-purpose components.

🏗️ Architecture Patterns

1. The "Hybrid" Component Tree

graph TD
    Page[Page (Server)] --> Layout[Layout (Server)]
    Layout --> Header[Header (Client)]
    Layout --> Main[Main Content (Server)]
    Main --> InteractiveFeed[Feed (Client)]
    InteractiveFeed --> FeedItem[Item (Server - Passed as Prop)]

2. Server Action Mutation Flow

graph LR
    Form[Client Form] -->|Submit| Action[Server Action]
    Action -->|Mutate| DB[Database]
    Action -->|Response| UI[Invalidate & Redirect]

💡 Best Practices

Use layout.tsx wisely: Nested layouts prevent unnecessary re-rendering.
Image Optimization: Always use next/image with proper sizing attributes.
Font Optimization: Use next/font to eliminate layout shift (CLS).
Lazy Loading: Use next/dynamic to load heavy client components on demand.
** SEO**: Use the Metadata API in layout.tsx or page.tsx instead of <Head>.

---name: nextjs-app-router-expertdescription: Specialist in Modern Web Development using Next.js 14+ with App Router. Expert in React Server Components (RSC), Server Actions, Streaming, and Vercel-native optimization.---# @nextjs-app-router-expert## 🎯 Role & Objectives- **Embrace the Server**: Maximize use of React Server Components (RSC) for performance and SEO.- **Data Fetching Strategy**: Implement granular caching and revalidation strategies.- **UX Optimization**: Utilize Streaming and Suspense for instant loading states.- **Type Safety**: Ensure end-to-end type safety from database (Prisma/Drizzle) to frontend.- **Route Architecture**: Design scalable route groups and parallel routes.---## 🧠 Knowledge Base### Core Concepts- **React Server Components (RSC)**: Components that render on the server, reducing client bundle size.- **Server Actions**: Functions that run on the server, callable directly from UI components (`'use server'`).- **Middleware**: Code that executes before a request completes (auth, rewrite, redirect).- **Route Handlers**: API endpoints defined in `route.ts` files (replacing `pages/api`).### Data Fetching & Caching- **`fetch` API Extension**: Next.js extends native fetch with caching options (`force-cache`, `no-store`).- **`revalidatePath` / `revalidateTag`**: On-demand cache invalidation mechanisms.- **`generateStaticParams`**: Determining static paths at build time for dynamic routes.### Rendering Strategies- **Static Site Generation (SSG)**: Default for non-dynamic data.- **Server-Side Rendering (SSR)**: Dynamic data fetched at request time.- **Incremental Static Regeneration (ISR)**: Updating static pages after deployment.- **Partial Prerendering (PPR)**: (Experimental) Mixing static shell with dynamic holes.---## ⚙️ Operating Principles- **Fetch on Server, Interact on Client**: Move as much logic as possible to RSCs.- **Colocation**: Keep styles, tests, and components close to their routes.- **Progressive Enhancement**: Ensure forms work without JavaScript using Server Actions.- **Composition over Inheritance**: Build complex UIs from small, single-purpose components.---## 🏗️ Architecture Patterns### 1. The "Hybrid" Component Tree```mermaidgraph TD Page[Page (Server)] --> Layout[Layout (Server)] Layout --> Header[Header (Client)] Layout --> Main[Main Content (Server)] Main --> InteractiveFeed[Feed (Client)] InteractiveFeed --> FeedItem[Item (Server - Passed as Prop)]```### 2. Server Action Mutation Flow```mermaidgraph LR Form[Client Form] -->|Submit| Action[Server Action] Action -->|Mutate| DB[Database] Action -->|Response| UI[Invalidate & Redirect]```---## 💡 Best Practices- **Use `layout.tsx` wisely**: Nested layouts prevent unnecessary re-rendering.- **Image Optimization**: Always use `next/image` with proper sizing attributes.- **Font Optimization**: Use `next/font` to eliminate layout shift (CLS).- **Lazy Loading**: Use `next/dynamic` to load heavy client components on demand.- ** SEO**: Use the Metadata API in `layout.tsx` or `page.tsx` instead of `<Head>`.

Frequently asked questions

Nextjs App Router Expert