Ship/Now

Guides · 2 min

Add a page

A new route with metadata, translation and a place in the sitemap, so it is reachable rather than merely built.

The file

// src/app/pricing/page.tsx
import type { Metadata } from "next";
import { currentLocale } from "@/lib/i18n.server";
import { messages } from "@/lib/i18n";

export const metadata: Metadata = {
  title: "Pricing",
  description: "One payment, both repositories, no renewal.",
  alternates: { canonical: "/pricing" },
};

export default async function PricingPage() {
  const t = messages(await currentLocale());
  return <h1>{t.pricingTitle()}</h1>;
}

Server component. No "use client" unless something on it needs state.

The four things people forget

A link to it

A route with no link is not shipped. Add it to the nav, the footer, or wherever somebody would look for it. If you cannot think of where the link goes, that is worth pausing on.

The copy in both languages

Add the keys to messages/en.json and messages/fr.json. Missing keys are a compile error, which is the point, but only after you recompile.

The sitemap

src/app/sitemap.ts is a list. A page absent from it is a page Google finds slowly or not at all.

Whether it should be indexed

Anything behind sign-in needs robots: { index: false, follow: false }.

Dynamic routes

export const dynamicParams = false;

export async function generateStaticParams() {
  return (await allPosts()).map((post) => ({ slug: post.slug }));
}

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
}

params is a Promise in Next.js 16. Destructuring it directly is the most common upgrade error, and the type message it produces does not say so.

dynamicParams = false turns an unknown slug into a 404 instead of an attempt to render something that does not exist.

A page that needs the user

const user = await requireUser();

That is the whole thing. It redirects to sign-in with a next parameter, so after signing in the person lands where they were going rather than on the dashboard.

Something wrong or missing on this page? Tell us.