Adding a New Page

The App Router splits the app into two layout trees. Pick the right one and the rest (auth, chrome, redirects) is handled for you.

(site) and (admin) are route groups. The parentheses keep them out of the URL.

Marketing page

A marketing page is any public page under app/(site)/. The layout app/(site)/layout.tsx wraps it with the public Header and Footer. That layout reads the session only to fill the nav. It never redirects, so the page stays public.

import type { Metadata } from "next";
import { generateMeta } from "@/lib/config";

export const metadata: Metadata = generateMeta({
  title: "Case Studies",
  description: "How teams ship faster with Next Starter.",
  pathname: "/case-studies",
});

export default function CaseStudiesPage() {
  return <div className="bg-background">{/* sections */}</div>;
}

Dashboard page

A dashboard page is any page under app/dashboard/. The layout app/dashboard/layout.tsx does the guarding for every page below it:

• it calls getSession() and redirects to /auth/sign-in if the user is signed out
• it redirects to /onboarding if the user has not finished onboarding
• it renders the sidebar, the mobile header, and the breadcrumb

So auth is already enforced for you. You only call getSession() yourself when you need the user's id for a query.

import type { Metadata } from "next";
import { generateMeta } from "@/lib/config";
import { getSession } from "@/lib/server/auth-helpers";

export const metadata: Metadata = generateMeta({
  title: "Reports",
  description: "View your usage reports.",
  pathname: "/dashboard/reports",
  noIndex: true,
});

export default async function ReportsPage() {
  const session = await getSession(); // only if you need session.user.id
  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold">Reports</h1>
      {/* content */}
    </div>
  );
}

{ name: "Reports", href: "/dashboard/reports", icon: BarChart, group: "main" },

Admin-only page

To restrict a page to admins, put it under app/dashboard/(admin)/. That group's layout (app/dashboard/(admin)/layout.tsx) redirects any non-admin to /dashboard.

(admin) is a route group, so it never shows in the URL: a file at app/dashboard/(admin)/reports/page.tsx still serves /dashboard/reports. Give its sidebar link group: "system" so only admins see it.

Nested and dynamic routes

app/dashboard/reports/
├── page.tsx          # /dashboard/reports
└── [id]/page.tsx     # /dashboard/reports/:id

Read dynamic params by awaiting the params prop:

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

The breadcrumb (components/dashboard/breadcrumb.tsx) is automatic: it splits the path, drops dashboard and UUID segments, and title-cases the rest. To rename a segment's label, adjust the formatting logic there.

Metadata

Both page types use generateMeta from lib/config.ts, which merges your values with the site defaults in APP_CONFIG.

Two other files control crawling, separate from per-page noIndex:

• app/robots.ts builds its disallow list from APP_CONFIG.noIndexRoutes in lib/config.ts. Add a path there to block crawlers from a whole route.
• app/sitemap.ts lists pages from its own publicPages array. A new public page only appears in the sitemap after you add it to that array.