Next.js 1: What Is Next.js?
easy⏱ 5 mincoursenextjs
A framework, not just a library
React is a library for building UI — it doesn't decide how pages are routed, rendered, or bundled. Next.js is a meta-framework: it wraps React and adds conventions for routing (the app/ folder), rendering (Server Components, SSR, SSG), and build tooling (bundling, code-splitting, image/font optimization). You write the same JSX and hooks you already know; Next.js decides when and where that code runs.
// Plain React (Vite/CRA) — you wire up everything yourself
// main.tsx
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App />);
// Next.js — the framework wires it up for you
// app/page.tsx
export default function HomePage() {
return <h1>Hello, Next.js</h1>;
}
What Next.js adds on top of React
Compared to a plain React SPA, Next.js gives you file-based routing (a file in app/ becomes a URL — no react-router config), server rendering (pages can render on the server for faster first paint and better SEO), and zero-config bundling (code-splitting, image/font optimization, and a production build happen automatically via next build).
Build your homepage
Create a HomePage component that returns an <h1> with your site's name and a <p> tagline. Render it from App and keep export default App so the preview can display it.