Beginner's Guide to Understanding Next.js

What is Next.js?

Next.js is a React-based framework that makes building fast, SEO-friendly applications much easier.
While React is a JavaScript library for building UIs, Next.js is a full-fledged framework — meaning it provides libraries, tools, and best practices out of the box.

Some built-in features include:

• File-based routing (no need for a separate router library)

• Server-side rendering (SSR) and static site generation (SSG)

• API routes for backend logic

• Automatic code splitting for performance

• Image and Link Optimization

• Built-in compiler & CLI

• Node.js runtime to run JavaScript on the server

Because Next.js supports both frontend and backend in the same project, it’s often considered full-stack. In contrast, a pure React app usually requires a separate backend service.

Installation

1. Install Node.js → Download Latest Node.js

2. Check installation:

    node -v
    npm -v
   

3. Create a Next.js app:

    npx create-next-app@latest my-app
   

4. Choose TypeScript, Tailwind, ESLint, and App Router when prompted.

5. Add helpful extensions:

   • Tailwind CSS IntelliSense

   • TypeScript and React snippets

Folder Structure

• app/ → Your pages and layouts (routing is based on folders)

• public/ → Images, videos, static assets

• styles/ → Global CSS files

• page.tsx → Default page component for a route

• layout.tsx → Wrapper for shared layout (like header/footer)

Example:

app/
 ├── page.tsx        → Home page (/)
 └── users/
      └── page.tsx   → /users

Rendering in Next.js

By default, components in the app/ folder are server components — meaning they’re rendered on the server before being sent to the browser.
If you want a component to be client-rendered (for example, when using useState or useEffect), add:

'use client';

at the very top of the file.

Client-Side Rendering (CSR)

• Browser loads a mostly empty HTML file, then JavaScript builds the page.

• Good for highly interactive apps, but slower first load and weaker SEO.

Server-Side Rendering (SSR)

• Server sends fully rendered HTML to the browser.

• Faster first load, better SEO.

Two main types:

1. Dynamic SSR – Rendered fresh for every request.

2. Static Site Generation (SSG) – Rendered once at build time and reused.

Caching & Refreshing

Next.js automatically caches SSR and SSG pages for better performance.
You can control it:

• Always fresh data:

    fetch(url, { cache: 'no-store' })
  

• Refresh every X seconds:

    fetch(url, { next: { revalidate: 10 } })
  

Example

// app/users/page.tsx
export default async function Users() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users', {
    next: { revalidate: 60 }, // Refresh every 60s
  });
  const users = await res.json();

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

This page is server-rendered, automatically cached, and refreshed every 60 seconds.

Styling with Tailwind CSS

Tailwind lets you use utility classes instead of writing separate CSS files.

Before (plain CSS):

.button {
  background-color: blue;
  padding: 1rem;
  border-radius: 0.5rem;
}

After (Tailwind):

<button className="bg-blue-500 p-4 rounded-lg">
  Click Me
</button>

Image & Link Optimization

Next.js provides optimized components:

• next/image → Automatically resizes, lazy loads, and serves images in modern formats (like WebP).

• next/link → Prefetches linked pages for faster navigation.

Example:

import Image from 'next/image';
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Image src="/photo.jpg" alt="Sample" width={500} height={300} />
      <Link href="/about">Go to About</Link>
    </div>
  );
}

Routing in Next.js

Routing is file-based. The folder name becomes the route.

• app/page.tsx → /

• app/about/page.tsx → /about

• Dynamic routes:

    app/users/[id]/page.tsx → /users/1
  

---

Deployment

Easiest way: Vercel (the creators of Next.js).

1. Push your code to GitHub.

2. Import the repo in Vercel.

3. It automatically builds and deploys your site.

---

✅ With these basics — installation, rendering modes, caching, styling, optimization, routing, and deployment — you have the foundation to build and launch production-grade Next.js apps.