The Joy of Using Next.js

Next.js is the G.O.A.T 🐐

I'm not exaggerating. After building with Create React App, then Gatsby, then rolling my own webpack configs (never again), Next.js feels like someone actually thought about the developer experience.

---

Why I Switched (And Never Looked Back)

The Old Way Was Painful

I used to spend days configuring:

• Webpack (nightmare fuel)
• Babel (so many plugins)
• Routing (react-router, so many hooks)
• SSR (or lack thereof)
• Image optimization (lol)

By the time I wrote my first component, I was already tired.

The Next.js Way

npx create-next-app@latest my-app
cd my-app
npm run dev

Done. Routing? Built in. SSR? Automatic. Images? Optimized. Production-ready? Yes.

---

What Actually Matters

1. File-System Routing

No more <Route path="/about" component={About} />. Just create pages/about.js. That's it. The URL just works.

2. API Routes

Need a backend? Create pages/api/hello.js:

export default function handler(req, res) {
  res.status(200).json({ name: 'Greg' });
}

Full-stack in one repo. No CORS. No proxy. Just works.

3. Image Optimization

import Image from 'next/image';

<Image 
  src="/photo.jpg" 
  alt="Greg" 
  width={800} 
  height={600} 
/>

Automatic:

• Lazy loading
• Responsive sizes
• WebP conversion
• Blur placeholder

I used to pay for image CDNs. Now I don't.

4. Static & Dynamic Together

// Static at build time
export async function getStaticProps() {
  const posts = await fetchPosts();
  return { props: { posts } };
}

// Or dynamic per request
export async function getServerSideProps() {
  const data = await fetchLiveData();
  return { props: { data } };
}

Choose the right rendering strategy for each page. Not one-size-fits-all.

---

The Little Things

Feature	Why It Matters
Fast Refresh	See changes instantly, keep state
Zero Config	Works out of the box
CSS Modules	Scoped styles by default
Font Optimization	@next/font is chef's kiss
Middleware	Redirects, auth, A/B testing
Edge Runtime	Deploy globally, run locally

---

When I Use It

• Marketing sites → Static export, blazing fast
• SaaS dashboards → Full-stack, API routes
• E-commerce → Image optimization is crucial
• Literally everything → It's my default now

---

The Verdict

Next.js isn't perfect. Nothing is. But it's the closest I've found to "just let me build things without fighting my tools."

Vercel (the company behind Next.js) ships features faster than I can learn them. App Router. Server Components. Turbopack. It's a lot, but it's all optional. Start simple, add complexity when you need it.

If you're still on CRA or rolling your own config, do yourself a favor:

npx create-next-app@latest

Your future self will thank you.

—Greg, a developer who values his time