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 { Suspense } from "react";
 
import PageXXX from "@/features/module-b/PageXXX";
 
export default function Page() {
  return (
    <Suspense>
      <PageXXX />;
    </Suspense>
  );
}

Add or update env variables Create a new form field