FRONT END

Home › Glossary › Front End· 286 ·

Next.js

\\nekst jay-ess\\n.

Filed underFront EndSoftware Engineering

In brief · quick answer

Next.js is a React framework by Vercel that provides server-side rendering, static site generation, file-based routing, and API routes out of the box. It is the most popular production-grade React meta-framework.

§ 1 Definition

Next.js is an open-source React framework created by Vercel (originally ZEIT) that extends React with production-grade features: server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR), file-based routing, API routes, middleware, and built-in image/font/script optimizations. Next.js pioneered the App Router (released in 2023), which introduced React Server Components, nested layouts, streaming, and server actions as default patterns. This shifted the paradigm from client-rendered SPAs to server-first architectures. Next.js is the de facto standard for building React applications in production, used by companies like Netflix, TikTok, Notion, and Twitch.

§ 2 Rendering Strategies

Next.js supports four rendering modes. Static Site Generation (SSG) pre-renders pages at build time. Server-Side Rendering (SSR) renders pages on each request. Incremental Static Regeneration (ISR) combines static generation with periodic background revalidation. Client-Side Rendering (CSR) delegates rendering entirely to the browser. The App Router allows page-level and even component-level mixing of these strategies within the same application.

§ 3 App Router and File-Based Routing

The App Router (app directory) uses a file-system based routing convention where folders define routes, page.tsx defines the route UI, layout.tsx defines shared layouts, loading.tsx defines loading states, and error.tsx defines error boundaries. Nested layouts persist across navigations without re-mounting, and route groups allow logical organization without affecting the URL structure.

§ 4 Server Actions and Mutations

Server Actions are async functions marked with `'use server'` that run on the server but can be called from client components. They simplify form handling, data mutations, and revalidation of cached data. Actions support progressive enhancement (forms work without JavaScript), optimistic updates via `useOptimistic`, and automatic invalidation of Router Cache.

§ 5 Note

Common misunderstanding: Next.js is not just a static site generator. It is a full-stack framework with API routes, middleware, and server components. Calling it 'just React with SSR' misses its server-side capabilities, data fetching patterns, and optimization pipeline. Another misconception: Next.js requires Vercel to deploy. It works with any Node.js hosting (AWS, Netlify, Docker) via the standalone output mode.

§ 6 In code

```tsx
// app/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home',
};

export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  const posts = await data.json();
  
  return (
    <main>
      {posts.map(post => (
        <article key={post.id}>{post.title}</article>
      ))}
    </main>
  );
}
```

§ 7 Common questions

Q. Do I need Vercel to host Next.js?: A. No. Next.js can be deployed anywhere Node.js runs. Vercel is the most seamless option, but you can use AWS, Google Cloud, Netlify, Railway, or Docker with `next build` and `next start`.
Q. Should I use the Pages Router or App Router?: A. Use the App Router for new projects. It is the recommended approach and supports React Server Components, streaming, and nested layouts. The Pages Router is in maintenance mode.

Key takeaways

Next.js is the standard React meta-framework, providing SSR, SSG, ISR, and full-stack capabilities.
The App Router defaults to React Server Components, reducing client-side JavaScript.
Server Actions enable seamless server-side data mutations with progressive enhancement.

How Atomic Glue helps

Atomic Glue relies on Next.js as the foundation for our highest-performance web projects. We use its hybrid rendering strategies to deliver SEO-friendly, fast-loading sites that rank well and convert. Whether you need a blazing-fast marketing site or a complex web application, our Next.js expertise ensures you get the right rendering strategy for every page. It is a core pillar of our website development service.

Get in touch

# Next.js

Category: Front End (also: Software Engineering)

Author: Atomic Glue Development Team

## Definition

## Rendering Strategies

## App Router and File-Based Routing

## Server Actions and Mutations

## Note

## In code

## Common questions
Q: Do I need Vercel to host Next.js?
A: No. Next.js can be deployed anywhere Node.js runs. Vercel is the most seamless option, but you can use AWS, Google Cloud, Netlify, Railway, or Docker with `next build` and `next start`.
Q: Should I use the Pages Router or App Router?
A: Use the App Router for new projects. It is the recommended approach and supports React Server Components, streaming, and nested layouts. The Pages Router is in maintenance mode.

## Key takeaways

Next.js is the standard React meta-framework, providing SSR, SSG, ISR, and full-stack capabilities.
The App Router defaults to React Server Components, reducing client-side JavaScript.
Server Actions enable seamless server-side data mutations with progressive enhancement.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/next-js