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

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.

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 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.

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.