Skip to main content

Elevate Routing

Description​

As Elevate includes a full dynamic Route System based on CMS routes (divided between Menu routes and Map Routing ones), we have set a single Next.js route [[...routeSegments]] which basically catch-all the possible routes without an existing manual page (a dir inside src/app with a page.ts(x) file) and then we have created a src/views dir where the per route type View Component is defined and routeToViewMapper.ts inside the same src/views dir.

With that every dynamic route handled via Elevate CMS can be mapped into a single View per route with the following requirements:

  • Exported named View/Page Component for the render part
  • Exported named generateMetadata function to handle async metadata
  • Non-exported getPageData async function to handle async data fetch for the page (used in both Component and generateMetadata)

With this, the single dynamic route in [[...routeSegments]]/page.tsx will use both the Component and the metadata fn to generate the proper things to be used by Next.js to render content and metadata accordingly.

Default Route definition​

Elevate uses a Config-based default route (by default on Control under config > application > navigation > defaultRoute) to be able to redirect users on the first access to a certain url.

On the implementation side, this is done the src/middleware.ts. It will rewrite the url when a user access the default HTTP route '/' if the defaultRoute is not the same. It handles future redirection by:

Customization​

You can customize the Elevate routes in many different ways:

  • You can update existing routes to map your existing application paths
  • You can update an existing route to use a different template
  • You can add new routes and map it to existing templates
  • You can add new routes with new templates (this will require new View creation)

As indicated before, Elevate used a CMS-based route definition so the first you need is to identify where the route is defined/going to be defined. Currently the Elevate CMS routes are spread into two places:

  • Menu: each Menu Item has it's corresponding route
  • Route Mappings: besides the menu, all the other application routes are defined in the CMS routesMapping, specifically in the RouteMapping route field.

Update existing route path​

If you are update an existing route, first you need to identify where to look for (Menu Item vs Route Mappings), then you can update the string there to your matching path. (ie: /epg --> /programguide)

Update mapping from existing route​

If you need to update an existing route to match a different existing template, you should go to your CMS definition, and update the Page item template field.

info

If you use Accedo Control, the list of valid template are mapped into the Page Entry type, so you should have a list with the existing template values.

Add new route​

Adding a new route shouldn't be that different than previous cases, unless you want to create a new template as well.

Using existing template​

If you need to add a new route, first identify where is going to be localed (Menu Item vs Route Mappings) and then add an entire new Item in the corresponding list with the new route path into the proper route field and the existing template in the Page field.

With new template​

For this case, together with the things definied in the previous item, you will need:

  • Map the new template into your CMS system (If using Accedo Control: add new validation rule under the Page entry type template field)
  • Create a new View under src/views and add the specific case in the src/views/routeToViewMapper.ts file for pageLayoutMapViews.

Routes Error handling​

Wrongly defined routes​

Not Yet implemented

warning

https://accedobroadband.jira.com/wiki/spaces/Elevate/pages/3056041998/Elevate+Nested+Routes+CMS+definition

Duplicated routes​

A duplicated route error handled is introduce into [[...routeSegments]]/page.tsx routeErrorHandling method. If a duplicated route is found and Error is logged so the app can still work (will use first found route), but the App Developers can see that an error is happening

Not Mapped route​

This case covers a route in the CMS-based route list that it is mapped into a template that is not mapped in the application (src/views/routeToViewMapper.ts file pageLayoutMapViews object).

In this case, an error is thrown and it's handled in the global Application Error within the src/app/error.tsx Error file.