Pages

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.

You can set the listView setting on an Entity to change the list presentation of records. This setting affects how they’re presented on the list page for root entities, or the details page of the parent record for nested entities.

{
  entities: {
    Widget: {
      ui: {
        listView: 'CardList'
      }
    }
  }
}

It’s recommended to use CardList when:

There are likely to be few (<= 12) records on the page
Users likely won’t want to compare values between records (vertical scanning of columns) or sort/filter.

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.

You can choose to not generate the details page by setting ui.generateDetailsPage: false on the Entity:

{
  entities: {
    Widget: {
      ui: {
        generateDetailsPage: false
      }
    }
  }
}

It’s recommended you do this for entities that are “simple”; i.e. entities that have few properties and no child relationships.