skills.rest
jlpbiuma
jlpbiumaCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-app-router-patterns

Enforce Next.js 14+ App Router patterns with centralized data fetching via service layer.

Updated Mar 7, 2026
Search Tags:#typescript#frontend architecture#data fetching#nextjs#app router#react server components
One-click install
npx skills add https://github.com/jlpbiuma/agent-skills --skill nextjs-app-router-patterns-jlpbiuma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-patterns
Source: https://github.com/jlpbiuma/agent-skills/tree/main/nextjs-app-router-patterns
Command: npx skills add https://github.com/jlpbiuma/agent-skills --skill nextjs-app-router-patterns-jlpbiuma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces strict architectural patterns for Next.js 14+ App Router development, preventing common anti-patterns like direct data fetching or database access from the frontend.

Core Features & Use Cases

  • Centralized Data Fetching: All data requests must pass through the frontend/services/ layer.
  • Rendering Mode Guidance: Clear instructions on when to use Server Components, Client Components, Static, Dynamic, and Streaming.
  • File Convention Enforcement: Adherence to Next.js App Router file conventions for layouts, pages, loading, and error states.
  • Use Case: When building any new page or feature in the AI-Commerce frontend, use this Skill to ensure all data is fetched via the designated service layer and components are rendered appropriately.

Quick Start

Use the nextjs-app-router-patterns skill to create a new product page that fetches data using the productService.

Frequently Asked Questions about nextjs-app-router-patterns

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

FAQPage Schema
How do I structure data fetching in Next.js App Router to avoid direct database access?▼

Data fetching in the Next.js App Router should route exclusively through a dedicated frontend/services layer to maintain strict decoupled architecture, preventing raw fetch logic or direct database access inside React Server Components.

When should I use React Server Components versus Client Components in Next.js 14+?▼

React Server Components are used for static and dynamic data rendering on the server, while Client Components handle client-side interactivity, with streaming employed to progressively deliver UI states for faster initial loads.

What is the best way to manage parallel routes and layouts in Next.js App Router?▼

Managing parallel routes requires strict adherence to Next.js file conventions for layouts, pages, loading, and error states, ensuring architectural patterns enforce decoupled frontend development and proper rendering modes.

Does this approach enforce specific file conventions for error and loading states?▼

Next.js App Router file conventions are strictly enforced for layouts, pages, loading, and error states to govern frontend development and ensure architectural consistency across new features and pages.

Why should I use a centralized service layer for frontend data fetching?▼

A centralized service layer ensures all data requests pass through a single boundary, preventing common anti-patterns like direct database access or raw fetch logic within your Next.js App Router components.

Can I use raw fetch logic directly inside Next.js App Router components?▼

Raw fetch logic is prevented in Next.js App Router components to enforce strict architectural patterns and decoupled architecture, requiring all data fetching to process through a designated service layer.

Related Skills

Explore More Software Engineering Skills→
ehtbantonehtbanton

nextjs-page-generator

Generate Next.js 14 App Router page components with data fetching.

Community
Intermediate
MinhAnh-CorpMinhAnh-Corp

nextjs-app-router-patterns

Implement Next.js 14+ App Router patterns for Server Components, streaming, and parallel routes.

Official
Intermediate
soo-kate-yeonsoo-kate-yeon

moai-lang-typescript

Develop TypeScript 5.9+ applications with React 19, Next.js 16, and tRPC.

Community
Advanced
alex-voloshin-devalex-voloshin-dev
2

react-nextjs-patterns

Enforce canonical React and Next.js App Router patterns for rendering, data fetching, and component architecture.

Community
Advanced