This documentation is for a legacy version of Next.js Supabase. For the latest version, please visit the Next.js Supabase Turbo documentation

Adding pages to the Marketing Site

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

Adding pages to the Marketing Site is easy.

The marketing/site pages are placed under the app/(site) directory, and are part of the site layout.

app/(site)/about/page.tsx
import Hero from '~/core/ui/Hero'; import Container from '~/core/ui/Container'; import SubHeading from '~/core/ui/SubHeading'; export const metadata = { title: 'About', }; const AboutPage = () => { return ( <div> <Container> <div className={'flex flex-col space-y-14'}> <div className={'flex flex-col items-center'}> <Hero>About us</Hero> <SubHeading> We are a team of passionate developers and designers who love to build great products. </SubHeading> </div> </div> <div> <!-- Content --> </div> </Container> </div> ); }; export default AboutPage;

Adding the page to the site's 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>

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS