Add a static page

Create a new public page — an about page, a landing page variant, anything.

1. Create the file

Next.js App Router turns any page.tsx file into a route. Create your new page by adding a file inside src/app/:

// src/app/about/page.tsx
import type { Metadata } from "next";
import { getSEOTags } from "@/libs/seo";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { Suspense } from "react";

export const metadata: Metadata = getSEOTags({
  title: "About",
  description: "Learn more about who we are and what we're building.",
  canonicalUrlRelative: "/about",
});

export default function AboutPage() {
  return (
    <>
      <Suspense>
        <Header />
      </Suspense>
      <main className="mx-auto max-w-3xl px-6 py-24">
        <h1 className="text-4xl font-extrabold tracking-tight">About us</h1>
        <p className="mt-6 text-lg text-base-content/70">
          Write your story here.
        </p>
      </main>
      <Footer />
    </>
  );
}

Your page is now live at /about. No config needed, no route registration — just the file.

2. Add a nav link (optional)

Open src/components/HeaderClient.tsx and add an entry to the links array:

const links = [
  { href: "/#pricing", label: "Pricing" },
  { href: "/docs",     label: "Docs" },
  { href: "/about",    label: "About" },  // ← add this
];

3. Link to it from the footer (optional)

Open src/components/Footer.tsx and add an <Link> in the links column.

TipUse getSEOTags() on every public page so each one gets correct <title>, meta description, and Open Graph tags automatically.