Adding pages to the Marketing Site

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

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:

pages/about.tsx
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:

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:

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