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, 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

/src/features/feature-b/PageMyNewScreen.tsx

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)

/src/features/feature-b/PageAdminMyNewScreen.tsx

import { AppLayoutPage } from "@/features/app/AppLayoutPage";
 
export default function PageAdminMyNewScreen() {
  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 PageMyNewScreen component in the new routing file

/src/app/app/(authenticated)/feature-b/page.tsx

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

Create or update the routes.ts of the current feature

/src/features/feature-b/routes.ts

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

Add or update env variables Create a new form field