Next.js App Router Best Practices & Hidden Features
DevelopmentWe scoured X for the absolute best tips from Vercel engineers and core community members on how to actually use the Next.js App router effectively.
The App Router Changes Everything.
If you are coming from the Pages router, the mental model shift required for the Next.js App Router can be daunting. The separation of Server Components (RSC) and Client Components completely changes how we structure our applications.
Default to the Server
By default, everything in the app/ directory is a Server Component. Keep it this way for as long as possible. Fetch your data natively here without useEffect. Only drop down to "use client" when you absolutely need interactivity (like onClick handlers or useState).
Pro tip: Keep your Client Components at the very leaves of your component tree.
Server Actions
Say goodbye to writing separate API routes just to handle a basic form submission. With Server Actions, you securely mutate data right from your component.
