skills.rest
MORTAKI0
MORTAKI0COMMUNITY
Explore all skills by this author →
GitHub

nextjs-architecture

Enforce server-first folder structure and data flow rules for Next.js App Router projects.

Updated Jan 1, 2026
Search Tags:#architecture#nextjs#design-principles#code-review#app-router#server-components#server-actions
One-click install
npx skills add https://github.com/MORTAKI0/doittimer --skill nextjs-architecture-mortaki0
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-architecture
Source: https://github.com/MORTAKI0/doittimer/tree/main/.codex/skills/nextjs-architecture
Command: npx skills add https://github.com/MORTAKI0/doittimer --skill nextjs-architecture-mortaki0

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent Next.js App Router projects lead to tangled code, unpredictable data flows, and brittle server/client boundaries. This Skill enforces a server-first approach, explicit feature boundaries, and a scalable folder structure to keep code maintainable as teams grow.

Core Features & Use Cases

  • Server-first defaults: Promote App Router usage with server components by default, reducing client bundle size and improving SEO.
  • Clear boundaries: Separate concerns into app/, features/, server/, and shared to prevent leakage of business logic into UI.
  • Data contracts and flow: Define stable DTOs and explicit data fetch/mutation paths that run at the server boundary.
  • Review and onboarding: Provide a reference checklist for architecture reviews and onboarding new features.

Quick Start

Audit your Next.js 16+ project against the recommended App Router structure and begin moving business logic into features/ or server/ folders.

Frequently Asked Questions about nextjs-architecture

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

FAQPage Schema
How do I enforce server-first architecture in Next.js App Router?▼

Enforce server-first architecture by using server components by default, organizing code into explicit app/, features/, server/, and shared folders to reduce client bundle size and prevent business logic leakage.

What's the best way to structure Next.js App Router folders for scalable features?▼

Structure App Router folders by separating concerns into app/, features/, server/, and shared directories. This enforces clear boundaries and keeps code maintainable as your team and project grow.

How do I review Next.js server and client component boundaries during code review?▼

Review boundaries by checking that business logic stays in server/ or features/ folders, verifying stable data contracts, and ensuring explicit data fetch and mutation paths run at the server boundary.

Why does my Next.js project have tangled code and unpredictable data flows?▼

Tangled code and unpredictable data flows stem from inconsistent App Router architecture. Applying a server-first approach with explicit feature boundaries and stable DTOs solves this maintainability problem.

Can I use this Next.js architecture approach for projects on version 16 and above?▼

Yes, this architecture approach targets Next.js 16+ projects. You audit your current App Router structure against the recommended layout and move business logic into features/ or server/ folders.

When should I avoid mixing business logic into Next.js UI components?▼

Avoid mixing business logic into UI components to prevent brittle server/client boundaries. Keep logic in features/ or server/ folders to maintain a server-first approach and ensure code scalability.

Related Skills

Explore More Software Engineering Skills→
JeffallanJeffallan
10.9k

nextjs-developer

Build Next.js 14+ apps with App Router, server components, and server actions.

Community
Advanced
stancodevstancodev

nextjs-architecture

Codify Next.js 16 App Router architectural decisions for routes, layouts, and server actions.

Community
Advanced
logistics00logistics00

modern-best-practice-nextjs

Apply Next.js App Router patterns for routing, data fetching, and metadata.

Community
Advanced
carlopezzutocarlopezzuto
3

architecture-patterns

Apply Clean Architecture, Hexagonal Architecture, and Domain-Driven Design to backend systems.

Community
Advanced