Next.js Mastery

Introduction to Next.js

Learn Next.js fundamentals and why it's essential for production React apps

Tags:

nextjsmeta-frameworkfull-stack

80 minutes

Next.js is a meta-framework built on top of React. It provides structure, conventions, and powerful features like Server-Side Rendering (SSR), Static Site Generation (SSG), and API routes—everything you need for production applications.

Why Next.js?

Problems with Plain React

Building a production React app from scratch requires:

Bundler configuration (Webpack)
Routing system
Server setup
Optimization configuration
Code splitting strategy

This is complex and error-prone.

Next.js Solutions

Next.js provides:

File-based routing – Routes from folder structure
Built-in optimization – Automatic code splitting, image optimization
Server components – Render on server, save bandwidth
API routes – Backend endpoints in the same codebase
SSG & SSR – Generate pages at build or request time
Full-stack – Frontend and backend together

Senior Developer Wisdom

In 2024-2026, Next.js dominates the React ecosystem. Most production React apps use Next.js. Learning React alone isn't enough for production work—you need Next.js.

Pages and Routing

App Router (Modern)

Next.js uses a file-based routing system:

javascript

app/
  page.tsx              → /
  about/
    page.tsx            → /about
  blog/
    page.tsx            → /blog
    [slug]/
      page.tsx          → /blog/:slug

Creating a Page

typescript

// app/page.tsx
export default function Home() {
  return <h1>Welcome to Next.js</h1>;
}

// app/about/page.tsx
export default function About() {
  return <h1>About Us</h1>;
}

Dynamic Routes

typescript

// app/blog/[slug]/page.tsx
interface Props {
  params: { slug: string };
}

export default function BlogPost({ params }: Props) {
  return <h1>Post: {params.slug}</h1>;
}

// Generate static pages at build time
export async function generateStaticParams() {
  return [
    { slug: "first-post" },
    { slug: "second-post" }
  ];
}

Server vs Client Components

Server Components (Default)

typescript

// app/server-component.tsx
export default async function ServerComponent() {
  const data = await fetch("/api/data");
  
  return <div>{data}</div>;
}

Server components:

Run only on the server
Access databases directly
Don't ship JavaScript to the browser
Perfect for data fetching

Client Components

typescript

"use client";  // Mark as client component

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Client components:

Run in the browser
Use hooks and interactivity
Access browser APIs

Pro Tip

Use server components by default. Only mark components as "use client" when they need interactivity. This reduces JavaScript sent to the browser.

Rendering Strategies

Static Generation (SSG)

typescript

// Cached, generated at build time
export const revalidate = 3600;  // Revalidate every hour

export default async function Page() {
  const data = await fetch("/api/data");
  return <div>{data}</div>;
}

Server-Side Rendering (SSR)

typescript

// Generated on every request
export const dynamic = "force-dynamic";

export default async function Page() {
  const data = await fetch("/api/data", {
    cache: "no-store"
  });
  return <div>{data}</div>;
}

Incremental Static Regeneration (ISR)

typescript

// Static but revalidate periodically
export const revalidate = 60;  // Revalidate every 60 seconds

export default async function Page() {
  const data = await fetch("/api/data");
  return <div>{data}</div>;
}

Common Pitfall

Choosing the wrong rendering strategy affects performance. SSG is fastest but requires rebuild. ISR is a great middle ground for content sites.

Image Optimization

typescript

import Image from "next/image";

export default function Page() {
  return (
    <Image
      src="/image.png"
      alt="Description"
      width={800}
      height={600}
      priority  // Load immediately
    />
  );
}

Next.js Image component:

Lazy loads images
Responsive
Automatic format conversion
Mobile optimization

Layout System

typescript

// app/layout.tsx (root layout)
export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <header>Navigation</header>
        <main>{children}</main>
        <footer>Footer</footer>
      </body>
    </html>
  );
}

// app/blog/layout.tsx (blog-specific layout)
export default function BlogLayout({ children }) {
  return (
    <div className="blog-layout">
      <aside>Categories</aside>
      <main>{children}</main>
    </div>
  );
}

Layouts wrap pages, reducing duplication.

Next.js Fundamentals

Key Takeaways

Next.js is a production-ready framework for React
Server components reduce JavaScript and improve performance
File-based routing is cleaner than manual router setup
Choose rendering strategy based on content (SSG, SSR, ISR)
Next.js handles optimization automatically

Next, we'll dive deep into the App Router and advanced patterns!

Have you finished this guide?

Marking it complete updates your roadmap progress percentage.

React Interview Cracking Guide

App Router Fundamentals

Loading content…

Back to Roadmap

Next.js Mastery

Introduction to Next.js

Learn Next.js fundamentals and why it's essential for production React apps

Tags:

nextjsmeta-frameworkfull-stack

80 minutes

Why Next.js?

Problems with Plain React

Building a production React app from scratch requires:

Bundler configuration (Webpack)
Routing system
Server setup
Optimization configuration
Code splitting strategy

This is complex and error-prone.

Next.js Solutions

Next.js provides:

File-based routing – Routes from folder structure
Built-in optimization – Automatic code splitting, image optimization
Server components – Render on server, save bandwidth
API routes – Backend endpoints in the same codebase
SSG & SSR – Generate pages at build or request time
Full-stack – Frontend and backend together

Senior Developer Wisdom

In 2024-2026, Next.js dominates the React ecosystem. Most production React apps use Next.js. Learning React alone isn't enough for production work—you need Next.js.

Pages and Routing

App Router (Modern)

Next.js uses a file-based routing system:

javascript

app/
  page.tsx              → /
  about/
    page.tsx            → /about
  blog/
    page.tsx            → /blog
    [slug]/
      page.tsx          → /blog/:slug

Creating a Page

typescript

// app/page.tsx
export default function Home() {
  return <h1>Welcome to Next.js</h1>;
}

// app/about/page.tsx
export default function About() {
  return <h1>About Us</h1>;
}

Dynamic Routes

typescript

// app/blog/[slug]/page.tsx
interface Props {
  params: { slug: string };
}

export default function BlogPost({ params }: Props) {
  return <h1>Post: {params.slug}</h1>;
}

// Generate static pages at build time
export async function generateStaticParams() {
  return [
    { slug: "first-post" },
    { slug: "second-post" }
  ];
}

Server vs Client Components

Server Components (Default)

typescript

// app/server-component.tsx
export default async function ServerComponent() {
  const data = await fetch("/api/data");
  
  return <div>{data}</div>;
}

Server components:

Run only on the server
Access databases directly
Don't ship JavaScript to the browser
Perfect for data fetching

Client Components

typescript

"use client";  // Mark as client component

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Client components:

Run in the browser
Use hooks and interactivity
Access browser APIs

Pro Tip

Use server components by default. Only mark components as "use client" when they need interactivity. This reduces JavaScript sent to the browser.

Rendering Strategies

Static Generation (SSG)

typescript

// Cached, generated at build time
export const revalidate = 3600;  // Revalidate every hour

export default async function Page() {
  const data = await fetch("/api/data");
  return <div>{data}</div>;
}

Server-Side Rendering (SSR)

typescript

// Generated on every request
export const dynamic = "force-dynamic";

export default async function Page() {
  const data = await fetch("/api/data", {
    cache: "no-store"
  });
  return <div>{data}</div>;
}

Incremental Static Regeneration (ISR)

typescript

// Static but revalidate periodically
export const revalidate = 60;  // Revalidate every 60 seconds

export default async function Page() {
  const data = await fetch("/api/data");
  return <div>{data}</div>;
}

Common Pitfall

Choosing the wrong rendering strategy affects performance. SSG is fastest but requires rebuild. ISR is a great middle ground for content sites.

Image Optimization

typescript

import Image from "next/image";

export default function Page() {
  return (
    <Image
      src="/image.png"
      alt="Description"
      width={800}
      height={600}
      priority  // Load immediately
    />
  );
}

Next.js Image component:

Lazy loads images
Responsive
Automatic format conversion
Mobile optimization

Layout System

typescript

// app/layout.tsx (root layout)
export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <header>Navigation</header>
        <main>{children}</main>
        <footer>Footer</footer>
      </body>
    </html>
  );
}

// app/blog/layout.tsx (blog-specific layout)
export default function BlogLayout({ children }) {
  return (
    <div className="blog-layout">
      <aside>Categories</aside>
      <main>{children}</main>
    </div>
  );
}

Layouts wrap pages, reducing duplication.

Next.js Fundamentals

Key Takeaways

Next.js is a production-ready framework for React
Server components reduce JavaScript and improve performance
File-based routing is cleaner than manual router setup
Choose rendering strategy based on content (SSG, SSR, ISR)
Next.js handles optimization automatically

Next, we'll dive deep into the App Router and advanced patterns!

Have you finished this guide?

Marking it complete updates your roadmap progress percentage.

React Interview Cracking Guide

App Router Fundamentals