What Is Next.js? A Beginner's Guide

If your AI tool built you a React app with an app/ folder full of files called page.tsx and layout.tsx, it's a Next.js app. v0 produces Next.js by default, and it's a common choice for Claude Code and other tools too. Here's what it is and what it means for you.

React plus everything else

React builds interfaces. (What Is React?.) But a real app needs more: multiple pages and URLs, data loading, a server for private logic, fast first loads, and search-engine-friendly pages. React on its own leaves those decisions to you.

Next.js is a framework built on React, made by the company Vercel, that makes those decisions for you:

Routing — pages and URLs from your folder structure.
Server rendering — pages built on the server, so they arrive ready to read.
A backend — server code and API endpoints in the same project.
Optimisation — images, fonts, and code splitting handled automatically.

(What Is a Framework? explains frameworks in general.)

File-based routing

In Next.js, folders become URLs. With the App Router (the modern approach), each folder in app/ is a path segment, and a page.tsx inside it is the page:

app/
  page.tsx               →  /
  about/
    page.tsx             →  /about
  blog/
    page.tsx             →  /blog
    [slug]/
      page.tsx           →  /blog/any-post-name
  layout.tsx             →  wraps every page (header, footer)

A folder name in square brackets, like [slug], is a dynamic segment: one file handles every matching URL, and your code receives the value.

layout.tsx wraps pages with shared structure. Other special files include loading.tsx (shown while a page loads) and error.tsx (shown when something breaks).

You may also see the older Pages Router, with a pages/ folder instead of app/. It still works; new projects use app/.

Server components and client components

This is the concept that confuses people most.

By default, components in the app/ folder are server components: they run on the server, can read the database or secret keys directly, and send finished HTML to the browser. Their code never reaches the browser.

Components that need interactivity — clicks, typing, useState — must be client components, marked with a line at the top of the file:

"use client"

import { useState } from "react"
export function LikeButton() { /* … */ }

The rules of thumb:

Server components for fetching data and anything touching secrets.
Client components for anything the user interacts with.
Never put secrets in a "use client" file — it's sent to every visitor.

Errors like "You're importing a component that needs useState… mark it with 'use client'" mean exactly this: interactivity in a server component.

Backend code in the same project

Next.js apps can include server-side endpoints — route handlers — in files named route.ts:

app/api/plants/route.ts   →  GET/POST /api/plants

And server actions: functions marked "use server" that forms and buttons can call directly, without writing an API endpoint. Both run only on the server, so they can safely use your database and keys.

What "rendering" means

You'll see terms like static, dynamic, and SSR. They answer one question: when is the page's HTML built?

Static — at build time, once. Very fast; good for pages that are the same for everyone (a blog post, a marketing page).
Dynamic / server-side rendering — on each request. Needed for pages that depend on who's logged in or on fresh data.
Client-side — in the browser, by JavaScript, after the page loads.

Next.js picks automatically based on what your code does, and lets you override it. (Static vs Dynamic Websites.)

Running and deploying it

The standard commands, in package.json:

npm run dev     # development server at localhost:3000, reloads as you edit
npm run build   # production build — catches many errors dev mode doesn't
npm run start   # run the production build

Always run npm run build before deploying. It fails on type errors and other issues the dev server lets slide. (npm and package.json Explained.)

Next.js runs anywhere Node.js runs. Vercel is the default home, but self-hosting on a container or server works well once you know the few settings that matter. (Self-Hosting Next.js Without Vercel.)

Environment variables in Next.js

Next.js has one special rule: a variable whose name starts with NEXT_PUBLIC_ is copied into the browser code, visible to everyone. Others stay on the server. So NEXT_PUBLIC_SITE_URL is fine; NEXT_PUBLIC_STRIPE_SECRET_KEY is a leak. (What Is an Environment Variable?.)

EasySpawn runs Next.js apps as real Node.js servers in a persistent workspace — server components, route handlers, and server actions included — with managed Postgres, SSL, and your own domain. See how it works for AI-built apps or join the waitlist.