• 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
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading Records from Postgres
    • Creating a Record
    • Seeding Local Data
    • Introduction
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Supabase is not starting
    • Calling API Routes from the client
    • Adding Pages
    • Updating the Sidebar menu
    • Setup oAuth
    • Fetching the selected Organization
    • Resetting the local DB
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Supabase is not stopping
    • Dark Theme
    • Theming
    • API Routes vs Server Actions
    • Generating Database Types
    • Updating the Logo
    • Adding a new language in the Next.js Supabase SaaS Kit
    • Tables/Functions not found
    • Updating the Fonts
    • Adding Pages
    • Adding a new translation file
    • Contentlayer gets stuck
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Dynamic server usage error
    • Environment variables
    • Detect current Locale
    • 403 error with API/Actions
    • Setting up Emails
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 of your Makerkit Next.js Supabase project

Learn how to add new pages to the marketing site of your Makerkit Next.js Supabase project.

To add a new page to the marketing site of your Next.js project, you can create a new page in the src/app/(site) directory.

By "marketing site", we mean the public pages of your project, such as the homepage, the about page, the contact page, etc.

Use the below code only for public pages accessible by everyone, such as the homepage, the about page, the contact page, etc.

Adding a new page to the marketing site

As you know already, we can add pages to our Next.js App Router application by creating files within the src/app directory named as page.tsx.

For example, if you want to add a page at /about, you can create a new file at src/app/(site)/about/page.tsx with the following content:

src/app/(site)/about/page.tsx
function AboutPage() {
return <div>About page</div>;
}
export default AboutPage;

This page will automatically inherit the site layout from src/app/(site)/layout.tsx - which means it will already display the header and footer.

I don't want to use the same layout though?

If you don't want to use the site layout, create a route group inside src/app, and add your page there.

Adding a new page to the marketing site with translations

If you have translations on your marketing site - to ensure the page is translated correctly server-side, we use the withI18n HOC:

src/app/(site)/about/page.tsx
import { withI18n } from '~/i18n/with-i18n';
function AboutPage() {
return <div>About page</div>;
}
export default withI18n(AboutPage);