What is Next.js? How to Install and Build Your First Next.js Project (2026)
Next.js explained from scratch: what it is, how to install it, and how to build your first page — step by step. Covers the App Router, file-based routing, and server vs client components. Beginner guide for 2026.
Next.js is the most popular framework for building web applications with React. It takes care of routing, page rendering, image optimisation, and deployment — so you can focus on building your product rather than configuring infrastructure.
This is the website framework behind explainx.ai, Vercel's own site, and thousands of production apps. If you want to build real websites and web apps in 2026, Next.js is the foundation worth learning.
What Next.js adds over plain HTML/CSS
Plain HTML/CSS
Next.js
One file = one page
Automatic routing from folder structure
Manual <script> includes
Component system with imports
No built-in data fetching
async server components fetch data directly
Static files only
Mix of static pages, server-rendered pages, and APIs
Manual image handling
<Image> component with auto-optimisation
Deploy manually
git push → deploy to Vercel automatically
Prerequisites
You need Node.js installed. Check:
bash
node --version
If you get command not found, follow the Node.js install guide first. You need Node.js 18.17 or higher for Next.js 15.
Step 1: Create your first Next.js project
Next.js provides a CLI tool called create-next-app that scaffolds everything for you. Run:
bash
npx create-next-app@latest my-nextjs-app
You'll be asked several questions. For a beginner setup, answer like this:
snippet
Would you like to use TypeScript? → Yes
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → Yes
Would you like your code inside a `src/` directory? → No
Would you like to use App Router? → Yes
Would you like to use Turbopack for next dev? → Yes
Would you like to customise the import alias? → No
export default function HomePage() — every page.tsx must export a default function
The function returns JSX — HTML-like syntax with JavaScript inside curly braces
The className attributes are Tailwind CSS utility classes
Step 5: Create a new page
Add an About page. Create a new folder and file:
bash
mkdir app/about
Create app/about/page.tsx:
tsx
exportdefaultfunctionAboutPage() {
return (
<mainclassName="min-h-screen p-8 max-w-2xl mx-auto"><h1className="text-3xl font-bold mb-6">About</h1><pclassName="text-gray-600 leading-relaxed">
This is my first Next.js project. I built it by following a beginner guide.
</p></main>
);
}
Go to http://localhost:3000/about — the page is live. No configuration needed. The folder name becomes the URL.
Step 6: Add a shared layout
The app/layout.tsx file wraps every page in your app. This is where you put things that appear on every page — navigation, footers, font loading, meta tags.
Now every page has the nav bar — and you only wrote it once.
Step 7: Server vs Client components
This is the most important concept in the App Router.
Server components (the default) — render on the server. Can fetch data directly. Cannot use browser APIs (window, document) or React hooks (useState, useEffect).
Client components — render in the browser. Can use browser APIs and React hooks. Add "use client" at the top of the file.
Rule of thumb: Start with server components (the default). Only add "use client" when you need interactivity or browser APIs.
Visit http://localhost:3000/posts. It fetches and displays real data — no loading state, no client-side JavaScript fetch. The data is fetched on the server and the HTML arrives ready.
Step 9: Dynamic routes
Create a route that accepts a variable segment — like a blog post URL.
npm run dev # Start development server (with hot reload)
npm run build # Build for production
npm run start # Start the production server
npm run lint # Check for code issues
Deploy to Vercel in 2 minutes
Vercel is made by the same team that makes Next.js. Deploying takes two steps:
