Create a new page

Create a new page


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


Create your Page component file

Create a new file, PageMyNewScreen, in the appropriate feature within the features folder (we will use an imaginary feature-b feature for this example).

  • If it's the first page of a new module, place it in a new folder named after the feature (feature-b here).
  • If you're adding a page to an existing feature, place it in that feature's folder.
        • PageMyNewScreen.tsx
    • Define PageMyNewScreen

      Define your PageMyNewScreen component with minimal content (note the Page prefix here).

      For a new app page

      import { AppLayoutPage } from "@/features/app/AppLayoutPage";
      export default function PageMyNewScreen() {
        return <AppLayoutPage></AppLayoutPage>;

      For a new admin page

      (note the PageAdmin prefix here, you need to udpate your component name)

      import { AppLayoutPage } from "@/features/app/AppLayoutPage";
      export default function PageAdminMyNewScreen() {
        return (

      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 PageMyNewScreen component in the new routing file

        "use client";
        import { Suspense } from "react";
        import PageMyNewScreen from "@/features/feature-b/PageMyNewScreen";
        export default function Page() {
          return (
              <PageMyNewScreen />;

        Create or update the routes.ts of the current feature

        import { ROUTES_APP } from "@/features/app/routes";
        export const ROUTES_FEATURE_B = {
          app: {
            root: () => `${ROUTES_APP.baseUrl()}/feature-b`,
            myNewScreen: () => `${}/my-new-screen`,