From Zero to Hero in Next.js

NextJS - From Zero to Junior in 1 Day

Published:

From Zero to Junior in One Day: My First Real Dive into Next.js

I’ll be honest - when I first heard about Next.js, I thought it was just another React wrapper that would complicate things. Boy, was I wrong. After spending a solid day diving deep into it, I realized why developers rave about this framework. Let me share what I learned and hopefully save you some of the confusion I went through.

So, What Actually is Next.js?

Think of Next.js as React’s smarter older sibling. While React handles your UI beautifully, Next.js takes care of all the production headaches you didn’t even know you’d have. Here’s what caught my attention:

Server-Side Rendering (SSR) - Your pages load instantly because they’re already rendered on the server. No more blank white screens while JavaScript loads.

Static Site Generation (SSG) - Build once, serve everywhere. Perfect for blogs, portfolios, or any content that doesn’t change every second.

API Routes - This one blew my mind. You can build your entire backend inside your Next.js app. No separate Express server needed.

File-based Routing - Create a file, get a route. It’s that simple. Coming from React Router, this felt like magic.

Automatic Code Splitting - Your users only download what they need for each page. Smart!

Let’s Get Our Hands Dirty

Setting Things Up

The setup is refreshingly straightforward. Make sure you have Node.js installed (I’m using v18+), then:

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

In about 30 seconds, you’ll have a fully functional Next.js app running at http://localhost:3000. I remember my first time seeing that default page - it’s surprisingly polished for a starter template.

Understanding the Folder Structure

Here’s what you’ll see (and what confused me initially):

my-next-app/
├── pages/          # This is where the magic happens
│   ├── api/        # Your backend lives here
│   ├── _app.js     # Global app wrapper
│   └── index.js    # Your homepage
├── public/         # Static files (images, favicon, etc.)
├── styles/         # CSS files
└── package.json

The pages directory is your new best friend. Every .js file becomes a route automatically. Want a /about page? Create pages/about.js. Need a /contact page? Make pages/contact.js. It’s intuitive once you get used to it.

The Core Concepts That Actually Matter

Routing Made Simple

This was my “aha” moment. No more complex routing configurations:

// pages/index.js - this becomes your homepage "/"
export default function Home() {
  return <h1>Welcome to my Next.js journey!</h1>;
}

// pages/about.js - this becomes "/about"
export default function About() {
  return <h1>About me and my coding adventures</h1>;
}

The SSR vs SSG Dilemma

This part took me a while to grasp. Here’s how I think about it now:

Use SSG when your content doesn’t change often (like this blog post):

// This runs at build time - perfect for blog posts
export async function getStaticProps() {
  const posts = await fetchMyBlogPosts();

  return {
    props: { posts },
    revalidate: 3600, // Update every hour
  };
}

Use SSR when you need fresh data on every request:

// This runs on every request - use sparingly
export async function getServerSideProps() {
  const userSession = await getCurrentUser();

  return {
    props: { userSession },
  };
}

API Routes - Your Backend in Disguise

This feature genuinely surprised me. You can build a complete API without leaving your Next.js app:

// pages/api/hello.js
export default function handler(req, res) {
  if (req.method === "POST") {
    // Handle POST request
    return res.status(200).json({ message: "Data received!" });
  }

  // Handle GET request
  res.status(200).json({ message: "Hello from my API!" });
}

Access it at /api/hello. No Express server, no additional configuration. Just works.

Dynamic Routes (The Bracket Magic)

Want to create pages for individual blog posts? Use square brackets:

// pages/posts/[slug].js
import { useRouter } from "next/router";

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>You're reading: {slug}</h1>;
}

Now /posts/my-first-post and /posts/learning-nextjs both work automatically.

Styling Without the Headaches

Next.js gives you several options, and I’ve tried them all:

CSS Modules (My Personal Favorite)

/* styles/Home.module.css */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.title {
  color: #333;
  font-size: 2rem;
}
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>My awesome homepage</h1>
    </div>
  );
}

No more class name conflicts. Each component gets its own scoped styles.

Global Styles

// pages/_app.js - This wraps your entire app
import "../styles/globals.css";

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

React Refresher (Because We All Need It)

If you’re coming from vanilla JavaScript or jQuery, here’s what you need to know:

Components Are Just Functions

function WelcomeMessage({ name, role }) {
  return (
    <div>
      <h2>Hey {name}!</h2>
      <p>Welcome to the {role} team.</p>
    </div>
  );
}

// Use it like this:
<WelcomeMessage name="Stavros" role="development" />;

State Management (useState Hook)

import { useState } from "react";

export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  const [isLiked, setIsLiked] = useState(false);

  const handleLike = () => {
    if (isLiked) {
      setLikes(likes - 1);
    } else {
      setLikes(likes + 1);
    }
    setIsLiked(!isLiked);
  };

  return (
    <button onClick={handleLike}>
      {isLiked ? "❤️" : "🤍"} {likes} likes
    </button>
  );
}

Deployment (The Easy Part)

I’ve deployed Next.js apps on several platforms, but Vercel (made by the Next.js team) is ridiculously simple:

  1. Push your code to GitHub
  2. Connect your GitHub repo to Vercel
  3. Watch it deploy automatically

Seriously, it takes about 2 minutes. Every time you push to main, it redeploys. No server management, no configuration files, no headaches.

My Honest Take After One Day

Next.js isn’t just hype - it genuinely solves real problems. The file-based routing alone saved me hours of configuration. The built-in API routes mean I can prototype full-stack apps without spinning up a separate backend.

Is it perfect? No. The learning curve can be steep if you’re new to React. The documentation, while comprehensive, sometimes assumes you know more than you do. And yes, there are moments when the “magic” feels a bit too magical.

But after building my first real project with it, I get why it’s become so popular. It’s React, but with all the production concerns handled for you.

My advice? Don’t try to learn everything at once. Start with basic pages and routing, then gradually add SSG, API routes, and more advanced features as you need them.

Next.js turned out to be that rare framework that actually lives up to its promises. Now I need to figure out what to build next…

Happy coding! 🚀

Time to put this knowledge to work on some real projects!

Code with passion, create with purpose!