Start Next.js without breaking your React habits
Quick answer: Spin up create-next-app, learn the app/ folder contract (page, layout, public), wire global styles, and lean on next/image + next/font—then see why the default page is a Server Component until you add 'use client'.
Who this is for
Devs who know JSX but feel lost in the App Router file tree—especially Fullstack path learners who need Next for real deploys.
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)Read this when…
You want the official mental model plus a Scrimba cast for your first / route—not another generic “what is Next” essay.
Related Scrimba Courses
Type Next.js in the free App Router course
Mirror this page with interactive scrims, then continue on the Fullstack path.