Best practices · Stacks and tools
Next.js App Router Best Practices
Opens with creditsA current guide to building with the Next.js App Router, checked against the Next.js 16.4 docs. It covers Server and Client Components, the Cache Components model with use cache, securing Server Actions, proxy.ts, metadata, images and keeping your app up to date.
Written by Tauseef Fayyaz7 chapters, 33 practicesAbout 20 min27 quiz questionsReviewed 12 October 2026What you will learn
7 chapters · about 20 min
1Server and Client ComponentsWhere your code runs decides your bundle size, your security and your speed. These practices keep most work on the server and the browser bundle small.5 practices · 4 min
- 1Keep components on the server and add use client only at the leaves
- 2Await params, searchParams, cookies and headers
- 3Pass only the fields a Client Component needs
- 4Import server-only in modules that touch secrets or the database
- 5Start independent data requests in parallel
5 in this chapterOpen this chapter2Caching with Cache ComponentsNext.js 16 replaced implicit caching with an explicit, opt-in model. This chapter shows how to turn it on, what to cache, and how to refresh it.6 practices · 4 min
- 1Turn on Cache Components and Partial Prefetching
- 2Cache data and UI with use cache and always set a cacheLife
- 3Refresh cached data with updateTag or revalidateTag after a write
- 4Wrap uncached and request-time data in Suspense
- 5Call connection() before per-request random values and timestamps
- 6Lock marketing and blog routes static with ensureStatic
6 in this chapterOpen this chapter- Securing Server Actions and data accessServer Actions are public HTTP endpoints, even when they feel like local functions. These practices are taken from the official Next.js data security guide.5 practices · 3 minOpens with credits
- Routing, proxy.ts and error handlingHow to use the file conventions for loading and error states, and how to use proxy.ts, the renamed middleware, without making it a bottleneck.4 practices · 2 minOpens with credits
- Metadata and SEOHow to give every page a correct title, description, social image and sitemap entry using the built-in Metadata APIs.4 practices · 2 minOpens with credits
- Images, fonts and bundle sizePractical settings for next/image and next/font, and how to keep the JavaScript you ship small.5 practices · 3 minOpens with credits
- Configuration, environment and upgradesHabits that keep a Next.js project secure and current: environment variables, the React Compiler, and upgrading on a schedule.4 practices · 2 minOpens with credits
About this guide
These Next.js App Router best practices are written for Next.js 16.4, the current release as of October 2026. A lot of older Next.js advice no longer applies: middleware is now proxy, request APIs like params and cookies are async, and caching has moved to an explicit, opt-in model called Cache Components, built on the use cache directive. Following a 2024 tutorial today will lead you to deprecated APIs.
Every practice here is checked against the official nextjs.org documentation. The big ideas are simple. Render on the server by default and send only small interactive islands to the browser. Decide what to cache on purpose, with use cache and cacheLife, and stream everything else behind Suspense. Treat every Server Action as a public endpoint and check the user inside it.
Start with the first two chapters: Server Components and caching shape every page you build, and getting them right fixes most slow pages and surprise server bills. The later chapters cover security, routing with proxy.ts, SEO metadata, images and fonts, and how to keep a Next.js project current.
If you are building your first Next.js project for a portfolio or internship, this guide is a good review list to run through before you share the link.
Common questions
Is middleware deprecated in Next.js 16?
Yes. The middleware file convention was deprecated in Next.js 16 and renamed to proxy. Rename middleware.ts to proxy.ts and the exported function to proxy, or run npx @next/codemod@canary middleware-to-proxy . to do it for you. Proxy runs on the Node.js runtime by default.
What is use cache in Next.js?
It is a directive that caches the return value of an async function or component. It is part of Cache Components, which you turn on with cacheComponents: true. Pair it with cacheLife to set how long the result stays fresh and cacheTag so you can refresh it after a change.
What is the difference between updateTag and revalidateTag?
updateTag expires cached data immediately, so the user sees their own change right away; it works only in Server Actions. revalidateTag(tag, 'max') uses stale-while-revalidate, serving old content while fresh content loads, and works in Server Actions and Route Handlers. Use the first after a user edit and the second for webhooks and background updates.
Are Next.js Server Actions secure?
They have useful defaults: they accept only POST, check the Origin header against the host, use encrypted action ids, and unused actions are removed from the build. They are still public endpoints that anyone can call directly, so you must check authentication, authorization and input inside every action.
Why is params a Promise in Next.js?
Since Next.js 15, request-specific APIs such as params, searchParams, cookies() and headers() are asynchronous, and Next.js 16 removed the old synchronous access. This lets Next.js prerender as much of the page as possible and only wait for request data where you actually await it.
What is the latest version of Next.js?
As of October 2026 the latest release is Next.js 16.4, published on October 6, 2026. It ships with React 19.3 and recommends Cache Components for every app. The Next.js team has said Cache Components will become the default in Next.js 17.
Sources (7)
Checked against these, last on 12 October 2026.
- Next.js 16.4, Next.js blognextjs.org/blog/next-16-4
- Caching, Next.js docsnextjs.org/docs/app/getting-started/caching
- Revalidating, Next.js docsnextjs.org/docs/app/getting-started/revalidating
- How to think about data security in Next.js, Next.js docsnextjs.org/docs/app/guides/data-security
- proxy.js, Next.js docsnextjs.org/docs/app/api-reference/file-conventions/proxy
- Metadata and OG images, Next.js docsnextjs.org/docs/app/getting-started/metadata-and-og-images
- Image Component, Next.js docsnextjs.org/docs/app/api-reference/components/image
Related on Sefism
Picked from the other libraries by shared topics.
Roadmaps
See allCheat sheets
See allBest practices
See all- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
- Modern CSS Best PracticesModern CSS best practices: cascade layers, low specificity, custom properties, Grid and Flexbox layout, responsive design, container queries, :has() and nesting, plus Tailwind CSS v4 tips.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
- Web Application Security ChecklistA practical web application security checklist built on the OWASP Top 10:2025 and ASVS 5.0, with a severity and a way to verify every check.
Project structures
See all- MERN (MongoDB, Express, React, Node) project structureOne repository with a React app built by Vite in client/, an Express API with Mongoose in server/, and a tiny shared/ package that both import for request shapes and types. npm workspaces give you one install and one command to run both, and one example feature (clinic appointments) runs through every folder so you can see how a request travels from a form to MongoDB and back, and what tests, security and operations a real team adds around it.
- Next.js full stack (database and auth) project structureOne Next.js app that is both your frontend and your backend: pages render on the server, forms call Server Actions, and Route Handlers serve the few real HTTP endpoints (auth, webhooks, jobs, health). PostgreSQL through Prisma ORM, sign-in through Better Auth, background jobs with Inngest, and every database read goes through a small Data Access Layer that checks who is asking. The example features are invoices and clients for freelancers.
- .NET with Angular project structureThe common enterprise pairing: an ASP.NET Core Web API and an Angular app as two projects in one solution, exactly as the Visual Studio template lays them out. In development the Angular dev server proxies API calls to .NET; in production the API serves the built Angular files from one origin, so cookie sign-in with ASP.NET Core Identity just works. The Angular API client is generated from the API's OpenAPI document, so both sides always agree. The example features are orders and products.
Career questions
See all- What should I learn to become a web developer, and in what order?Learn the web platform first (HTML, CSS, JavaScript, how HTTP works), then one frontend framework, then a backend with a database, and build a real project at each stage. If you already know WordPress, you are not starting over: your HTML, CSS and PHP experience transfers.
- How do I choose between frontend, backend, mobile, cloud, cybersecurity, data and AI without trying them all for years?Do not try to pick the best field; pick the one whose daily problems you can tolerate on a bad day. Run a short, cheap experiment in two or three candidates, compare what you enjoyed doing rather than what sounded exciting, check the local job market, and commit for six to nine months.
- Should I become an AI engineer or stay a full stack developer?For most full stack developers this is not an either/or. AI engineering is largely full stack engineering plus models, evaluation and data. Keep your full stack strength, add AI features to real work, and move titles only when you have shipped AI work you can point to.
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com