How to Use Next.js: A Beginner’s Tutorial for Modern React Apps

Next.js is a React framework that adds routing, server-side rendering, and API routes out of the box. If you already know React, you can be productive in minutes. This tutorial walks through the essential steps to build and ship your first Next.js app.

1. Install and Start a Project

Run npx create-next-app@latest my-app and follow the prompts to enable TypeScript, Tailwind, and the App Router. Then cd my-app and npm run dev to launch the dev server at localhost:3000.

2. Learn File-Based Routing

Every folder inside app/ becomes a route. Create app/about/page.tsx and visit /about — no router configuration needed. Dynamic segments use brackets, such as app/blog/[slug]/page.tsx.

3. Fetch Data in Server Components

Components are server-rendered by default, so you can fetch data directly:

• Use async components with await fetch()
• Add "use client" only for hooks and event handlers
• Cache with fetch(url, { next: { revalidate: 60 } })

4. Add API Routes and Deploy

Create app/api/hello/route.ts to export a GET handler. When ready, push to GitHub and deploy on Vercel with zero configuration — it detects Next.js automatically.

Conclusion

Start small: one page, one route, one fetch. Once routing and server components click, the rest of Next.js — middleware, caching, image optimization — becomes easy to layer on.