🎯

app-router

🎯Skill

from pluginagentmarketplace/custom-plugin-nextjs

What it does

Enables advanced Next.js 14+ routing with server components, layouts, and modern routing patterns for efficient web applications.

📦

Part of

pluginagentmarketplace/custom-plugin-nextjs(5 items)

app-router

Installation

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add pluginagentmarketplace/custom-plugin-nextjs

Install PluginInstall plugin from marketplace

/plugin install custom-plugin-nextjs@pluginagentmarketplace-nextjs

git cloneClone repository

git clone https://github.com/pluginagentmarketplace/custom-plugin-nextjs.git

Claude CodeAdd plugin in Claude Code

/plugin load .

📖 Extracted from docs: pluginagentmarketplace/custom-plugin-nextjs

Need more details? View full documentation on GitHub →

3Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

"Next.js App Router - Server components, layouts, routing patterns"

Overview

# App Router Skill

Overview

Master Next.js 14+ App Router with server components, layouts, and modern routing patterns.

Capabilities

Layouts: Root layout, nested layouts, templates
Server Components: Default server rendering
Client Components: Interactive with 'use client'
Route Groups: (folder) for organization
Parallel Routes: @slot for simultaneous rendering
Intercepting Routes: (.) notation patterns

Examples

```tsx

// app/layout.tsx

export default function RootLayout({

children,

}: {

children: React.ReactNode

}) {

return (

{children}

)

}

// app/dashboard/page.tsx

export default async function DashboardPage() {

const data = await fetchData() // Server-side

return

}

```

Best Practices

Use server components by default
Add 'use client' only when needed
Leverage layouts for shared UI
Use loading.tsx for suspense

More from this repository4

🎯

data-fetching🎯Skill

data-fetching skill from pluginagentmarketplace/custom-plugin-nextjs

🎯

deployment🎯Skill

Deploys Next.js applications across Vercel, Docker, and self-hosted environments with zero-config and optimized runtime strategies.

🏪

pluginagentmarketplace-custom-plugin-nextjs🏪Marketplace

Next.js Development Plugin

🎯

api-routes🎯Skill

api-routes skill from pluginagentmarketplace/custom-plugin-nextjs