Next.js

Next.js is a React framework built by Vercel that gives you everything you need to build production-ready web apps right out of the box.

Think of it this way -- React alone is like getting a car engine. Next.js gives you the whole car -- engine, steering, wheels, GPS, everything.

Here is what it brings to the table:

Server-Side Rendering (SSR) -- pages are rendered on the server so they load faster and are great for SEO.

Static Site Generation (SSG) -- pages are pre-built at build time, making them super fast.

File-based routing -- just create a file in the app/ folder and boom, you have a route.

API routes -- build your backend right inside the same project.

Image optimization, font loading, and a ton of performance features built in.

If you are building anything beyond a simple prototype, Next.js saves you weeks of setup time.

These are the three main ways Next.js can render your pages. Let me break them down simply:

SSR (Server-Side Rendering)

The page is built fresh on the server every single time someone visits it. Great for pages where data changes frequently -- like a dashboard or a social feed.

SSG (Static Site Generation)

The page is built once at build time and served as a static HTML file. Lightning fast because there is no server work on each request. Perfect for blog posts, documentation, marketing pages.

ISR (Incremental Static Regeneration)

This is the best of both worlds. The page is statically generated, but Next.js will rebuild it in the background after a set time interval. So you get the speed of static with the freshness of server rendering.

A simple way to remember:

SSR = Fresh every time (but slower)

SSG = Built once (fastest, but stale)

ISR = Built once, refreshed periodically (the sweet spot)

Next.js 13 introduced a brand new routing system called the App Router that lives in the app/ directory. The old system (Pages Router) lives in pages/.

Here is the key difference:

Pages Router (old way)

Every file in pages/ is a route

Uses getServerSideProps, getStaticProps for data fetching

All components are client components by default

App Router (new way)

Files in app/ directory with page.tsx become routes

Uses React Server Components by default -- components run on the server

Data fetching happens directly inside components using async/await

Has layouts, loading states, and error boundaries built into the file structure

Supports streaming and partial rendering

The App Router is the future of Next.js. It is more powerful, more flexible, and aligns with the latest React features like Server Components.

This is one of the biggest shifts in React and Next.js. Let me explain it simply.

Server Components (default in App Router)

These components run only on the server. They never ship JavaScript to the browser. This means:

They can directly access databases, files, environment variables

They reduce the JavaScript bundle sent to the client

They cannot use useState, useEffect, or any browser APIs

Client Components (opt-in with "use client")

These run in the browser. You need them when:

You need interactivity (clicks, form inputs, toggles)

You need browser APIs (localStorage, window)

You need React hooks like useState, useEffect

To make a component a Client Component, add "use client" at the very top of the file.

The golden rule: Keep as much as possible as Server Components, and only sprinkle "use client" where you absolutely need interactivity. This keeps your app fast and your bundles small.

In Next.js App Router, your folder structure IS your routing structure. No need for a separate router config.

Here is how it works:

app/page.tsx maps to /

app/about/page.tsx maps to /about

app/blog/[slug]/page.tsx maps to /blog/any-slug (dynamic route)

app/(auth)/login/page.tsx maps to /login (route groups with parentheses)

Special files in each folder:

page.tsx -- the actual page content

layout.tsx -- shared layout that wraps the page and its children

loading.tsx -- shown while the page is loading

error.tsx -- shown when something goes wrong

not-found.tsx -- shown for 404 errors

This is one of the things developers love most about Next.js. Your file structure tells you exactly what your routes look like. No guessing, no digging through router configs.

Both are used for navigation, but they serve different purposes.

Link component

Use this for regular navigation links in your JSX. It is the preferred way to navigate.

import Link from "next/link"

<Link href="/about">About Us</Link>

Benefits:

Automatically prefetches the linked page in the background

Works without JavaScript (it renders as a regular <a> tag)

Supports prefetch={false} to disable prefetching

useRouter hook

Use this for programmatic navigation -- when you need to navigate based on some logic.

const router = useRouter()

router.push("/dashboard") // navigate to dashboard

router.replace("/login") // replace current history entry

router.back() // go back

Use cases:

Redirect after form submission

Navigate after a button click with some logic

Conditional redirects

Simple rule: Use Link for clicking, useRouter for coding.

The App Router has a brilliant convention-based system for this. Just create special files in your route folder.

loading.tsx -- Loading State

Create a loading.tsx file and it automatically shows while your page is fetching data.

export default function Loading() {

return <div>Loading...</div>

}

Under the hood, Next.js wraps your page in a React Suspense boundary. The loading file is the fallback.

error.tsx -- Error State

Create an error.tsx file and it catches any errors thrown in your page or its children.

"use client" // error.tsx must be a client component

export default function Error({ error, reset }) {

return (

<div>

<p>Something went wrong: {error.message}</p>

<button onClick={() => reset()}>Try again</button>

</div>

)

}

not-found.tsx -- 404 State

Create a not-found.tsx for custom 404 pages.

The beauty of this system is that error and loading boundaries are scoped to their route segment. A loading state in /blog does not affect /about.

Next.js has a built-in Image component that automatically optimizes images for you.

import Image from "next/image"

<Image

src="/hero.jpg"

alt="Hero image"

width={800}

height={400}

priority // loads this image immediately (use for above-the-fold images)

/>

What it does automatically:

Serves images in modern formats like WebP and AVIF

Resizes images to the exact size needed

Lazy loads images by default (only loads when they scroll into view)

Prevents layout shift with required width/height

Caches optimized images for fast subsequent loads

For responsive images:

<Image

src="/hero.jpg"

alt="Hero"

fill // makes it fill its parent container

sizes="(max-width: 768px) 100vw, 50vw"

/>

Key props to know:

priority -- use for the first image users see (LCP image)

placeholder="blur" -- shows a blurry preview while loading

quality={75} -- control compression (default is 75)

Never use a regular <img> tag in Next.js. Always use the Image component.