Next.js — Data fetching patterns: SSR, SSG, ISR, Client fetch

Of course! Here are the Next.js tutorials you requested, following your specified format.

Next.js — Intro: pages/app router concepts (routing basics)

Difficulty: Beginner 🔰
Description: Understand the two fundamental ways to build routes in Next.js. This tutorial covers the file-system-based routing concepts for both the classic Pages Router and the modern App Router.
Time to Read: 8 minutes

Content

🤔 The Core Idea: File-System Routing

Next.js revolutionized routing by getting rid of complex configuration files. Instead, you create routes simply by adding files and folders to your project. The structure of your file system directly maps to the URL paths of your application. Next.js offers two ways to do this.

1. The Pages Router (The Classic Approach)

This was the original routing system in Next.js. All your routes are defined inside a special pages directory.

Basic Routes: A file in the pages directory becomes a route.
pages/index.js → /
pages/about.js → /about
Nested Routes: A folder structure creates nested routes.
pages/blog/first-post.js → /blog/first-post
Dynamic Routes: To create a route that can handle variable segments (like a user ID or a blog post slug), you use square brackets [] in the filename.
pages/blog/[slug].js → Matches /blog/a-great-post, /blog/another-one, etc. The value of slug is available as a query parameter in your component.

Code Example (pages/blog/[slug].js):

JavaScript

import { useRouter } from 'next/router';

const PostPage = () => {
  const router = useRouter();
  const { slug } = router.query; // Access the dynamic part of the URL

  return <p>Reading post: {slug}</p>;
};

export default PostPage;

2. The App Router (The Modern Approach)

Introduced in Next.js 13, the App Router is built on top of React Server Components and is the recommended approach for new applications. It lives in an app directory.

Routes are Folders: Instead of files, folders now define the route segments.
The page.js file: The UI for a specific route is defined in a special file named page.js inside its corresponding folder.
app/about/page.js → /about
Layouts: The App Router introduces a powerful concept of layouts. A layout.js file defines a UI that is shared across multiple pages in a segment.
app/dashboard/layout.js → A shared sidebar for all dashboard pages.
app/dashboard/settings/page.js → The settings page, which appears inside the dashboard layout.
Dynamic Segments: Folders use square brackets [] to create dynamic routes.
app/blog/[slug]/page.js → Matches /blog/a-great-post, etc. The slug is passed as a prop.

Code Example (app/blog/[slug]/page.js):

JavaScript

// The params object is passed directly as a prop to the page component
function PostPage({ params }) {
  const { slug } = params; // Access the dynamic part of the URL

  return <h1>Reading post: {slug}</h1>;
}

export default PostPage;

Linking Between Pages

Regardless of which router you use, you should always use the <Link> component from next/link for client-side navigation. This prevents a full page reload and provides a much faster, app-like experience.

JavaScript

import Link from 'next/link';

function Navbar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About Us</Link>
      <Link href="/blog/my-first-post">Blog</Link>
    </nav>
  );
}

Quiz

Question: Using the App Router, which file path would correctly create the page for the URL /dashboard/users?

Options: A) app/dashboard/users.js B) pages/dashboard/users.js C) app/dashboard/users/page.js D) app/dashboard/users/index.js

Answer: C) app/dashboard/users/page.js

Explanation: In the App Router, routes are defined by folders. The dashboard folder contains the users folder, creating the /dashboard/users path. The actual UI for that path must be defined in a file named page.js inside the final folder segment.