Adding a Page
Public page
Create a new file in the App Router:
// src/app/pricing/page.tsx
export default function PricingPage() {
return (
<main className="mx-auto max-w-4xl px-6 py-20">
<h1 className="text-3xl font-bold">Pricing</h1>
<p className="mt-4 text-zinc-400">Choose your plan.</p>
</main>
);
}This page is publicly accessible at /pricing.
Protected page
For pages that require authentication, add the route to the middleware matcher and check the session:
// src/app/analytics/page.tsx
import { getSession } from '@/lib/auth-session';
import { redirect } from 'next/navigation';
export default async function AnalyticsPage() {
const session = await getSession();
if (!session) redirect('/sign-in');
return (
<main className="mx-auto max-w-4xl px-6 py-20">
<h1 className="text-3xl font-bold">Analytics</h1>
<p className="mt-4 text-zinc-400">
Welcome, {session.user.email}
</p>
</main>
);
}Then add /analytics to the protected routes in src/middleware.ts.
Adding metadata
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Pricing',
description: 'Choose your plan.',
};