Does this skill support the latest Next.js versions?

Yes, these patterns are designed for Next.js 14 and are fully compatible with Next.js 15, following the latest App Router conventions.

What routing features are covered?

The skill includes patterns for basic page routing, nested layouts, loading/error states, parallel routes, and intercepting routes for modal patterns.

Does it include examples for data fetching?

Yes, it covers server-side fetching in Server Components, client-side fetching, and advanced caching/revalidation strategies like ISR.

Can I use this for migrating from the Pages Router?

Absolutely. The skill includes core file conventions and architectural patterns necessary to transition from the Pages Router to the App Router.

How does this help with SEO?

It provides standardized patterns for the Metadata API, dynamic social media card generation, and JSON-LD implementation within the App Router structure.

Next.js App Router Patterns

Name: Next.js App Router Patterns
Author: nguyendinhquocx

bynguyendinhquocx

학습 및 문서화

Implements modern Next.js 14+ architectures using Server Components, streaming, and advanced routing patterns.

소개

This skill provides a comprehensive library of architectural patterns for Next.js 14 and beyond, focusing specifically on the App Router ecosystem. It enables developers to seamlessly implement React Server Components, optimize data fetching with Suspense and streaming, and manage complex UI states using parallel and intercepting routes. Whether you are migrating from the legacy Pages Router or building a new full-stack application, this skill offers production-ready boilerplate and best practices for Server Actions, caching strategies, and SEO-optimized metadata management to ensure high-performance web development.

주요 기능

Automated SEO and Metadata generation for dynamic and static pages
Implementation of React Server Components (RSC) and Client Component boundaries
Performance optimization through streaming, Suspense, and ISR caching
Full-stack data handling using Server Actions and Route Handlers (API)
0 GitHub stars
Advanced routing patterns including parallel, intercepting, and dynamic routes

사용 사례

Building high-performance e-commerce platforms with streaming and incremental static regeneration
Migrating legacy Next.js Pages Router applications to the modern App Router architecture
Creating complex dashboard layouts with independent loading states and parallel views

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyendinhquocx/code-ai nextjs-app-router-patterns

For use in Claude.ai and ChatGPT

Download Skill

GitHub

소개