skills.rest
Agentient
AgentientOFFICIAL
Explore all skills by this author →
GitHub

nextjs-app-router-file-conventions

Enforce Next.js App Router file conventions for pages, layouts, and API routes.

2|1|Updated Jan 31, 2026
Search Tags:#typescript#routing#nextjs#web-development#app-router#file-conventions
One-click install
npx skills add https://github.com/Agentient/vibekit --skill nextjs-app-router-file-conventions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-file-conventions
Source: https://github.com/Agentient/vibekit/tree/main/plugins/frontend-tools/skills/nextjs-app-router-file-conventions
Command: npx skills add https://github.com/Agentient/vibekit --skill nextjs-app-router-file-conventions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js App Router projects often diverge in how pages, layouts, and API routes are organized. This Skill enforces a consistent structure and clear boundaries to reduce confusion and onboarding time.

Core Features & Use Cases

  • Enforces root and nested route file conventions (layout.tsx, page.tsx) with optional loading.tsx and error.tsx.
  • Guides API route organization (route.ts) and global error boundaries.
  • Use Case: Start a Next.js 14+ App Router project with a predictable, scalable file layout for pages, layouts, and APIs.

Quick Start

Create the root app structure with layout.tsx and page.tsx, and add optional loading.tsx and error.tsx as needed.

Frequently Asked Questions about nextjs-app-router-file-conventions

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

FAQPage Schema
What file conventions are required for a Next.js App Router project?▼

Next.js App Router file conventions require layout.tsx and page.tsx for root and nested routes. Optional files include loading.tsx, error.tsx, not-found.tsx, and route.ts for API endpoints to ensure a predictable, scalable file layout.

How do I set up loading and error boundaries in Next.js 14 App Router?▼

To set up loading and error boundaries, add optional loading.tsx and error.tsx files to your route directories. These files create clear boundaries for UI states, reducing confusion and onboarding time across Next.js 14+ projects.

Does this Next.js file convention guidance apply to older versions like the Pages Router?▼

This file convention guidance applies specifically to Next.js 14+ App Router projects. It focuses on structuring pages, layouts, and API routes using the newer directory structure rather than the legacy Pages Router architecture.

What's the best way to organize API routes in a Next.js App Router project?▼

The best way to organize API routes is using the route.ts file convention. This structure enforces consistent API endpoint organization alongside global error boundaries, reducing confusion and onboarding time for Next.js 14+ projects.

Why do my Next.js App Router pages and layouts diverge in structure across different projects?▼

Next.js App Router pages and layouts diverge without enforced file conventions. Applying a consistent structure with required files like layout.tsx and page.tsx, alongside optional boundaries, reduces confusion and ensures a scalable file layout.

Related Skills

Explore More Software Engineering Skills→
tachfineamnaytachfineamnay

Frontend Architecture (Next.js)

Architect Next.js 14 apps with App Router, server and client components, and middleware routing.

Community
Advanced
prowler-cloudprowler-cloud
14.6k

nextjs-15

Guide Next.js 15 App Router structure with file conventions and data fetching.

Official
Intermediate
JaivishChauhanJaivishChauhan
6

typescript-patterns

Implement TypeScript generics and discriminated unions for type-safe Next.js state management.

Community
Advanced
jorggerojasjorggerojas
1

pages-router

Organize Next.js Pages Router pages under src/pages with dynamic routes and _app.tsx and _document.tsx configurations.

Community
Intermediate