skills.rest
BWCbewchan
BWCbewchanCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-app-router-patterns

Provide Next.js 14+ App Router patterns for Server Components and routing.

5|2|Updated Dec 14, 2025
Search Tags:#web development#full-stack#data fetching#nextjs#app router#react server components
One-click install
npx skills add https://github.com/BWCbewchan/tmsmindx --skill nextjs-app-router-patterns-bwcbewchan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-patterns
Source: https://github.com/BWCbewchan/tmsmindx/tree/main/.opencode/skills/nextjs-app-router-patterns
Command: npx skills add https://github.com/BWCbewchan/tmsmindx --skill nextjs-app-router-patterns-bwcbewchan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive patterns and best practices for building modern web applications using the Next.js 14+ App Router, enabling efficient Server Component usage, advanced data fetching, and streamlined full-stack development.

Core Features & Use Cases

  • Server Components: Leverage Server Components for data fetching, security, and performance.
  • Client Components: Implement interactivity with 'use client' directives.
  • Server Actions: Handle data mutations and form submissions securely.
  • Routing: Master parallel and intercepting routes for complex UIs and modal patterns.
  • Streaming: Improve perceived performance with Suspense and streaming data.
  • Caching: Implement effective data caching strategies.
  • SEO: Optimize metadata generation for search engines.
  • Use Case: When building a new Next.js application or migrating an existing one to the App Router, use this Skill to implement features like dynamic product pages with streaming reviews, user authentication via Server Actions, and complex dashboard layouts using parallel routes.

Quick Start

Use the nextjs-app-router-patterns skill to create a new Next.js page that fetches and displays a list of products using Server Components and Suspense for streaming.

Frequently Asked Questions about nextjs-app-router-patterns

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

FAQPage Schema
How do I fetch data in Next.js App Router using React Server Components?▼

Fetch data directly in Next.js App Router Server Components to execute database queries securely and improve performance without exposing API keys to the client browser.

What is the best way to handle form submissions and mutations in Next.js 14?▼

Handle form submissions and mutations in Next.js 14 using Server Actions to securely process data mutations directly on the server without creating separate API endpoints.

How do I use parallel and intercepting routes in Next.js for complex UIs?▼

Use parallel and intercepting routes in Next.js to render multiple pages simultaneously and intercept navigation, enabling the creation of complex dashboard layouts and modal patterns.

How does streaming with Suspense improve perceived performance in Next.js?▼

Streaming with Suspense improves perceived performance in Next.js by progressively sending HTML chunks to the client as data becomes available, reducing initial load times for dynamic pages.

When should I use Client Components instead of Server Components in Next.js?▼

Use Client Components in Next.js by applying the 'use client' directive when you need interactivity, state, or browser APIs that React Server Components cannot handle.

How do I optimize SEO and metadata generation in a Next.js App Router application?▼

Optimize SEO in a Next.js App Router application through built-in metadata generation by defining metadata dynamically within route files to automatically inject search engine tags.

Related Skills

Explore More Software Engineering Skills→
act70255act70255

nextjs-app-router-patterns

Provide Next.js 14+ App Router patterns for server-side rendering and streaming.

Community
Advanced
mtmatteimtmattei
5

uno-wasm-pwa

Configure and deploy Uno Platform WebAssembly PWAs with service workers and manifests.

Community
Advanced
shaitamam-80shaitamam-80

frontend-dev

Automate React + TypeScript frontend setup with Vite, Tailwind, and Supabase patterns.

Community
Intermediate
ChristineThamChristineTham

netlify-frameworks

Deploy Astro, Next.js, Nuxt, SvelteKit, and other frameworks to Netlify via adapters.

Community
Intermediate