How does this skill handle SEO?

It implements the Next.js Metadata API, providing patterns for both static and dynamic metadata generation, including OpenGraph tags and JSON-LD.

Does this skill work with the older Next.js Pages Router?

No, this skill is specifically optimized for the App Router architecture introduced in Next.js 13 and above, focusing on the app/ directory.

Does it support complex layouts?

Absolutely. It includes patterns for nested layouts, parallel routes for multi-panel dashboards, and intercepting routes for advanced modal behaviors.

Can it help with data fetching and loading states?

Yes, it provides implementation patterns for loading.tsx files and manual Suspense boundaries to enable streaming and improve perceived performance.

Next.js App Router Expert

Name: Next.js App Router Expert
Author: TheBushidoCollective

byTheBushidoCollective

•

Developer Tools

Architects modern Next.js applications using advanced App Router features like server components, streaming, and nested layouts.

The Next.js App Router skill equips Claude with the architectural patterns and best practices required to build performant, SEO-friendly web applications using Next.js 13 and beyond. It provides standardized implementations for the file-system based app directory, complex routing strategies including parallel and intercepting routes, and robust data fetching patterns. By leveraging this skill, developers can ensure their projects utilize React Server Components, efficient loading states through streaming, and centralized error handling to create production-grade user experiences.

Key Features

01Nested layout and template patterns for persistent and re-rendering UI

02Metadata API integration for dynamic SEO and JSON-LD structured data

03Comprehensive file-system routing including Route Groups and Dynamic Segments

0472 GitHub stars

05Built-in streaming support with loading.tsx and React Suspense boundaries

06Advanced routing techniques like Parallel Routes and Intercepting Routes for modals

Use Cases

01Building high-performance dashboards with parallel views and nested navigation

02Developing SEO-optimized content platforms with dynamic static generation (SSG)

03Implementing complex UI states like intercepting modals for image galleries or auth flows

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han nextjs-app-router

For use in Claude.ai and ChatGPT

Download Skill