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