Adding a Page

Step-by-step guide for adding a new page to an existing app.

1. Create the route folder

Place the route under the right group:


app/[lang]/(app)/my-route/
├── page.tsx          # Route entry point
└── page-view.tsx     # Main page content

For energy pages:


app/[lang]/(app)/my-route/page.tsx

2. Create `page.tsx`

The route entry point is typically a thin wrapper:


import PageView from "./page-view";
 
export default function MyRoutePage() {
  return <PageView />;
}

3. Create `page-view.tsx`

The main content component. Use "use client" for interactive pages:


"use client";
 
import { GEnergyPage } from "@numa/ui/shared/layout/energy";
import { useTranslations } from "next-intl";
 
export default function PageView() {
  const t = useTranslations("myRoute");
 
  return (
    <GEnergyPage title={t("title")}>
      {/* Page content */}
    </GEnergyPage>
  );
}

4. For list pages

Add data fetching, filters, and modals:


app/[lang]/(app)/my-route/
├── page.tsx              # Route entry
├── page-view.tsx         # List view with query hooks
├── filter-modal.tsx      # Filter UI
├── funcs.ts              # Column definitions, helpers
└── new-item-modal.tsx    # Create form modal

Example list page:


"use client";
 
import { useGetItemsQuery } from "@numa/api/services/energy";
import { GEnergyPage } from "@numa/ui/shared/layout/energy";
 
export default function PageView() {
  const { data, isLoading, error, fetchNextPage, isLoadingMore } =
    useGetItemsQuery({ search: "" });
 
  return (
    <GEnergyPage
      title="Items"
      query={{ isLoading, error }}
    >
      <GTable
        data={data?.items ?? []}
        columns={columns}
        onLoadMore={fetchNextPage}
        isLoadingMore={isLoadingMore}
      />
    </GEnergyPage>
  );
}

5. Add translations

Add translation keys to packages/i18n/messages/en.json:


{
  "myRoute": {
    "title": "My Route",
    "description": "Page description"
  }
}

For energy pages, add a nav item in packages/config/platforms.ts under ENERGY_NAV:


{
  label: "My Route",
  icon: "some-icon",
  href: "/my-route",
}

Adding a Page

1. Create the route folder

2. Create page.tsx

3. Create page-view.tsx

4. For list pages

5. Add translations

6. Add navigation (Energy sidebar)

2. Create `page.tsx`

3. Create `page-view.tsx`