Guides
Create a new page

Create a new page

Why?

Allows you to add an empty accessible page to your application.

How?

Create your Page component file

Create a new file, PageXXX, in the appropriate module within the features folder.

  • If it's the first page of a new module, place it in a new folder named after the module.
  • If you're adding a page to an existing module, place it in that module's folder.
        • PageXXX
    • Define PageXXX

      Define your PageXXX component with minimal content.

      For a new app page

      /src/features/module-b/PageXXX
      import { AppLayoutPage } from '@/features/app/AppLayoutPage';
       
      export default function PageXXX() {
       
        return (
          <AppLayoutPage>
          </AppLayoutPage>
        );
      }

      For a new admin page

      /src/features/module-b/PageAdminXXX
      import { AppLayoutPage } from '@/features/app/AppLayoutPage';
       
      export default function PageAdminXXX() {
       
        return (
          <AdminLayoutPage>
            <AdminLayoutPageContent>
            </AdminLayoutPageContent>
          </AdminLayoutPage>
        );
      }

      Add this page to application routing

      Following NextJS App Router (opens in a new tab) routing, create a new file, page.tsx, where you want to access the defined page

              • page.tsx
      • Use your PageXXX component in the new routing file

        /src/app/app/(authenticated)/module-b/page.tsx
        'use client';
         
        import PageXXX from '@/features/module-b/PageXXX';
         
        export default function Page() {
          return <PageXXX />;
        }