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.

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

// 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():

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:

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:

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):

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

Accessing /api/hello in the browser returns:

{ "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:

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):

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

Features	ReactJS	NextJS
Rendering	CSR (Client-Side)	SSR, SSG, ISR, CSR
SEO Optimization	No SEO (CSR)	SEO Friendly (SSR, SSG)
Routing	Manual (React Router)	File-based routing
Performance	Slower (CSR)	Faster with pre-rendering
API Handling	External APIs	Built-in API routes

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.