skills.rest
mfang0126
mfang0126COMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-15

Standardize Next.js 15 App Router project patterns for server and client components.

Updated Aug 23, 2026
Search Tags:#suspense#streaming#nextjs#app-router#server-components#server-actions#route-handlers
One-click install
npx skills add https://github.com/mfang0126/language-arts --skill nextjs-15-mfang0126
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-15
Source: https://github.com/mfang0126/language-arts/tree/main/.opencode/skills/nextjs-15
Command: npx skills add https://github.com/mfang0126/language-arts --skill nextjs-15-mfang0126

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js 15 App Router patterns help teams organize large React applications by clearly separating server and client concerns and by standardizing data fetching, mutations, and routing across an app.

Core Features & Use Cases

  • App Router conventions: layout.tsx, page.tsx, loading.tsx, error.tsx, route handlers, and API routes.
  • Server Components vs Client Components decision guidance and practical usage examples.
  • Server Actions and data mutations with optimistic UI patterns and revalidation strategies.
  • Data fetching and streaming with Suspense and incremental streaming.
  • Use Case: Building a dashboard that fetches multiple data sources, mutates data via actions, and exposes API endpoints.

Quick Start

Set up a Next.js app and enable the App Router by placing your pages under app/, creating a root layout (layout.tsx) and a page (page.tsx). Implement a simple server component that fetches data, a client component that renders UI, a server action to update data, and a route handler for an API endpoint. Run the development server and verify server components, actions, and streaming behaviors.

Frequently Asked Questions about nextjs-15

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

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

Structure a Next.js 15 App Router project by placing pages under app/ and using layout.tsx, page.tsx, loading.tsx, and error.tsx to separate server and client component concerns. This standardizes data fetching and routing across the app.

When should I use server actions instead of route handlers for data mutations?▼

Use server actions for data mutations with optimistic UI patterns and direct revalidation strategies. Use route handlers when you need to expose dedicated API endpoints for external or client-side data fetching.

How does streaming with Suspense work in Next.js App Router?▼

Streaming with Suspense in Next.js App Router allows incremental rendering by wrapping slow data-fetching server components in Suspense boundaries. This streams HTML to the client as data becomes ready, improving initial load performance.

What is the best way to manage caching and revalidation for server components?▼

Manage caching and revalidation for server components by standardizing data fetching patterns and utilizing server actions to trigger cache invalidation. This ensures optimized React web app performance without stale data.

Does Next.js 15 App Router support building dashboards with multiple data sources?▼

Yes, Next.js 15 App Router supports building dashboards by fetching multiple data sources in server components, mutating data via server actions, exposing API endpoints with route handlers, and streaming UI with Suspense.

What are the limitations of using server components for data fetching?▼

Server components for data fetching cannot handle client-side interactivity or browser APIs directly. You must split client concerns into separate client components and manage mutations via server actions or route handlers.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
ChristineThamChristineTham

vercel-functions

Configure and optimize Vercel Functions across serverless and edge runtimes.

Community
Advanced
atro2829-hubatro2829-hub

fullstack-dev

Build fullstack Next.js 16 apps with TypeScript, Tailwind CSS 4, shadcn/ui, and Prisma ORM.

Community
Advanced
yahav123147yahav123147

react-server-components

Implement React Server Components in Next.js App Router with server/client boundaries.

Community
Advanced