Create a page

First things to note, is that every page use a layout. More about layouts

Example page

pages/articles.tsx

import { AppHead } from "@components";
import MainLayout from "components/layouts/MainLayout";
import { FC } from "react";
import { Articles } from "../modules/Articles/PagesContainer/Articles";

type PageComponent = FC & { layout: typeof MainLayout };

const ArticlesPage: PageComponent = () => {
  return (
    <>
      <AppHead title="Bee V2" />
      <Articles />
    </>
  );
};

ArticlesPage.layout = MainLayout;

export default ArticlesPage;

This page displays a list of articles. First, we need to assign a layout on this page. As we can see, here it's the main layout, which consists of a leftsider menu, a header and a content. The content will be the articles table list. The <Articles> components is a page container in that hold all elements that make this specific table list.

info

Using the modules folder is a good way to separate UI and split the code for a better understanding and future implementation. But like the above example, <Articles> could be changed by any component.

Create your first Page

Add a new file to /pages folder to create a new page. As we are using NextJS, the name of the new created file will represent the new available route in our app.

• pages/index.tsx -> localhost:3000/
• pages/users.tsx -> localhost:3000/users
• pages/articles.tsx -> localhost:3000/articles
• pages/add-article.tsx -> localhost:3000/add-article

Find out more about NextJS Pages and Routing

Use the above snippet to build your new pages.

pages/my-new-page.tsx

type PageComponent = FC & { layout: typeof MainLayout };

const MyNewPage: PageComponent = () => {
  return (
    <>
      <AppHead title="Bee V2" />
      <Content />
    </>
  );
};
MyNewPage.layout = MainLayout;

export default MyNewPage;

A new page is now available at http://localhost:3000/my-new-page.

If you need to create page with Nested Route, you can create folder in /pages folder and put page file inside the folder.

• pages/article/[id].tsx -> localhost:3000/article/[id]
• pages/article/edit/[id].tsx -> localhost:3000/article/edit/[id]

Pretty cool, but how making this new route available for the end user ? Sider Menu Component !