Can I use this to generate API endpoints?

Yes, the skill includes patterns for route.ts files to handle GET, POST, and other HTTP methods using NextResponse.

How does it handle dynamic routing?

It provides specific syntax for dynamic segments [slug], catch-all routes [...slug], and optional catch-all routes [[...slug]].

Does this skill support the latest Next.js versions?

Yes, it is designed for Next.js 14 and 15, specifically focusing on App Router conventions and async params handling.

Does it differentiate between Server and Client Components?

Absolutely. It correctly identifies that pages and layouts are Server Components by default while ensuring error.tsx is marked with the 'use client' directive.

Next.js App Router Architect

Name: Next.js App Router Architect
Author: Agentient

byAgentient

0•

API Development

Implements Next.js 14+ special file conventions for layouts, pages, and API routes using React Server Components best practices.

This skill equips Claude with the precise blueprints required to navigate and build within the Next.js App Router architecture. It provides standardized templates for persistent layouts, dynamic pages, streaming loading states, and client-side error boundaries. By automating the boilerplate for special files like layout.tsx, page.tsx, and route.ts, it ensures that your project follows Next.js 14+ conventions, including the correct use of Server vs. Client Components and modern async request APIs.

Key Features

01Automated setup for streaming UI using loading.tsx and Suspense

020 GitHub stars

03Standardized scaffolding for root and nested layout.tsx files

04Proper implementation of client-side error.tsx boundaries

05Support for dynamic, catch-all, and optional catch-all routing patterns

06RESTful API route handler generation in route.ts

Use Cases

01Scaffolding a new Next.js project folder structure with core routing files

02Implementing graceful error handling and loading indicators for data-heavy pages

03Adding nested dashboard layouts with persistent sidebars and state

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit nextjs-app-router-file-conventions

For use in Claude.ai and ChatGPT

Download Skill