• 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
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading a Document
    • Creating a Document
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Guarding an API Route
    • Adding Pages
    • Updating the Sidebar menu
    • Require Email Verification
    • Fetching the selected Organization
    • Reading a list of Documents
    • Updating a Document
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Dark Theme
    • Theming
    • Calling API Routes from the client
    • Deleting a Document
    • Updating the Logo
    • Adding a new language in the Next.js Firebase SaaS Kit
    • Checking CSRF Tokens
    • Passing data from server to client
    • Updating the Fonts
    • Adding Pages
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Environment variables
    • Detect current Locale
    • Setting up Emails

Adding pages to the marketing site of your Makerkit Next.js Firebase project

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

To add a new page to the marketing site of your Next.js project, you can create a new page in the pages directory and using the required getStaticProps function.

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

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

tsx
import type { GetStaticPropsContext } from "next";
import { withTranslationProps } from '~/lib/props/with-translation-props';
function AboutPage() {
return <div>About page</div>;
}
export function getStaticProps(ctx: GetStaticPropsContext) {
return withTranslationProps(ctx);
}

The withTranslationProps function is required to make sure that the page is translated correctly.

Adding basic layout components

If you want to add a basic layout to your page, you can use the SiteHeader and Footer components:

tsx
import type { GetStaticPropsContext } from "next";
import { withTranslationProps } from '~/lib/props/with-translation-props';
import Footer from '~/components/Footer';
import SiteHeader from '~/components/SiteHeader';
import Layout from '~/core/ui/Layout';
import Container from '~/core/ui/Container';
function AboutPage() {
return (
<Layout>
<SiteHeader />
<Container>
<div>About page</div>
</Container>
<Footer />
</Layout>
);
}
export function getStaticProps(ctx: GetStaticPropsContext) {
return withTranslationProps(ctx);
}