skills.rest
saajunaid
saajunaidCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-app-router

Structure Next.js 13+ App Router projects with server and client component conventions.

Updated Feb 20, 2026
Search Tags:#middleware#nextjs#app-router#server-components#data-fetching#route-handlers
One-click install
npx skills add https://github.com/saajunaid/junai --skill nextjs-app-router-saajunaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router
Source: https://github.com/saajunaid/junai/tree/main/.github/skills/frontend/nextjs-app-router
Command: npx skills add https://github.com/saajunaid/junai --skill nextjs-app-router-saajunaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js App Router introduces complex conventions around server vs client components, data fetching, middleware, and route handlers. This Skill provides a practical blueprint to structure app/, leverage server actions, metadata, and route handlers with consistent patterns. It acts as a companion to react-dev and react-best-practices to align architectural decisions.

Core Features & Use Cases

  • Clear directory conventions for app/, including layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, and route groups.
  • Guidance on server vs client components and the decision tree to ensure server components by default and client behavior only where needed.
  • Middleware, data fetching, server actions, and route handlers patterns to produce robust, scalable Next.js apps.
  • Use Case: Standardize a multi-route dashboard with nested layouts and API routes.

Quick Start

To apply these conventions, create or adapt your Next.js project to the app/ directory and implement the patterns shown for layouts, pages, and route handlers.

Frequently Asked Questions about nextjs-app-router

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

FAQPage Schema
How do I structure a Next.js App Router project with server and client components?▼

Use the app/ directory with nested layouts like layout.tsx and page.tsx to structure your project. Default to server components, placing 'use client' only where needed, and utilize loading.tsx and error.tsx for robust route handling.

When should I use server actions and route handlers in Next.js?▼

Use server actions to handle form submissions and data mutations directly within your components. Utilize route handlers for distinct API endpoints, ensuring both patterns align with your app/ directory structure and nested layouts.

How do I implement middleware and generateMetadata in a Next.js app?▼

Implement middleware to intercept requests before they complete, applying logic like authentication. Use the generateMetadata function within your page.tsx files to dynamically output SEO metadata based on fetched data.

Does Next.js App Router support nested layouts and route groups?▼

Yes, Next.js App Router supports nested layouts and route groups within the app/ directory. Use layout.tsx files to share UI across pages and organize routes into groups, keeping your directory conventions clear and scalable.

What is the best way to standardize a multi-route dashboard with Next.js?▼

Standardize a multi-route dashboard by leveraging the app/ directory with nested layouts, loading.tsx, and error.tsx. Apply server components by default for data fetching and use route handlers to manage API requests robustly.

Related Skills

Explore More Software Engineering Skills→
SnakeOSnakeO
9

refactor:laravel

Refactor Laravel controllers into Actions and services with SOLID principles.

Community
Advanced
MikisbellMikisbell

nextjs-15

Explain and demonstrate Next.js 15 App Router patterns including Server Components and Actions.

Community
Intermediate
msichtermanmsichterman

vercel-react-best-practices

Enforce React and Next.js performance best practices for components, data fetching, routing, and bundling.

Community
Advanced
Gentleman-ProgrammingGentleman-Programming
618

nextjs-15

Standardize Next.js 15 App Router patterns for routing, server actions, and data fetching.

Official
Intermediate