Next.js Essentials

Next.js is a React framework for building fast, scalable, and production-ready web applications. You will learn about routing, data fetching, server and client components, API routes, and optimization techniques for modern full-stack development.

File-Based Routing

Next.js automatically creates routes based on your folder structure inside the app or pages directory. Each file corresponds to a route, making navigation intuitive and simple.

bash

app/
├── page.tsx           → Renders the home page (/)
├── about/
│   └── page.tsx       → Renders the About page (/about)
└── blog/
    ├── page.tsx       → Renders the Blog list (/blog)
    └── [slug]/
        └── page.tsx   → Dynamic route for individual posts (/blog/hello-world)

tsx

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

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }) {
  return <h2>Post: {params.slug}</h2>;
}

Data Fetching (SSR & SSG)

Next.js supports multiple data fetching strategies: Static Site Generation (SSG), Server-Side Rendering (SSR), and Client-Side Fetching. This flexibility allows you to balance performance and freshness.

tsx

// Server Component (SSR Example)
// app/posts/page.tsx
export default async function PostsPage() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Blog Posts</h1>
      <ul className="list-disc pl-6 space-y-2">
        {posts.slice(0, 5).map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

tsx

// Static Generation Example
// app/page.tsx
export const revalidate = 60; // Revalidate every 60 seconds

export default async function HomePage() {
  const res = await fetch("https://api.example.com/data", { next: { revalidate: 60 } });
  const data = await res.json();

  return <div>Pre-rendered content with revalidation.</div>;
}

Client & Server Components

In Next.js 13+, components are Server Components by default. You can opt into Client Components by adding the use clientdirective. Use Client Components for interactivity and hooks.

tsx

// app/components/Counter.tsx
'use client'

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div className="space-y-2">
      <h2>Count: {count}</h2>
      <button
        onClick={() => setCount(count + 1)}
        className="px-3 py-1 bg-blue-500 text-white rounded"
      >
        Increase
      </button>
    </div>
  );
}

// app/page.tsx
import Counter from "./components/Counter";

export default function Home() {
  return (
    <div className="p-6">
      <h1 className="text-xl font-semibold mb-4">Welcome to Next.js</h1>
      <Counter />
    </div>
  );
}

API Routes & Serverless Functions

API routes let you build backend functionality directly inside your Next.js app. These run as serverless functions, perfect for handling form submissions, fetching data, or processing requests.

tsx

// app/api/hello/route.ts
export async function GET() {
  return Response.json({ message: "Hello from Next.js API!" });
}

// Example fetch from a page
export default async function ApiExample() {
  const res = await fetch("/api/hello");
  const data = await res.json();

  return <p>{data.message}</p>;
}

Performance & Optimization

Next.js offers built-in optimization for images, scripts, and fonts. Use the next/image and next/font components to automatically improve performance.

tsx

import Image from "next/image";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function OptimizedPage() {
  return (
    <div className={`${inter.className} p-6`}>
      <h1 className="text-2xl font-bold mb-4">Optimized Example</h1>
      <Image
        src="/nextjs-logo.png"
        alt="Next.js Logo"
        width={150}
        height={150}
        priority
        className="rounded"
      />
      <p>Fast and optimized by default.</p>
    </div>
  );
}