← Back to chapters
01beginner

What is Next.js & Getting Started

Why Next.js exists, what problems it solves, and how to set up your first project.

Why Next.js?

Let me be real with you. When I started web development, I was using plain React with Create React App. It worked fine for small projects. But the moment I tried to build something serious, I hit walls everywhere:

• How do I handle routing? Install react-router, configure it manually.
• How do I do SEO? React renders on the client, so Google can't crawl it properly.
• How do I fetch data on the server? You need a separate Express/Node backend.
• How do I optimize images? Figure it out yourself.
• How do I deploy? Eject CRA, configure webpack, pray.

I was spending more time configuring tools than actually building features. That's when I found Next.js.

The Problem Next.js Solves

React is a UI library. It's incredible at rendering components. But it's JUST a library. It doesn't have opinions on routing, data fetching, server rendering, or deployment.

Next.js is a framework built on top of React. It makes all those decisions for you, with smart defaults that work for 95% of use cases. Think of it this way:

• React = engine
• Next.js = the full car (engine + steering + fuel system + dashboard)

You don't need to assemble the car yourself anymore.

💡

My honest take

I switched from Create React App to Next.js and never looked back. The developer experience is just on another level. Hot reload is instant, file routing saves SO much boilerplate, and the build system handles everything. If you're starting a new React project in 2025, there's no reason NOT to use Next.js.

Next.js vs Plain React (Real Talk)

FeatureWhat it doesWhen to use
RoutingInstall react-router, write configCreate a folder. Done.
SEOInvisible to Google (client-rendered)Server-rendered, fully crawlable
PerformanceEntire app loads as one bundleCode-split per page, lazy loaded
Data fetchinguseEffect + useState + loading stateAsync component, fetch directly
API backendSeparate Express/Node serverAPI routes inside same project
ImagesManual optimization, no lazy loadAuto WebP, responsive, lazy loaded
DeploymentBuild + configure server yourselfPush to Vercel or Docker. Done.
TypeScriptManual tsconfig setupZero-config, just rename to .tsx

Who Uses Next.js?

This isn't some niche framework. Next.js is used by:

• Vercel (they made it)
• Netflix (their jobs portal)
• TikTok (web app)
• Notion (marketing site)
• Hulu, Nike, Twitch, Washington Post
• Thousands of startups and indie devs

It's the most popular React framework, period. Over 120k stars on GitHub. If you learn it, you're learning something companies actually hire for.

When NOT to Use Next.js

I'll be honest, Next.js isn't always the right choice:

• Tiny single-page apps (a calculator, a todo list) - overkill, just use Vite + React.
• Mobile apps - use React Native instead.
• Non-React projects - if you prefer Vue, use Nuxt. If you prefer Svelte, use SvelteKit.
• Static sites with no dynamic content - Astro might be lighter.

But for anything that involves multiple pages, needs SEO, has a backend, or will grow over time? Next.js is the move.

🚀

Bottom line

If you know React (even basics), you already know 70% of Next.js. The framework adds routing, server rendering, and tooling on top of what you already know. You're not learning a new language. You're upgrading your React skills.

What Next.js Gives You (For Free)

Here's the full list of what you get out of the box when you choose Next.js:

• File-based routing - create a file, get a URL. No react-router config needed.
• Server-side rendering (SSR) - pages render on the server for fast load times and SEO.
• Static generation (SSG) - pre-build pages at compile time for blazing speed.
• API routes - full backend API without a separate server.
• Image optimization - automatic WebP, lazy loading, responsive sizes.
• Zero-config TypeScript - just rename .js to .tsx and go.
• Built-in CSS/Tailwind support - no webpack config nightmares.
• Middleware - run code before requests hit your pages (auth, redirects).
• Server Actions - mutate data from forms without writing API endpoints.
• Streaming & Suspense - show parts of the page as they load.
• Edge Runtime - run code at the CDN edge for ultra-low latency.

Setting Up Your First Project

Let's create a new Next.js project. Open your terminal and run:

Terminal
bash
1npx create-next-app@latest my-app --yes
2cd my-app
3npm run dev
4
5# The --yes flag uses recommended defaults:
6# ✔ TypeScript
7# ✔ ESLint
8# ✔ Tailwind CSS
9# ✔ App Router
10# ✔ Turbopack (default bundler now!)
11# ✔ Import alias @/*

Or if you want to customize, skip the --yes flag:

Terminal (interactive)
bash
1npx create-next-app@latest
2# Prompts:
3# What is your project named? → my-app
4# Would you like to use the recommended defaults?
5#   > Yes, use recommended defaults
6#   > No, customize settings
7#
8# If you customize:
9# TypeScript? → Yes
10# Linter? → ESLint (or Biome)
11# React Compiler? → No (experimental, skip for now)
12# Tailwind CSS? → Yes
13# src/ directory? → Yes
14# App Router? → Yes (ALWAYS yes)
⚠️

Always choose App Router

Next.js has two routing systems: Pages Router (old) and App Router (new, default since v13). This entire guide uses the App Router. If some tutorial uses 'pages/' directory or 'getServerSideProps', that's the old way.
🚀

Turbopack is now the default

Since Next.js 16, Turbopack (Rust-based bundler) is the default for both dev AND build. It's significantly faster than Webpack. If you somehow need Webpack, use 'next dev --webpack'. But honestly, just use Turbopack.

System Requirements

Before you start, make sure you have:

• Node.js 20.9+ (check with 'node -v')
• macOS, Windows, or Linux
• Any modern browser (Chrome 111+, Firefox 111+, Safari 16.4+)

Project Structure

After creation, here's what your project looks like:

Project Structure
text
1my-app/
2├── src/
3│   └── app/
4│       ├── layout.tsx      ← Root layout (wraps everything)
5│       ├── page.tsx        ← Homepage (renders at /)
6│       ├── globals.css     ← Global styles
7│       └── favicon.ico
8├── public/                 ← Static files (images, fonts)
9├── next.config.ts          ← Next.js configuration
10├── tsconfig.json           ← TypeScript configuration
11├── postcss.config.mjs      ← PostCSS (for Tailwind)
12├── eslint.config.mjs       ← ESLint configuration
13└── package.json
14
15# No tailwind.config needed! Tailwind v4 uses
16# @import "tailwindcss" in globals.css directly.
🚀

Key insight

The 'src/app/' directory IS your router. Every folder you create inside it becomes a URL path. The 'page.tsx' file inside a folder makes that path accessible. This is the core concept of Next.js routing.

Running Your App

Terminal
bash
1cd my-app
2npm run dev
3
4# Your app is now running at http://localhost:3000

That's it. You've got a full-stack React framework running with TypeScript, Tailwind, and hot reload. In the next chapter, we'll dive into how file routing actually works.

▶Watch and Learn

Next →

File-Based Routing (App Router)