skills.rest
ps-carvalho
ps-carvalhoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-patterns

Guide Next.js 14/15 App Router patterns including Server Components and caching.

Updated Mar 12, 2026
Search Tags:#performance#web development#react#nextjs#server components#app router
One-click install
npx skills add https://github.com/ps-carvalho/spavn-agents --skill nextjs-patterns-ps-carvalho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-patterns
Source: https://github.com/ps-carvalho/spavn-agents/tree/main/.opencode/skills/nextjs-patterns
Command: npx skills add https://github.com/ps-carvalho/spavn-agents --skill nextjs-patterns-ps-carvalho

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear guidance and best practices for building robust, performant, and maintainable Next.js applications using the latest App Router features.

Core Features & Use Cases

  • App Router Patterns: Understand Server Components, Client Components, Server Actions, and route groups.
  • Data Fetching & Caching: Implement effective data fetching strategies with various caching options (ISR, on-demand).
  • Performance Optimization: Learn techniques for streaming, metadata, middleware, and avoiding common anti-patterns.
  • Use Case: You're starting a new Next.js project and want to ensure you're using the most efficient and modern patterns for data handling, component architecture, and deployment.

Quick Start

Use the nextjs-patterns skill to explain the difference between Server Components and Client Components in Next.js.

Frequently Asked Questions about nextjs-patterns

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

FAQPage Schema
How do Server Components and Client Components differ in Next.js App Router?▼

Server Components render on the server for improved performance, while Client Components handle interactivity. This distinction in Next.js dictates data fetching strategies and dictates where state management executes.

What is the best way to implement data fetching and caching in Next.js 14?▼

The best way to implement data fetching in Next.js involves leveraging Server Components with strategic caching. Utilize options like Incremental Static Regeneration and on-demand revalidation to ensure fresh data.

How do I use Server Actions to handle form submissions in Next.js?▼

Server Actions allow you to mutate data directly from Server Components without creating dedicated API endpoints. You define them within your Next.js App Router structure to streamline data mutations.

Can I use streaming and parallel routes to optimize Next.js performance?▼

Streaming with Suspense and parallel routes are supported patterns to optimize Next.js performance. They allow progressive rendering of UI sections, significantly improving initial load times for complex pages.

What are common anti-patterns to avoid when structuring a Next.js App Router project?▼

Common anti-patterns include improper placement of layout logic and misusing client boundaries. Following best practices for route groups and middleware ensures a maintainable Next.js project structure.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
imDarshanGKimDarshanGK
11

docker-expert

Optimize Docker container configurations for security, performance, and deployment reliability.

Community
Advanced
SouleymaneSy7SouleymaneSy7
2

react-nextjs-development

Set up React and Next.js 14+ projects with TypeScript and Tailwind CSS.

Community
Advanced
REVREBELREVREBEL

astro

Develop static sites with Astro using file-based routing and reusable components.

Official
Intermediate