Adding Pages | DirectoryLaunch

Add new routes inside DirectoryLaunch using Next.js route groups for marketing, dashboard, or admin layouts with the right auth guards in place.

DirectoryLaunch uses Next.js route groups (folders in parentheses) to apply shared layouts. Adding a new page = adding one page.tsx file under the right group.

Pick the right route group

Group	Layout	Use for
`(marketing)/`	Header + Footer + AdBanner	Public pages — blog, pricing, FAQ, about
`(dashboard)/`	Header + user dashboard layout	Logged-in user pages
`(admin)/admin/`	Admin sidebar layout	Admin-only pages

The parentheses in the folder name are stripped from the URL — they only exist to group by layout.

Example: add a public `/roadmap` page

Let AI scaffold the page for you:

Or do it by hand:

1. Create the file

app/(marketing)/roadmap/page.tsx

2. Write the component

app/(marketing)/roadmap/page.tsx

import type { Metadata } from 'next';
import { siteConfig } from '@/config/site.config';
 
export const metadata: Metadata = {
  title: `Roadmap — ${siteConfig.name}`,
  description: 'What we are building next.',
};
 
export default function RoadmapPage() {
  return (
    <div className="mx-auto max-w-3xl px-6 py-16">
      <h1 className="text-4xl font-bold">Roadmap</h1>
      <p className="mt-4 text-muted-foreground">
        Features we're working on.
      </p>
      <ul className="mt-8 space-y-4">
        <li>Q2: AI-powered search</li>
        <li>Q3: Mobile app</li>
      </ul>
    </div>
  );
}

3. Add a nav link (optional)

If you want the page in the header or footer, edit components/layout/Header.tsx or components/layout/Footer.tsx and add your entry to the nav array.

Example: add a logged-in `/invites` page

1. Create the file

app/(dashboard)/invites/page.tsx

2. Protect it

import { requireAuth, getCurrentUser } from '@/lib/supabase/auth-helpers';
 
export default async function InvitesPage() {
  const redirect = await requireAuth();
  if (redirect) return redirect;
 
  const user = await getCurrentUser();
 
  return (
    <div>
      <h1>Your invites, {user!.email}</h1>
    </div>
  );
}

Example: add an admin page

1. Create the file

app/(admin)/admin/reports/page.tsx

2. Protect it

import { isAdmin, requireAuth } from '@/lib/supabase/auth-helpers';
import { notFound } from 'next/navigation';
 
export default async function AdminReportsPage() {
  const redirect = await requireAuth();
  if (redirect) return redirect;
 
  if (!(await isAdmin())) notFound();
 
  return <div>Admin reports...</div>;
}

Appears at /admin/reports. Won't show up for non-admins.

Pages that need data

Use the db helper for server-side data fetching:

import { db } from '@/lib/supabase/database';
 
export default async function LiveAppsPage() {
  const apps = await db.find('apps',
    { status: 'live' },
    { sort: { upvotes: -1 }, limit: 20 }
  );
 
  return (
    <ul>
      {apps.map((app) => <li key={app.id}>{app.name}</li>)}
    </ul>
  );
}

Adding an API route

If your page needs data mutations, pair it with an API route at app/api/your-thing/route.ts — see API Reference Overview for the template.

Docs page (this site)

If you want a new page in this documentation:

Create content/docs/<section>/<page>.mdx with frontmatter
Add an entry to lib/docs/navigation.ts