skills.rest
Rok2025
Rok2025COMMUNITY
Explore all skills by this author →
𝕏@zhangrf0GitHub

nextjs-dev-guidelines

Enforce Next.js App Router development standards for components and data fetching.

Updated Feb 4, 2026
Search Tags:#typescript#architecture#best practices#tailwind css#nextjs#frontend development#app router
One-click install
npx skills add https://github.com/Rok2025/life-ops --skill nextjs-dev-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-dev-guidelines
Source: https://github.com/Rok2025/life-ops/tree/main/.agents/skills/nextjs-dev-guidelines
Command: npx skills add https://github.com/Rok2025/life-ops --skill nextjs-dev-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces a rigorous set of standards for Next.js App Router development, ensuring code quality, maintainability, and performance.

Core Features & Use Cases

  • Architecture Enforcement: Guides feature-based organization and Server/Client Component data fetching strategies.
  • Code Quality: Mandates strict TypeScript usage, API layer abstraction, and consistent styling with Tailwind CSS.
  • Use Case: A new developer joins a Next.js project and needs to understand the established best practices for creating components, fetching data, and structuring their code to align with the existing codebase.

Quick Start

Follow the Next.js App Router development guidelines for creating new components and features.

Frequently Asked Questions about nextjs-dev-guidelines

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

FAQPage Schema
What's the best way to structure a scalable Next.js App Router project?▼

Next.js App Router best practices enforce a feature-based architecture, separating Server and Client components to optimize data fetching strategies and maintain strict TypeScript code quality.

How do I fetch data correctly in Next.js Server and Client Components?▼

Data fetching in Next.js requires distinct strategies for Server and Client Components, utilizing an abstracted API layer to maintain separation of concerns and ensure optimal performance across the application.

Do I need strict TypeScript for frontend development in Next.js?▼

Strict TypeScript is mandatory for Next.js frontend development to enforce code quality, type safety, and maintainability, working alongside Tailwind CSS for consistent styling and architectural standards.

How does feature-based architecture work with Next.js App Router?▼

Feature-based architecture in Next.js App Router organizes code by domain features rather than technical roles, enforcing strict boundaries for component structure, routing, and error handling to build maintainable applications.

What are the limitations of using Tailwind CSS for Next.js App Router styling?▼

Tailwind CSS is mandated for consistent styling in Next.js App Router, but limitations arise if utility classes are not standardized across feature-based components, potentially leading to design inconsistencies and unmaintainable code.

Related Skills

Explore More Software Engineering Skills→
shazilk-devshazilk-dev

nextjs-frontend

Generate a Next.js 16 frontend scaffold with App Router, TypeScript, and Tailwind CSS.

Community
Intermediate
ringlochidringlochid

frontend-architecture-review

Map and assess React/TypeScript frontend architecture across routing, components, and state.

Community
Intermediate
koralliskorallis
90

standards-enforcement

Configure ESLint, Prettier, and Husky to enforce coding standards.

Community
Intermediate
simoabidsimoabid
1

nextjs-best-practices

Guide Next.js App Router development with component, data fetching, and routing best practices.

Community
Intermediate