Yiuno

Next.js

9 min read

Next.js

A React framework that lets you build full-stack web applications — handling both what the user sees (frontend) and what happens behind the scenes (backend) in one project.

What is Next.js?

React is a library for building user interfaces. It handles what things look like and how they respond to clicks, typing, and other interactions. But React alone doesn’t know how to serve pages to a browser, talk to a database, or make your site visible to search engines.1

Next.js is a framework built on top of React that adds everything React leaves out: routing (which URL shows which page), data fetching (getting information from servers or databases), rendering (deciding whether the server or the browser builds the HTML), and deployment optimisation.1

It’s built by Vercel, and it’s used in production by companies like Netflix, TikTok, and Twitch.2

In plain terms

If React is a set of LEGO bricks for building interfaces, Next.js is the instruction manual and baseplate — it gives you the structure, the conventions, and the plumbing so you can focus on what you’re actually building instead of figuring out how to wire everything together.

At a glance

How does Next.js work?

1. File-based routing

In Next.js, your folder structure is your URL structure. Create a file, get a page — no configuration needed.1

app/
├── page.tsx              → /
├── about/
│   └── page.tsx          → /about
├── blog/
│   ├── page.tsx          → /blog
│   └── [slug]/
│       └── page.tsx      → /blog/my-post (dynamic)
└── api/
    └── users/
        └── route.ts      → /api/users (API endpoint)

Think of it like...

A filing cabinet. The drawer is the domain, the folders are the URL segments, and each file labelled page.tsx is what someone sees when they open that folder. You don’t need a map to find things — the structure is the map.

Concept to explore

See file-based-routing for how layouts, dynamic routes, and route groups work in the App Router.

2. Server Components and Client Components

This is the biggest idea in modern Next.js. Every component is either a Server Component or a Client Component, and the difference determines where it runs.3

Server Component (default)Client Component ('use client')
Runs onThe serverThe browser
Can doFetch data, read databases, use secretsHandle clicks, track state, use browser APIs
Sends to browserHTML (no JavaScript)HTML + JavaScript
Good forContent, data display, layoutsForms, buttons, dropdowns, animations

By default, everything in Next.js is a Server Component. You only add 'use client' at the top of a file when that component needs interactivity.3

Think of it like...

A newspaper. The articles, headlines, and photos are Server Components — they’re printed at the press (server) and delivered ready to read. The crossword puzzle is a Client Component — it needs the reader (browser) to interact with it. You wouldn’t send the entire printing press to someone’s house just so they can do the crossword.

The key rule

Default to Server Components. Only use Client Components when you need useState, useEffect, onClick, or browser APIs like localStorage. This keeps your JavaScript bundle small and your pages fast.3

Concepts to explore

See server-components and client-components for deeper explanations with code examples.

3. Rendering strategies

Next.js gives you four ways to generate pages, and you can mix them in the same application:2

StrategyWhen HTML is builtBest for
Static (SSG)At build time, onceMarketing pages, docs, blogs
Server-side (SSR)On every requestDashboards, personalised content
Incremental (ISR)At build time, then refreshed in the backgroundProduct pages, news sites
Client-side (CSR)In the browserInteractive widgets, admin tools

Concept to explore

See rendering-strategies for how each strategy works under the hood and when to choose which.

4. Server Actions

Server Actions let you write functions that run on the server but are called directly from your UI — no API route needed. They’re used for form submissions, database writes, and any mutation.1

// app/actions.ts
'use server'
 
export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  await db.post.create({ data: { title } })
  revalidatePath('/blog')
}
// app/blog/new/page.tsx
'use client'
import { createPost } from '@/app/actions'
 
export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <button type="submit">Publish</button>
    </form>
  )
}

Think of it like...

A suggestion box. You write your suggestion (form data) and drop it in the box (call the Server Action). Someone in the back office (the server) reads it and takes action. You didn’t need to know where the back office is or how to get there — the box handled the delivery.

Concept to explore

See server-actions for validation, error handling, and optimistic updates.

Why do we use Next.js?

Five reasons

1. Full-stack in one project. Frontend, backend, and API routes live together. No separate server to build and deploy.1

2. SEO by default. Server-rendered HTML means search engines can read your content — unlike pure React, where the browser builds the page after loading JavaScript.2

3. Performance out of the box. Automatic code splitting, image optimisation, font optimisation, and route prefetching are built in.1

4. Flexibility. Mix static, server-rendered, and client-rendered pages in the same app. Choose the right strategy per page, not per project.

5. Ecosystem. TypeScript, Tailwind CSS, Prisma, and most React libraries work with zero or minimal configuration.

When do we use Next.js?

  • When you’re building a multi-page web application (not just a single interactive widget)
  • When SEO matters — blogs, marketing sites, e-commerce
  • When you want frontend and backend in one codebase
  • When you need different rendering strategies for different pages
  • When you want a structured, convention-based project instead of wiring everything together manually

Rule of thumb

If your project has more than one page and needs to be found by search engines, Next.js is almost always the right choice. If you’re building a purely internal dashboard behind a login with no SEO needs, plain React may be simpler.

How can I think about Next.js?

The Swiss Army knife

React is a blade — sharp, versatile, essential. But a blade alone doesn’t help you open a bottle or tighten a screw. Next.js is the Swiss Army knife: it takes that blade and adds a corkscrew (routing), a screwdriver (data fetching), a can opener (API routes), and a case to hold it all together (deployment). You could carry each tool separately, but the integrated package is what makes you effective in the field.

The restaurant kitchen (revisited)

In the restaurant analogy, React is the chef’s knife — the core tool for preparing dishes (UI). Next.js is the entire kitchen setup: the layout of stations (routing), the order tickets (data fetching), the pass where dishes are plated (rendering), and the service window where waiters pick up orders (API routes). The knife does the cutting, but the kitchen makes the restaurant work.

Concepts to explore next

ConceptWhat it coversStatus
server-componentsComponents that run on the server — no JS sent to browserstub
client-componentsComponents that run in the browser — for interactivitystub
file-based-routingHow folder structure becomes URL structurestub
server-actionsServer functions called directly from UIstub
rendering-strategiesSSG, SSR, ISR, CSR — when to use whichstub

Some of these cards don't exist yet

They’ll be created as the knowledge system grows. A broken link is a placeholder for future learning, not an error.

Check your understanding

Where this concept fits

Position in the knowledge graph 

graph TD
    SD[Software Development] --> CSM[Client-Server Model]
    CSM --> FE[Frontend]
    CSM --> BE[Backend]
    CSM --> API[APIs]
    FE --> NX[Next.js]
    FE --> HTML[HTML]
    FE --> CSS[CSS]
    FE --> JS[JavaScript]
    NX --> SC[Server Components]
    NX --> CC[Client Components]
    NX --> FBR[File-Based Routing]
    NX --> SA[Server Actions]
    NX --> RS[Rendering Strategies]
    style NX fill:#4a9ede,color:#fff

Related concepts:

  • backend — Next.js API routes and Server Actions blur the line between frontend and backend
  • apis — Next.js can both consume and expose APIs
  • databases — Server Components and Server Actions can query databases directly
  • client-server-model — Next.js is a concrete implementation of this model, where the framework manages both sides

Sources

Further reading

Resources

Footnotes

  1. Vercel. (2026). Next.js Documentation. Vercel. ↩ ↩2 ↩3 ↩4 ↩5 ↩6

  2. Wojciechowski, M. (2025). Complete Next.js 15 Guide. Wojciechowski.app. ↩ ↩2 ↩3

  3. Next.js. (2026). Server and Client Components. Vercel. ↩ ↩2 ↩3

Graph View

Backlinks