Frontend

Next.js

A full-stack React framework: routing, SSR, static generation, API routes and server components.

Official siteRepository

What it is

Vercel (then Zeit) created Next.js in 2016 as a layer on top of React. It adds what React alone lacks: file-based routing, server rendering, image and font optimization, API endpoints.

The modern App Router is built on React Server Components: components run on the server by default, and client JS is added only where interactivity is needed ("use client"). Data can be read directly in server components, and mutations run through Server Actions.

Several modes are supported: SSR, SSG, ISR and partial prerendering. You can deploy to Vercel, or self-host on Node.js or Docker.

Use it when

  • A React site or app that needs SEO and fast first load.
  • Full stack in one repository: UI, server logic and API.
  • Content and e-commerce sites mixing static and dynamic pages.

Avoid it when

  • A simple static site: Astro or plain HTML is lighter.
  • A separate complex backend where Next.js would be just a shell: a Vite SPA is enough.
  • A team that does not want to track the framework's fast-moving APIs.

Key concepts

App Router
Routing by app/ folders with nested layouts, loading and error.
Server Components
Components rendered on the server that do not enter the client bundle.
Server Actions
Server functions called from forms and the client without a separate API.
Caching and revalidation
Data and page caching with revalidation by time or by tag.
Rendering modes
SSR, SSG, ISR and streaming depending on the page.

Example

A server component fetches data without client JS.

Cheat sheet

Next.js cheat sheet
Command or codeWhat it does
npx create-next-app@latestNew Next.js project
npm run devDev server
npm run buildProduction build
app/page.tsxThe page for the / route
app/blog/[slug]/page.tsxDynamic route
app/layout.tsxShared wrapper for pages
'use client'Makes a component a Client Component
export async function GET() { }Route Handler in route.ts
import Link from 'next/link'Client side navigation without a reload
import Image from 'next/image'Optimized images

How to learn it

  1. First take the React course on ShortLesson.
  2. Create a project with create-next-app using the App Router and TypeScript.
  3. Learn file based routing: page, layout, dynamic segments.
  4. Tell Server Components from Client Components and know the use client directive.
  5. Learn to fetch data on the server and cache it as your version's docs describe.
  6. Add Route Handlers and Server Actions for forms and APIs.
  7. Set up styles, images, metadata and SEO.
  8. Deploy the app and read the docs for the exact version you use.

Interview questions

  1. 1. How does SSR differ from SSG?

    SSR generates HTML on every request, SSG once at build time. SSG is faster and cheaper, SSR is for personalized or frequently changing data. ISR lets you refresh static pages on a schedule.

  2. 2. What are Server Components?

    Components that run only on the server. They can read a DB or API directly in code and add no JS to the browser. Interactive parts go into client components.

  3. 3. When do you need "use client"?

    When a component uses state, effects, event handlers or browser APIs. The rest stays on the server, so the bundle is smaller.

  4. 4. How does caching work in Next.js?

    Results of fetch and pages can be cached and revalidated by time or tag. Behavior is configured with fetch options and revalidation functions.

Interview questions from the bank

Comparisons with this technology

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform