Skip to content


Pages are defined using the Next.js file-system based router. They’re lightweight React Components that defer most of their functionality to other Components such as Table, CardList, and Form. Pages themselves are primarily responsible for:

  • Fetching data
  • Setting the page title
  • Rendering breadcrumbs
  • Rendering high-level page layout (positioning of other components)

Standard Pages

All Code Genie projects come with a core set of standard pages required for setup, layout, auth, and more.

  • Directorypages
    • _app.tsx
    • _document.tsx
    • 404.tsx
    • account.tsx
    • forgot-password.tsx
    • index.tsx login
    • register.tsx
    • reset-password.tsx
    • verify-account.tsx

_app.tsx is the main entry point of your application. The <AppWrapper> component is responsible for initializing Auth, HTTP Client, Theme, TanStack Query (FKA React Query), and Global Layout.

_document.tsx allows you to customize the outter document such as <html>, <head>, and <body> sections. Read Next.js Custom Document for more details.

404.tsx is used to create a custom 404 page. See Next.js Custom Errors for more information on customizing 404 and 500 pages.

account.tsx renders an Account page that lets you edit account details such as username and avatar.

Other standard pages include authentication flows such as login, register, forgot password, reset password, and verify account.

Entity Pages

  • Directorypages
    • Directorywidgets list page
      • Directory[widgetId] details page
        • DirectoryrelatedWidgets
          • Directory[relatedWidgetId] related details page
            • index.tsx
        • index.tsx
      • index.tsx

Pages are generated for each Entity defined in your App Definition. Entites marked as isTopLevelEntity receieve root-level routes (and appear in the Side Nav), while other pages exist under their parent entities as nested routes.

List Page

List Pages list all of the records for a given Entity (presented as either a Table or a Card List) and include a Create button that opens an <*UpsertModal> for creating a new record.

In our example, a List Page for the Widget Entity is generated at the /widgets route, however, one isn’t generated for the RelatedWidget since records of nested entities are listed on the Details Page of their parent record.

Details Page

Details Pages present information for a single record, including direct record properties, as well as related entities/records.

In our example, a Details Page for the Widget Entity is generated at the /widgets/[widgetId] route, and another Details Page for the RelatedWidget Entity is generated at the /widgets/[widgetId]/related-widget/[relatedWidgetId] route. See Next.js dynamic routes for more details.