Next.js
The React Framework for the Web
The React framework for production. Build full-stack web apps with server rendering, file-based routing, and a first-class developer experience.
Next.js Setup Guide
Go from an empty folder to a running Next.js app. Every command is explained — what it does, why you need it, and how to confirm it worked.
Install Node.js
# Download the LTS installer from https://nodejs.orgWhat it does
Node.js is a JavaScript runtime — it lets your computer run JavaScript outside of a browser. It also ships with npm, the package manager you'll use to install everything else.
Why you need it
Next.js is a Node.js program. Without Node installed, none of the `npx`/`npm` commands below will exist on your machine.
Alternatives: Use a version manager like nvm (Mac/Linux) or fnm (cross-platform) to switch Node versions per project.
Install a code editor
# Download VS Code from https://code.visualstudio.comWhat it does
VS Code is a free, lightweight editor with excellent TypeScript, React, and Next.js support out of the box.
Why you need it
You'll spend most of your time here. Good autocomplete and inline errors dramatically speed up learning.
Alternatives: WebStorm, Cursor, Zed, or Neovim — any editor with a TypeScript language server works.
Create a Next.js app
npx create-next-app@latest my-appWhat it does
`create-next-app` scaffolds a complete project: folder structure, config files, and example code, all wired together correctly.
Why you need it
Setting up bundling, routing, and TypeScript by hand is error-prone. This is the officially supported, batteries-included starting point.
Alternatives: `pnpm create next-app` or `yarn create next-app` if you prefer those package managers.
Start the dev server
cd my-app
npm run devWhat it does
This launches a local development server with hot reloading — changes you save appear in the browser instantly.
Why you need it
You need a running server to see and test your app while you build it.
Alternatives: `npm run build && npm start` runs the optimized production build instead of the dev server.
Install Git
# Download from https://git-scm.comWhat it does
Git is version control — it tracks the history of your code so you can undo mistakes and collaborate. `create-next-app` already initializes a Git repository for you.
Why you need it
You'll need Git to push to GitHub, deploy to Vercel, and recover from mistakes. Most hosting and CI tools assume your project is a Git repo.
Alternatives: GitHub Desktop or your editor's built-in Git UI if you prefer not to use the command line.
Understand the project structure
What it does
Key folders: `app/` holds your routes (each folder = a URL, `page.tsx` = the page). `public/` holds static files like images. `next.config.ts` configures the framework. `package.json` lists your dependencies and scripts.
Why you need it
Knowing where things live saves hours of confusion later — you'll know exactly where to add a page, an image, or a setting.
Deploy to the web
# Push to GitHub, then import the repo at https://vercel.com/newWhat it does
Push your code to GitHub and connect the repo to Vercel. Every push then builds and deploys automatically, with a unique preview URL for each pull request.
Why you need it
Deploying early means you always have a shareable live link, and you catch build-only problems before they pile up.
Alternatives: Netlify, Cloudflare Pages, Railway, or a self-hosted Node server / Docker container.