skills.rest
artiefy
artiefyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-best-practices

Codify Next.js App Router best practices for server and client components.

2|1|Updated Dec 6, 2024
Search Tags:#performance#routing#next.js#app-router#server-components#data-fetching
One-click install
npx skills add https://github.com/artiefy/artiefy --skill nextjs-best-practices-artiefy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/artiefy/artiefy/tree/main/.agents/skills/nextjs-best-practices
Command: npx skills add https://github.com/artiefy/artiefy --skill nextjs-best-practices-artiefy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill captures and communicates Next.js App Router best practices to help teams implement scalable, maintainable architectures without reinventing the wheel.

Core Features & Use Cases

  • Server vs Client Component guidance to optimize rendering and data fetching.
  • Data fetching, routing patterns, and file-convention considerations including ISR and edge scenarios.
  • Use Case: Starting a new Next.js project, apply these principles to decide when to use server components, where to add client components, and how to structure routes for performance and clarity.

Quick Start

Start a new Next.js App Router project by defaulting to Server Components and adding Client Components only where interactivity is required, then apply the recommended data fetching and routing conventions to ensure optimal performance.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema
When should I use server components versus client components in Next.js App Router?▼

Default to Next.js server components for rendering and data fetching, adding client components only when interactive state or browser APIs are strictly required to optimize app performance.

What's the best way to structure routing and data fetching for a scalable Next.js architecture?▼

Structure scalable Next.js architecture by applying App Router file conventions for routing decisions and leveraging server-side fetching patterns to ensure optimal performance and maintainability across projects.

How do Incremental Static Regeneration and edge scenarios affect Next.js data fetching?▼

Next.js data fetching leverages Incremental Static Regeneration and edge scenarios as performance-oriented patterns to cache content efficiently and serve dynamic routes with minimal latency.

Does this Next.js App Router guidance apply to starting a new project from scratch?▼

Yes, starting a new Next.js App Router project involves defaulting to server components, strategically adding client components for interactivity, and applying routing conventions for immediate architectural clarity.

Why does defaulting to server components improve Next.js app performance?▼

Defaulting to server components improves Next.js performance by reducing client-side JavaScript bundles, executing data fetching securely on the server, and streamlining rendering for faster page loads.

Related Skills

Explore More Software Engineering Skills→
Quanby-IT-SolutionsQuanby-IT-Solutions
2

nextjs-app-router

Enforce Next.js 16 App Router conventions for pages, layouts, and components.

Official
Advanced
ngxtmngxtm

Next.js Rendering Strategies

Explain Next.js rendering strategies including SSG, ISR, SSR, and PPR.

Community
Intermediate
DexploarerDexploarer
7

nextjs-page-generator

Generate Next.js 13+ App Router pages, components, and API routes.

Community
Intermediate
MaciWPMaciWP
1

astro-react-integrator

Integrate React components into Astro projects with client hydration directives.

Community
Intermediate