Installation

Next.js is an open-source React framework used to build full-stack web applications. It is created and maintained by Vercel.

It allows you to:

• Build UI using React components

• Add backend logic using API routes

• Improve performance with server-side rendering

It is built on Server Components, which help render content faster and more efficiently.

Pre-requisite Knowledge

Before learning Next.js, you should know:

• HTML

• CSS

• JavaScript

• React

Create Your First Next.js App

Install Node.js : Make sure Node.js is installed on your system.

Installation locally

Create a new Next.js app and run it locally

plaintext

npx create-next-app my-next-app

cd my-next-app

npm run dev

Setup Options

You will see prompts like:

• Project name

• TypeScript (Yes/No)

• ESLint (Yes/No)

• Tailwind CSS (Yes/No)

• App Router (Recommended: Yes)

Create App (CLI)

javascript

npm create next-app

You will see options like:

• TypeScript (Yes/No)

• Tailwind CSS

• App Router

• ESLint

Choose recommended defaults for best setup

Manual Installation

javascript

npm i next react react-dom

Add scripts in package.json:

javascript

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Next.js Scripts

javascript

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "export": "next export",
  "lint": "next lint"
}

Explanation:

• dev → Start development server

• build → Create production build

• start → Run production server

• lint → Check code quality

• export → Convert to static site

Add TypeScript in Next.js

javascript

npm install --save-dev typescript @types/react @types/node

Then:

• Rename .js → .ts or .tsx

• Next.js auto-detects TypeScript

Create a Simple Page

javascript

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

Explanation:

• pages/index.js → Home route (/)

• Each file = one route

• Component returns UI

Pages and Routing

File-Based Routing

Next.js uses folder structure for routing:

• pages/index.js → /

• pages/about.js → /about

Pages

• Each page is a UI for a route

Layouts

• Shared UI across multiple pages

• Do not re-render on navigation

Navigation in Next.js

Using Link Component

plaintext

import Link from "next/link";

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

Using useRouter Hook

• Used for programmatic navigation

• Works only in client components

Advanced Routing

Route Groups

• Folder inside ( )

• Helps organize routes without changing URL

Dynamic Routes

• Use [id] format

• Example: /blog/[id]

Special Files

• loading.js → Show loading UI

• error.js → Handle errors

• route.js → Custom API handlers

SEO in Next.js

Next.js improves SEO using:

• Server-side rendering

• Automatic code splitting

• Meta tags support

API Routes

Next.js allows backend logic inside the same project.

Example:

• pages/api/users.js

• Accessible via /api/users

Data Fetching in Next.js

4 Ways to Fetch Data

1. Server-side using fetch

2. Server-side using libraries

3. Client-side using route handlers

4. Client-side using libraries (SWR, React Query)

Server-Side vs Static Fetching

getStaticProps (SSG)

• Runs at build time

• Best for static data

getServerSideProps (SSR)

• Runs on every request

• Best for dynamic data

Example: Static Data Fetching

plaintext

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

  return {
    props: {
      posts: data,
    },
  };
}

Caching and Revalidation

Caching

• Stores data to avoid repeated fetching

Revalidation

• Updates cached data

Types:

• Time-based

• On-demand

Features of Next.js

• Server-Side Rendering (SSR)

• Static Site Generation (SSG)

• File-Based Routing

• API Routes

• Code Splitting

• Image Optimization

• TypeScript Support

Limitations of Next.js

• No built-in state management

• No fixed styling solution

You can use:

• Redux / Context API

• Tailwind / CSS Modules

What is App Router?

App Router is a modern routing system in Next.js.

Key Points:

• Uses folder-based structure

• Supports layouts and nested routes

• Improves performance

• More flexible than old pages router