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

Adding pages to the Marketing Site is easy.

You can add a new page by creating a new file in the pages directory. For example, if you want to add a new page called About, you can create a new file called about.tsx in the pages directory.

pages/
  about.tsx

The file should export a React component that will be rendered when the user visits the page.

For example:

import { GetStaticPropsContext } from "next";
import { withTranslationProps } from "~/lib/props/with-translation-props";
function About() {
 return <div>About</div>;
}
export function getStaticProps(
 context: GetStaticPropsContext
) {
 return withTranslationProps(context);
}
export default About;

NB: We've added the withTranslationProps function to the getStaticProps function. This is required for all pages to ensure that the page is translated correctly. If you don't add this function, the components that use translations will not be translated, and the component will not be rendered correctly.

Adding a page to the 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:

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:

<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:

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

And then we update the menu:

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