• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
  • Global Configuration
    • Environment Variables
    • Feature Flags
  • Server Actions
    • Sending CSRF Token to Actions
    • Server Actions Error Handling
  • The Makerkit SDK
    • User SDK
    • Organization SDK
    • Organization Subscription SDK
    • Data Loader SDK
  • Architecture and Folder Structure
    • Structure your Application
    • Data Model
    • Introduction
    • Initial Setup
    • Running the App
    • Project Configuration
    • Environment Variables
    • Tailwind CSS and Styling
    • Authentication
    • Onboarding Flow
    • Database Schema
    • Supabase: Data Fetching
    • Supabase: Data Writing
    • Routing
    • Building the Tasks page
    • Building the Task Detail page
    • API Routes
    • Application Pages
    • API Routes Validation
    • Translations
    • Functions you need to know
    • Adding pages to the Marketing Site
    • Deploying to Production
    • Updating to the latest version
This documentation is for a legacy version of Next.js and Supabase. For the latest version, please visit the Next.js and Supabase V2 documentation

Adding pages to the Marketing Site | Next.js Supabase SaaS Kit

Learn how to add pages to the Marketing Site of your Next.js Supabase application, and how to add them to the navigation menu.

Adding pages to the Marketing Site is easy.

The marketing/site pages are placed under the app/(site) directory, and are part of the site layout.

app/(site)/about/page.tsx
import Hero from '~/core/ui/Hero';
import Container from '~/core/ui/Container';
import SubHeading from '~/core/ui/SubHeading';
export const metadata = {
 title: 'About',
};
const AboutPage = () => {
 return (
   <div>
     <Container>
       <div className={'flex flex-col space-y-14'}>
         <div className={'flex flex-col items-center'}>
           <Hero>About us</Hero>
           <SubHeading>
             We are a team of passionate developers and designers who love to
             build great products.
           </SubHeading>
         </div>
       </div>
       <div>
         <!-- Content -->
       </div>
     </Container>
   </div>
 );
};
export default AboutPage;

Adding the page to the site's navigation menu

To update the site's navigation menu, you can visit the SiteNavigation.tsx component and add a new entry to the menu.

By default, you will see the following object links:

components/SiteNavigation.tsx
const links: Record<string, Link> = {
 Blog: {
   label: 'Blog',
   path: '/blog',
 },
 Docs: {
   label: 'Docs',
   path: '/docs',
 },
 Pricing: {
   label: 'Pricing',
   path: '/pricing',
 },
 FAQ: {
   label: 'FAQ',
   path: '/faq',
 },
};

The menu is defined in the render function:

tsx
<NavigationMenu>
  <NavigationMenuItem link={links.Blog} />
  <NavigationMenuItem link={links.Docs} />
  <NavigationMenuItem link={links.Pricing} />
  <NavigationMenuItem link={links.FAQ} />
</NavigationMenu>

Assuming we want to add a new menu entry, say About, we would first add the link object:

tsx
About: {
  label: 'About',
  path: '/about',
},

And then we update the menu:

tsx
<NavigationMenu>
  <NavigationMenuItem link={links.About} />
  ...
</NavigationMenu>