nextjs-app-router

This skill provides specialized assistance for developers building web applications with the Next.js 13+ App Router architecture. It is designed for frontend and full-stack engineers aiming to leverage modern React paradigms, including Server Components, Client Components, and server-side rendering strategies. The assistant helps navigate the directory-based routing system, manage component boundaries, and implement performant data-fetching flows using asynchronous components and caching strategies. It is ideal for developers architecting scalable, SEO-friendly applications that require efficient code splitting, reduced bundle sizes, and progressive UI rendering.

• Architecture guidance for App Router directory structure (layout.tsx, page.tsx, route.ts).

• Implementation of React Server Components to reduce client-side JavaScript execution.

• Configuration of metadata, dynamic routes, and static site generation (SSG) with generateStaticParams.

• Integration of streaming and progressive rendering using React Suspense and loading states.

• Server-side data fetching patterns using fetch, database queries (Prisma/ORM), and custom cache revalidation.

• Handling complex UI requirements like parallel routes, intercepting modals, and error boundaries.

• Transitioning legacy Pages router logic to modern App router patterns.

• Users should provide specific component requirements, routing needs, or performance bottlenecks to receive the most accurate code structure.

• When defining components, clearly specify if the logic requires interactive hooks (useState, useEffect), which dictates the use of the 'use client' directive.

• The assistant assumes standard Next.js conventions and should be used to troubleshoot hydration errors, caching issues, or middleware configuration.

• Inputs typically involve architecture questions or code snippets; outputs provide idiomatic, performant React/Next.js implementation patterns.

• Constraints include staying within the boundaries of the Next.js App Router paradigm, avoiding legacy client-only patterns in server environments, and adhering to current stable React 18/19 standards.