nextjs-best-practices

Next.js App Router uses server components by default to fetch data and render on the server, while client components handle interactivity. This skill provides the blueprint to enforce a server-first design and structure components properly.

Structure Next.js App Router data fetching by applying proper file conventions and routing patterns. This skill codifies reliable data fetching strategies and route organization to ensure scalable, high-performance user experiences.

Optimize Next.js App Router performance by applying caching strategies, managing metadata, and organizing routes effectively. This skill outlines performance patterns to satisfy scalable architecture requirements across typical use cases.

Use Next.js App Router server actions to handle mutations and enforce server-first architecture. This skill provides guidance on implementing server actions alongside proper metadata and caching patterns for scalable apps.

You can apply these Next.js App Router best practices to existing projects by reviewing your structure and adjusting component types, routing conventions, and data fetching strategies according to the provided blueprint.