DirectoryKit
Docs

Adding Pages

How to add new pages to your DirectoryKit directory.

Route groups

DirectoryKit organizes pages into route groups. Choose the right group for your new page:

GroupUse forLayout
(marketing)Public pagesHeader + Footer + AdBanner
(dashboard)Auth-required pagesDashboard layout
(admin)Admin pagesAdmin sidebar layout

1. Create the route

Create a new directory under app/(marketing)/:

app/(marketing)/my-page/page.tsx

2. Write the component

app/(marketing)/my-page/page.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'My Page — My Directory',
  description: 'Description for SEO.',
}
 
export default function MyPage() {
  return (
    <div className="mx-auto max-w-4xl px-6 py-16">
      <h1 className="text-3xl font-bold">My Page</h1>
      <p className="mt-4 text-muted-foreground">
        Your content here.
      </p>
    </div>
  )
}

3. Add navigation

To add a link in the header, edit components/layout/Header.tsx and add your page to the navigation array.

Protected pages

For pages that require authentication, use requireAuth():

import { requireAuth } from '@/lib/supabase/auth-helpers'
 
export default async function ProtectedPage() {
  const redirect = await requireAuth()
  if (redirect) return redirect
 
  return <div>Protected content</div>
}

Previous

Branding