skills.rest
Levironexe
LevironexeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Next.js App Router

Standardize Next.js App Router project structure into app, components, lib, and actions directories.

1|Updated May 2, 2026
Search Tags:#react#next.js#server actions#app router#architecture enforcement#code refactor#separation of concerns
One-click install
npx skills add https://github.com/Levironexe/architect --skill next-js-app-router-levironexe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Next.js App Router
Source: https://github.com/Levironexe/architect/tree/main/skills/stacks/nextjs-app-router
Command: npx skills add https://github.com/Levironexe/architect --skill next-js-app-router-levironexe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js App Router projects often drift into inconsistent folder structure, bloated route files, misplaced data-access code, and risky refactors where it’s unclear what belongs where.

Core Features & Use Cases

  • Enforces App Router structure: Keeps route segments thin using the Next.js conventions for app/layout.tsx, app/page.tsx, app/loading.tsx, app/error.tsx, and route.ts.
  • Separates concerns safely: Directs routing to app/, shared UI to components/, and server/data access to lib/ with a clear division for Server Actions in actions/.
  • Adds guardrails against common failure modes: Prevents client/server boundary mistakes (use client), discourages direct DB/API calls in pages or route handlers, and standardizes error handling and security practices.

Use case: You inherit a Next.js codebase where pages contain data fetching, components mix business logic, and Server Actions aren’t organized—this skill guides a safe, phased reorganization into app/, components/, lib/, and actions/ so the refactor is maintainable and less error-prone.

Quick Start

Ask your coding agent to reorganize the project into the enforced app/components/lib/actions layout and rewrite any mislocated DB calls, Server Actions, and client/server boundaries to match the skill rules.

Frequently Asked Questions about Next.js App Router

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

FAQPage Schema
How do I separate Server Actions and data access from UI components in Next.js App Router?▼

To separate Server Actions and data access in Next.js App Router, move database and external SDK usage into lib/, place mutations in actions/ with 'use server', and keep shared UI in components/. Route segments in app/ should only compose and call these libraries.

What is the correct folder structure for a Next.js App Router refactor?▼

A correct Next.js App Router refactor uses app/ for routing segments, components/ for shared UI, lib/ for server-side data access, and actions/ for Server Actions. This separation enforces file-convention boundaries and keeps route files thin.

How to prevent client bundling of server secrets in Next.js?▼

To prevent client bundling of server secrets in Next.js, avoid direct database or API calls in pages and route handlers. Centralize server-side data access into lib/ and ensure mutations use actions/ with 'use server' to enforce the client/server boundary.

Where should error.tsx and loading.tsx boundaries go in a Next.js App Router project?▼

In a Next.js App Router project, error.tsx, loading.tsx, and layout.tsx boundaries belong directly inside the app/ directory alongside page.tsx. These file conventions keep route segments structured and standardize error handling.

Can I refactor a bloated Next.js page without breaking the client/server boundary?▼

Yes, you can refactor a bloated Next.js page by moving business logic and data fetching into lib/, extracting mutations into Server Actions in actions/, and reserving the page file for UI composition. This prevents 'use client' boundary mistakes.

Why do my Next.js route files contain business logic and how do I fix it?▼

Next.js route files contain business logic when data access and mutations are misplaced. Fix this by moving DB calls to lib/, using actions/ for Server Actions, and ensuring app/ route segments only compose components and call centralized libraries.

Related Skills

Explore More Software Engineering Skills→
TwuanMinnTwuanMinn

nextjs-supabase-auth

Integrate Supabase Auth with Next.js App Router for cookie-based session management.

Community
Advanced
omerakbenomerakben
1

nextjs-app-router

Instrument Next.js App Router apps with PostHog analytics for client and server events.

Community
Advanced
AgentientAgentient
2

nextjs-app-router-file-conventions

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

Official
Intermediate
sebguevarasebguevara

nextjs-app-router-patterns

Structure Next.js 14+ apps with App Router patterns for SSR, SSG, and Server Actions.

Community
Advanced