Getting Started with Next.js
Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.
Last reviewed: March 2026.
Next.js is a framework built on top of React. It adds features like Routing, Rendering, and Data Fetching out of the box.
Who This Is For
Learners following the React or Next.js roadmap.
1. Installation
The easiest way to start is with create-next-app.
npx create-next-app@latest my-app
You'll be asked a few questions. We recommend:
- TypeScript: Yes (Standard in 2026)
- ESLint: Yes
- Tailwind CSS: Yes
- App Router: YES (This is crucial!)
2. Project Structure
If you're used to standard React (Vite/CRA), Next.js looks a bit different.
app/: This is where your routes live.public/: Static assets (images, fonts).next.config.js: Configuration file.
The app/globals.css file:
This is where your global styles live. Next.js supports CSS Modules and Tailwind out of the box.
Optimization built-in: Use the <Image> component (next/image) for automatic image optimization (resizing, WebP, lazy loading). Use the Font Module (next/font) to optimize font loading and avoid layout shift. Both are in the production checklist.
3. Your First Page
Open app/page.tsx. This file represents the / (home) route.
export default function Home() {
return (
<main>
<h1>Hello, Next.js!</h1>
</main>
);
}
It looks just like a React component! But there's a secret: It's running on the server.
Learn it on Scrimba: -> Interactive Lesson: The App Folder
The Next.js App Router
FreeBuild your first Next.js dashboard application interactively.
View on Scrimba (opens in a new tab)Choose This If
Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.