Routing fundamentals

The routing in React accelerator is based on NextJS's routing where files are defined in app directory to handle requests. The Dynamic routes is used to handle requests for each page, product and category templates. For example:

• app/HomePage/[[...slug]]/page.tsx: handles requests to Home page template like https://localhost:3001, where the slug value is undefined, or https://localhost:3001/another-home where the slug value is an array [ another-home] .
• app/ProductWithVariantsProduct/[[...slug]]/page.tsx: handles requests to ProductWithVariants product template. For example: https://localhost:3001/woman/tops/court-dress-black_m-638113574893682732, where the slug value is [ 'woman', 'tops', 'court-dress-black_m-638113574893682732' ]

How does the system map an Url to a template?

Every pages, products and categories have a unique Url. This can be configured by setting the field Url.

When a request is made to this Url, a file named middleware.ts, which is a NextJS's middleware, is handling the incoming request. What the middleware does is, it sends a GraphQL request to Litium to get the template name of the Url, which is returned by the field __typename. Then the request is forwared to the corresponsing page.tsx to handle. For example:

At the end of middleware.ts, there is a Matcher config to config what requests are ignored by the middleware.

Next steps

• How to create blocks
• How to create pages