Create your own page

Create a page by adding its page.tsx file. Register the route so the app can identify the page and apply its settings, then add a navigation link if it should appear in the menu.

The snippets below use Reports as an example. Substitute your own page name, URL and key when following the steps. Start with your project running locally.

1. 1

   Create the page

   Create a folder for your page under src/app/(protected-pages)/ and add a page.tsx file inside it. For example:

   src/app/(protected-pages)/reports/page.tsx

   export default function ReportsPage() {
     return <div>Reports</div>
   }

   The page folder determines the URL: reports/page.tsx creates /reports. Pages inside (protected-pages) use the app's existing layout and navigation; the group name in parentheses is not part of the URL.

   With your development server running, open your page's URL, such as http://localhost:3000/reports. Its content should appear inside the app's layout. It will not have a menu link until you add one.

2. 2

   Register the page with the app

   In src/configs/routes.config.ts, add this entry inside the existing protectedRoutes object:

   src/configs/routes.config.ts

   '/reports': {
     key: 'reports',
     authority: [],
   },

   Replace /reports with your page's URL and choose a unique key. The key identifies the page within the app; use the same value if you add a navigation item for it.

   Keep the existing route entries and // nateui:... comments. Add the new entry alongside them.

   Leave authority: [] as shown for this example. The starter's route configuration and (protected-pages) group do not enforce sign-in; see Auth when adding access control.

3. 3

   Add a navigation link (optional)

   Add a link if you want the page to appear in the app's navigation. A page without a menu item is still available at its URL.

   Choose an icon for the link. You can use an existing entry in src/configs/navigation-icon.config.tsx, or add one. For this example, add this import alongside the existing imports:

   src/configs/navigation-icon.config.tsx

   import { PiFileText } from 'react-icons/pi'

   Then add an entry inside the existing navigationIcon object:

   src/configs/navigation-icon.config.tsx

   reports: <PiFileText className="text-xl" />,

   Keep the other icon entries and // nateui:... comments.

   In src/configs/navigation.config.ts, add this item inside the existing navigationConfig array:

   src/configs/navigation.config.ts

   {
     key: 'reports',
     path: '/reports',
     title: 'Reports',
     icon: 'reports',
     type: 'item',
   },

   Use the same key as the route entry so the app can mark the menu item as active. Set path to your page's URL, title to its display name, and icon to the icon-map entry you chose.

   Keep the existing menu items and insertion comments. Place the new item where you want the page to appear in the menu.

   Open the page from the navigation. Its content should appear, and its menu item should be marked as active.

Continue building your screen in page.tsx, reusing components from src/components/. When the page needs records, follow Connect your data. For page padding, width or footer changes, see Layouts.