> For the complete documentation index, see [llms.txt](https://www.anandisheladiya.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.anandisheladiya.com/skills-and-experience/frontend/next.js-the-react-framework-for-production.md).

# Next.js – The React Framework for Production

### **Introduction**

Next.js is a powerful **React framework** that enables **server-side rendering (SSR)**, **static site generation (SSG)**, and **full-stack development** using JavaScript. Developed by **Vercel**, Next.js enhances React applications by improving performance, SEO, and scalability. It is widely used for building modern **web applications, static websites, e-commerce platforms, and enterprise-grade solutions**.

### **Why Use Next.js?**

Next.js is preferred over traditional React applications because of its:

*  **Improved Performance** – Optimized SSR, automatic static optimization, and image optimization.
*  **SEO Benefits** – Pages load faster with SSR and SSG, improving search engine rankings.
*  **Automatic Code Splitting** – Loads only the necessary code for each page.
*  **Hybrid Rendering Support** – Supports **Static Site Generation (SSG)**, **Server-Side Rendering (SSR)**, and **Incremental Static Regeneration (ISR)**.
*  **API Routes** – Enables back-end functionality directly within a Next.js project.
*  **Built-in CSS & Sass Support** – Styled-components, Tailwind CSS, and global styles are natively supported.
*  **Full-Stack Capabilities** – API routes enable Next.js to act as both a frontend and backend framework.

### **Core Features of Next.js**

#### **1. File-Based Routing**

Next.js uses a **file-system-based routing** approach, meaning pages are automatically mapped based on the files inside the `pages/` directory.

Example: Creating two pages – `index.js` and `about.js`.

```jsx
// pages/index.js
export default function Home() {
  return <h1>Welcome to Next.js!</h1>;
}

```

```jsx
// pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

```

**Result:**\
Visiting `/` will render `index.js`, and `/about` will render `about.js` without manually setting up routes.

#### **2. Server-Side Rendering (SSR)**

Next.js enables **server-side rendering**, which fetches data before rendering the page on the server.

Example of SSR using `getServerSideProps()`:

```jsx
export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();
  
  return { props: { post: data } };
}

export default function Post({ post }) {
  return <h1>{post.title}</h1>;
}

```

**Best for:** Real-time data, dynamic pages, and personalized content.

#### **3. Static Site Generation (SSG)**

Next.js allows **pre-rendering pages at build time** using `getStaticProps()`.

Example of SSG with external API data:

```jsx
export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  
  return { props: { posts } };
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

```

**Best for:** Blogs, marketing pages, documentation, and dashboards.

#### **4. Incremental Static Regeneration (ISR)**

Next.js allows **updating static content without rebuilding the entire site** using ISR.

Example of ISR using `revalidate`:

```jsx
export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const post = await res.json();

  return { props: { post }, revalidate: 10 }; // Revalidates every 10 seconds
}

export default function Post({ post }) {
  return <h1>{post.title}</h1>;
}

```

**Best for:** News websites, e-commerce stores, and content-heavy applications.

#### **5. API Routes – Full-Stack Capabilities**

Next.js allows you to create **backend functionality within the same project** using API routes.

Example of an API endpoint (`pages/api/hello.js`):

```jsx
export default function handler(req, res) {
  res.status(200).json({ message: "Hello from Next.js API!" });
}

```

Accessing `/api/hello` in the browser returns:

```json
{ "message": "Hello from Next.js API!" }
```

**Best for:** Handling authentication, working with databases, and processing forms.

#### **6. Built-in Image Optimization**

Next.js provides an optimized `<Image>` component for faster loading images.

Example of using the **next/image** component:

```jsx
import Image from "next/image";

export default function Profile() {
  return (
    <div>
      <h1>Profile Picture</h1>
      <Image src="/profile.jpg" width={200} height={200} alt="Profile Picture" />
    </div>
  );
}

```

**Benefits:** Automatic lazy loading, optimized image delivery, and better performance.

#### **7. Middleware for Custom Logic**

Middleware runs **before a request is completed**, allowing modifications like authentication checks.

Example: Redirecting users if not authenticated (`middleware.js`):

```jsx
import { NextResponse } from "next/server";

export function middleware(req) {
  const isAuthenticated = req.cookies.token;
  if (!isAuthenticated) {
    return NextResponse.redirect("/login");
  }
}

```

**Best for:** Authentication, logging, and request modifications.

### Next.js vs React.js

<table><thead><tr><th>Features</th><th>ReactJS</th><th>NextJS</th><th><select></select></th></tr></thead><tbody><tr><td>Rendering  </td><td>CSR (Client-Side)</td><td>SSR, SSG, ISR, CSR</td><td></td></tr><tr><td>SEO Optimization</td><td>No SEO (CSR)</td><td>SEO Friendly (SSR, SSG)</td><td></td></tr><tr><td>Routing</td><td>Manual (React Router)</td><td>File-based routing</td><td></td></tr><tr><td>Performance</td><td>Slower (CSR)</td><td>Faster with pre-rendering</td><td></td></tr><tr><td>API Handling</td><td>External APIs</td><td>Built-in API routes</td><td></td></tr></tbody></table>

### **Conclusion**

Next.js takes **React to the next level**, offering **server-side rendering, static site generation, and full-stack capabilities** out of the box. It is a great choice for developers looking to **build fast, SEO-friendly, and scalable web applications**. Whether you’re working on a **blog, e-commerce site, or enterprise solution**, Next.js provides the tools needed for modern web development.