10 Things Every Next.js Developer Should Know (But No One Tells You About)

You've already deployed your Hello World on Vercel, played around with getServerSideProps, and feel like a React master. But there are many more nuances behind the Next.js facade. Here are ten important things that will help you level up and not panic from sudden bugs 🧨

🚀 1. Static, server, or client loading — choose wisely

Next.js offers a choice of approaches to data loading:

• getStaticProps — static generation

• getServerSideProps — server render

• useEffect — client logic

🧠 Approach this like a chef: not every dish needs to be cooked to order (SSR), some should be cooked in advance (SSG), and others are served straight from the pantry (CSR).

🧩 2. API Routes are mini-server functions

The files in pages/api are not just code. These are real serverless functions. No Node server setup, instant launch. But remember:

🔧 Don't build a monolith. It's better to put the logic in separate modules.

🧭 3. File-based routing — magic without React Router

Want a new route? Just create a file in pages/, and voila — the route is ready.

For dynamic pages:

pages/blog/[slug].js

✨ And for complex cases, stub routes will come in handy pages/blog/[...slug].js

📦 4. Bundle size is a silent killer of performance

100 KB here, 50 KB there... and the page loads forever.

• Use Bundlephobia before installing new packages

• Apply dynamic() import:

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), { ssr: false });

⚡ This will save you from extra weight during the first render.

🌍 5. Vercel is the best friend, but not the only one

Next.js and Vercel are a perfect match. But no one forbids you to host your project on Netlify, AWS, or even Heroku.

🔥 However, if you want the most out of edge functions and fast image optimization, Vercel is still out of competition.

🖼️ 6. Image optimization is built-in — use it

The usual <img> is a thing of the past. Use the <Image> component:

import Image from 'next/image';
<Image src="/cat.jpg" alt="Cat" width={500} height={300} />

🪄 Support for lazy loading, adaptive sizes, CDN — as a bonus, it improves Lighthouse.

🔐 7. Middleware — a new control point

Now you can execute the logic until the query is completed:

import { NextResponse } from 'next/server';
export function middleware(req) {
  const loggedIn = checkAuth(req);
  if (!loggedIn) return NextResponse.redirect('/login');
  return NextResponse.next();
}

🛡️ It's like Express middleware, but on steroids.

💅 8. CSS Modules, Tailwind or Styled Components? Everything is supported

• CSS Modules — default

• Tailwind — for a utilitarian style

• Styled Components / Emotion — for lovers of components with styles

🚫 Just don't overuse inline styles.

🧪 9. Testing is not a side quest

Stop hoping for luck. Set up tests:

• Jest — for units

• React Testing Library — for components

• Cypress / Playwright — for end-to-end

🧘 Tests in Next.js are easy to set up and save a lot of time in the future.

🧠 10. App Router vs Pages Router

Since version 13, app/ has appeared — a new way of routing with:

• React Server Components

• Nested layouts

• loading.tsx, error.tsx

• Server Actions (in beta)

But the good old pages/ is still stable.

📌 Choose the approach for the project: reliability or flexible options.

🔄 Bonus: Hot reload works... almost always

If you broke down, try:

rm -rf .next
npm install

🤕 Or cry a little into the terminal if it doesn't help.

Conclusion 🧘‍♂️

Next.js is a powerful tool that gives you superpowers. But with great power comes the need to understand what's going on under the hood. These 10+ things will help you avoid pitfalls and build not just a website, but a full-fledged user experience.

🛠️ Whether you're working on a pet project or the next unicorn, every time you type npx create-next-app, remember: you're not just creating code. You're creating an impression.