How to create a new page

Create a new your-page-name.tsx file in the pages folder and import the dependencies. In Next.js the file name represents the url slug for the page.

import { NextPage } from 'next';
import { PageLayout } from '../components/page-layout';

Create a NextPage that wraps your content in a <PageLayout>. Start by adding a page title and a subtitle.

const YourPageName: NextPage = () => {
  return (
    <PageLayout>
      <article>
        <header>
           <PageTitle>Your page title</PageTitle>
           <PageSubtitle>Page subtitle</PageSubtitle> 
        </header>
        <p>Your page content goes here.</p>
      </article>
    </PageLayout>
  );
};

Export your the page

export default YourPageName;

Add your page to the sidebar

Navigation items and item groups are defined in side-navigation/navigation.ts. To add a new item to the sidebar we'll create a new items group. Start by defining items for the new group:

const newItems: NavItem[] = [
  { title: 'Your new page', url: '/your-new-page' },
  { title: 'Some other page', url: '/some-other-page' },
  ...
];

The title property represents the navigation item text in the sidebar. url is the name of a file saved in pages folder.

For the new group to show up in the navigation add a new item to the navigation array:

export const navigation: Category[] = [
  { title: 'Title for the new group', items: newItems },
  ...
];