skills.rest
Mohamedghaly140
Mohamedghaly140COMMUNITY
Explore all skills by this author →
Website𝕏@mohamedghaly140GitHub

modern-best-practice-nextjs

Guide Next.js App Router projects with server components and server actions.

Updated Apr 12, 2026
Search Tags:#nextjs#seo#app-router#server-components#server-actions#frontend-architecture
One-click install
npx skills add https://github.com/Mohamedghaly140/sg-shop-web --skill modern-best-practice-nextjs-mohamedghaly140
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modern-best-practice-nextjs
Source: https://github.com/Mohamedghaly140/sg-shop-web/tree/main/.claude/skills/modern-best-practice-nextjs
Command: npx skills add https://github.com/Mohamedghaly140/sg-shop-web --skill modern-best-practice-nextjs-mohamedghaly140

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps developers structure and implement Next.js projects using the App Router with established, scalable best practices to improve maintainability and performance.

Core Features & Use Cases

  • App Router-based architecture: Organize routes with nested layouts and route groups for scalable projects.
  • Server Components-first: Default to server components to maximize performance and simplicity; add 'use client' where necessary.
  • Data fetching and mutations: Use server actions for mutations and server components for data fetching; avoid client-side fetch in effects for data integrity.
  • UI State patterns: Provide route-level loading and error handling with Suspense boundaries.
  • SEO and metadata: Leverage the Metadata API and static metadata where possible to optimize pages.

Quick Start

Start a new Next.js project with App Router enabled and apply these guidelines to structure app/, routes, and data flows.

Frequently Asked Questions about modern-best-practice-nextjs

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

FAQPage Schema
How do I structure a scalable Next.js App Router project?▼

Structure your scalable Next.js App Router project using nested layouts and route groups to organize routes, maximizing maintainability for complex application architectures.

When should I use server components in Next.js?▼

Use Next.js server components by default to maximize performance and simplicity, adding the 'use client' directive only where client-side interactivity is strictly necessary.

How do I handle data fetching and mutations in Next.js?▼

Handle Next.js data fetching using server components and execute mutations via server actions, avoiding client-side fetch in effects to ensure complete data integrity.

What's the best way to manage loading and error UI states in Next.js?▼

Manage Next.js loading and error UI states by implementing route-level Suspense boundaries, providing proper loading and error handling patterns for your application.

How do I optimize SEO with the Next.js Metadata API?▼

Optimize SEO with the Next.js Metadata API by leveraging static metadata where possible to generate optimized page tags and improve overall search engine visibility.

Does this Next.js architecture guide work for refactoring existing projects?▼

Yes, this Next.js architecture guide applies to both new projects and refactors seeking improved routing structure, data fetching strategy, and SEO optimization.

Related Skills

Explore More Software Engineering Skills→
flavien-iaflavien-ia
34

add-i18n

Configures internationalization for Next.js App Router projects using the next-intl library with SEO-friendly locale routing.

Community
Advanced
ionmidoriionmidori

optimizing-nextjs-architecture

Implement Next.js App Router patterns with Server Components and Zod-validated Server Actions.

Community
Advanced
vekzz-devvekzz-dev
3

ui-components

Integrate server-side UI component libraries into Thymeleaf and HTMX web applications.

Community
Intermediate
wsimmondswsimmonds
109

nextjs-app-router-fundamentals

Migrate Next.js Pages Router projects to App Router conventions.

Community
Basic