基於檔案的 Next.js 頁面路由

今年下半年接了一個公司的對外專案，因此有 SEO 需求，不知道是不是靜茹給我的勇氣，讓我主動提出可以使用 Next.js 的 SSR 來架構新專案，總之就是且戰且走吧，從零開始一邊做一邊學。

useRouter hook

// file: <root>/pages/clients/[id]/[projectId].js
// visit: localhost:3000/clients/sean/project1

import { useRouter } from "next/router";

function SelectedClientProjectPage() {
  const router = useRouter();

  console.log(router.pathname); // "clients/[id]/[projectId]"
  console.log(router.query); // {projectId: "project1", id: "sean"}

  // send a request to some backend server
  // to fetch the piece of data with an id of router.query.projectId

  return (
    <div>
      <h1>The Project Page for a Specific Project for a Selected Client</h1>
    </div>
  );
}

export default SelectedClientProjectPage;

Catch-All Routes

e.g. [...xxx].js

// file: <root>/pages/blog/[...slug].js
// visit: localhost:3000/blogs/2023/09

import { useRouter } from "next/router";

function BlogPostsPage() {
  const router = useRouter();

  console.log(router.query); // {slug: ["2023", "09"]}

  return (
    <div>
      <h1>The Blog Posts</h1>
    </div>
  );
}

export default BlogPostsPage;

Navigating To Dynamic Routes

import Link from "next/link";

function ClientsPage() {
  const clients = [
    { id: "sean", name: "Sean" },
    { id: "chi", name: "Chi" },
  ];

  return (
    <div>
      <h1>The Clients Page</h1>
      <ul>
        {clients.map((client) => (
          <li key={client.id}>
            <Link href={`/clients/${client.id}`}>{client.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClientsPage;

A Different Way Of Setting Link Hrefs

<Link
  href={{
    pathname: "/clients/[id]",
    query: { id: client.id },
  }}
>
  {client.name}
</Link>

Navigating Programmatically

const router = useRouter();

router.push({
  pathname: "/clients/[id]/[projectId]",
  query: { id: "sean", projectId: "project1" },
});

Custom 404 Page

// file: <root>/pages/404.js (Must)
// visit: localhost:3000/something

function NotFoundPage() {
  return (
    <div>
      <h1>Page not found!</h1>
    </div>
  );
}

export default NotFoundPage;

Public folder

Files and folders stored outside of public/ are NOT made accessible by Next.js - visitors can NOT load files from there.