I come across a lot of projects built with Next.js that are full of use client and hooks written like it’s a standard React SPA. use client Abusing use client kills the benefits of React Server Components (RSC). If you’re choosing Next.js, keep this mindset: server-first, with client-side code as the exception. use client server-first Use the native API whenever possible — and read the documentation. The API is built by a team of engineers who know exactly what they’re doing. It solves most use cases by design. Here are some tips for React devs moving into Next.js: Don’t install Axios for SSR apps — unless you truly need interceptors. In most cases, the native fetch is a better choice: it's optimized, aware of server/client contexts, and supports built-in caching.
Avoid using generic form libraries on the client. Use native form actions with server actions, paired with validateRequest() and schema.parse() (Zod, Yup, Joi, etc). Only use them on the server. Use react-hook-form only if your form is really complex and client-heavy.
Don’t install SWR or React Query unless you have a clear need. Next.js already supports caching and revalidation with native fetch() and cache().
Default to server components whenever possible and avoid managing state on the client. The more logic and data you keep on the server, the less JS you ship to the client — simple as that. Of course, sometimes client-side code is unavoidable, but treat it as a last resort.
Use Suspense and the loading.tsx file inside routes — stop using spinners with client state. Next.js handles route-level async loading out of the box.
Drop styled-components completely. It’s no longer maintained, and it’s client-side by nature — requiring hacks to work properly with SSR. Just use Tailwind CSS — it comes preconfigured in most modern boilerplates anyway.
Leverage middleware.ts when you need authentication, redirects, or geolocation. It runs before the render phase, using Edge Runtime — zero render cost.
Finally, don’t use Next.js just for the routing. If all you need is file-based routes or if your app is mostly client-rendered, just use React + Vite. You’ll get faster builds, smaller bundles, and no SSR overhead. Don’t install Axios for SSR apps — unless you truly need interceptors. In most cases, the native fetch is a better choice: it's optimized, aware of server/client contexts, and supports built-in caching. Don’t install Axios for SSR apps fetch Avoid using generic form libraries on the client. Use native form actions with server actions, paired with validateRequest() and schema.parse() (Zod, Yup, Joi, etc). Only use them on the server. Use react-hook-form only if your form is really complex and client-heavy. Avoid using generic form libraries on the client. validateRequest() schema.parse() react-hook-form only Don’t install SWR or React Query unless you have a clear need. Next.js already supports caching and revalidation with native fetch() and cache(). Don’t install SWR or React Query fetch() cache() Default to server components whenever possible and avoid managing state on the client. The more logic and data you keep on the server, the less JS you ship to the client — simple as that. Of course, sometimes client-side code is unavoidable, but treat it as a last resort. Default to server components whenever possible Use Suspense and the loading.tsx file inside routes — stop using spinners with client state. Next.js handles route-level async loading out of the box. Use Suspense loading.tsx Drop styled-components completely. It’s no longer maintained, and it’s client-side by nature — requiring hacks to work properly with SSR. Just use Tailwind CSS — it comes preconfigured in most modern boilerplates anyway. Drop styled-components Leverage middleware.ts when you need authentication, redirects, or geolocation. It runs before the render phase, using Edge Runtime — zero render cost. Leverage middleware.ts Finally, don’t use Next.js just for the routing. If all you need is file-based routes or if your app is mostly client-rendered, just use React + Vite. You’ll get faster builds, smaller bundles, and no SSR overhead. Finally, don’t use Next.js just for the routing. Bonus tip: Learn the basics of RSC and understand what "Composable Streaming Architecture" actually means. That’s the only way to really use Next.js the way it was designed. Bonus tip:

This story contains new, firsthand information uncovered by the writer.

If You're Going to Use Next.js — At Least Use it Right

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps