Introduction to Next.js

Next.js is a React framework that adds routing, server-side rendering, and a lot of built-in tooling on top of React — so you can build production-ready apps without wiring everything up yourself.

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

Why Next.js?

• File-based routing — no router library needed
• Server and client components in the same app
• Built-in image, font, and script optimization
• Easy deployment on Vercel or any Node host

Your First Page

// app/page.js
export default function HomePage() {
  return <h1>Hello, Next.js!</h1>;
}

Common Errors & Troubleshooting

• npx create-next-app hangs or fails on an old Node version — Next.js requires a fairly recent Node.js (check the version shown in create-next-app's error, if any). Run node --version and update Node if it's several major versions behind.
• Port 3000 already in use — if another project's dev server is still running, Next.js will automatically try port 3001 instead and tell you in the terminal — check the actual URL it prints rather than assuming it's always :3000.
• Blank page with no error — double-check the file is actually named page.js (not Page.js, index.js, or similar) inside the app directory — Next.js's App Router only recognizes that exact filename as a route's page.