nextjs-conventions

Enforce Next.js 15 App Router conventions and TypeScript patterns across codebases.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/ashwnn/agent-config --skill nextjs-conventions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-conventions
Source: https://github.com/ashwnn/agent-config/tree/main/skills/nextjs-conventions
Command: npx skills add https://github.com/ashwnn/agent-config --skill nextjs-conventions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js 15 App Router conventions, TypeScript patterns, React component standards, and production-grade patterns are unified to improve code quality, consistency, and onboarding across Next.js applications.

Core Features & Use Cases

  • Standard directory and file patterns for Next.js 15 App Router projects, including layout, route handlers, API interactions, and component organization.
  • Server vs. client components guidance, server actions, data fetching patterns, caching, and revalidation rules to optimize performance and safety.
  • Use during code reviews or refactors to bring an existing project in line with established best practices.

Quick Start

Review your Next.js 15 project against the conventions outlined in this guide and begin applying the standard patterns to the codebase.

Frequently Asked Questions about nextjs-conventions

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

FAQPage Schema
How do I enforce Next.js 15 App Router conventions during a code review?

To enforce Next.js 15 App Router conventions during a code review, check for default server components usage, explicit 'use client' boundaries, proper server actions, and type-safe TypeScript patterns. This ensures codebase consistency and anti-pattern mitigation.

When should I use 'use client' directives in Next.js App Router?

You should use 'use client' directives in Next.js App Router to explicitly define client component boundaries only when client-side interactivity is required. Components default to server components otherwise, optimizing data fetching and security.

What are the best practices for data fetching and caching in Next.js 15?

Best practices for data fetching and caching in Next.js 15 involve utilizing server components for default data retrieval and applying explicit caching and revalidation rules. This approach optimizes performance and maintains safety across your application.

Can I use this to standardize TypeScript patterns in a new Next.js project?

Yes, you can use this to standardize TypeScript patterns in a new Next.js project. It applies type-safe patterns to app routing, route handlers, and component organization, improving code quality and onboarding for Next.js applications.

How do server actions and route handlers work in Next.js 15?

Server actions and route handlers in Next.js 15 work by processing server-side logic and API interactions within the App Router. They enforce type-safe patterns and standard directory structures for secure, optimized data mutations and requests.

Why do I need explicit boundaries for server and client components in Next.js?

Explicit boundaries for server and client components in Next.js are needed to separate server-side data fetching and security from client-side interactivity. This prevents anti-patterns, optimizes performance, and maintains clear component organization.