Next.js Explained Simply: Pages, Routing & SEO
Next.js is React with superpowers: routing, server rendering and SEO built in. It's what most companies use for fast, Google-friendly React websites.
By Learn Refill Mentors · Updated
Why learn Next.js?
- Pages are server-rendered, so Google can read them
- Routing works just by creating folders
- Used by many top companies in production
1Create a Next.js project
The setup wizard asks a few questions — choose TypeScript, Tailwind and the App Router.
npx create-next-app@latest my-site
cd my-site
npm run dev2Routing is just folders
Every folder inside app with a page.tsx becomes a URL.
app/page.tsx -> /
app/about/page.tsx -> /about
app/blog/[slug]/page.tsx -> /blog/any-post3Server vs client components
Components are server components by default — fast and SEO-friendly. Add "use client" only when you need state, effects or click handlers.
"use client";
import { useState } from "react";
export default function LikeButton() {
const [likes, setLikes] = useState(0);
return <button onClick={() => setLikes(likes + 1)}>Like ({likes})</button>;
}4Fetch data on the server
Server components can be async and fetch data directly.
export default async function CoursesPage() {
const res = await fetch("https://api.example.com/courses");
const courses = await res.json();
return <ul>{courses.map((c) => <li key={c.id}>{c.title}</li>)}</ul>;
}5Add SEO metadata
Export metadata from a page to set its title and description for Google and social sharing.
export const metadata = {
title: "About Us | My Site",
description: "Learn who we are and what we do.",
};Common mistakes
- Adding "use client" to every file — you lose server rendering benefits
- Using the old pages folder and the new app folder together without reason
Practice task
Build a 3-page site (Home, About, Blog) with a dynamic blog/[slug] page and unique metadata for each page.
Frequently asked questions
Do I need to learn React before Next.js?
Yes. Next.js uses React components, so learn React basics first.