Middleware & Routing

Requests are routed via middleware (in middleware.ts).

Agent Sites

The getDomain() function runs to get the domain/hostname (e.g. stags.agent.v4.homeflow.co.uk or www.ramptonbaseley.com).

Once we have the domain, the middleware rewrites the request to /${hostname}/${path}. For example, a request to rampton-baseley.agent.v4.homeflow.co.uk/branches will be rewritten to /rampton-baseley.agent.v4.homeflow.co.uk/branches, and render the page file app/[domain]/branches/page.tsx, with domain passed to the page as part of the params prop.

Unsupported Routes

Some themes will not support certain core pages.

The nature of the App Router in NextJS allows us to only render pages if page.tsx exists in the route folder.

If we don't want to support a route, for example /staff, we can skip page.tsx, loading.tsx and staff.site.tsx in theme/app/[domain]/staff/, and the same corresponding files inside the [slug] subfolder.

However we do require staff.admin.tsx file, plus the corresponding .admin.tsx file in [slug], because the bundler will attempt resolution of all the import path urls during build time, and said urls exist in the copied v4_admin folder ((admin)). To avoid errors, the unsupported-resource.admin.tsx just needs a default export with a notFound() call:

import { notFound } from 'next/navigation';

export default function StaffAdmin(): never {
  notFound();
}
Copy

On top of the theme setup, we need to also update v4_admin repo to hide the resource from the sidebar links. Go to themeUnsupportedPages and add the unsupported route to the theme array:

const themeUnsupportedPages: { [key: string]: PageNameMenuItem[] } = {
  ...
  gar: [ PageNameMenuItem.Staff, PageNameMenuItem.StaffList ],
  pegasus: [],
  ...
};
Copy

Once merged and version released update your .admin-version in theme.

Admin

Admin routes must be authenticated, so for requests to admin (e.g. stags.admin.v4.homeflow.co.uk) the middleware will first check for a session cookie and verify the session. It will redirect to /auth/signin if that verification is unsuccessful, where the user will be prompted to log in.

next.config.js Rewrites

There is a fairly long list of rewrites for different routes in the next.config.js file. Each of these is prefixed with ROUTE_PREFIX (the string '/:domain/:theme') to ensure it includes the domain and theme params when it is rewritten.

Note that many of the rewrites convert URL params like /sales to a query param, e.g. ?channel=sales, so this is how it is received as a prop in the page component.

{
  source: `${ROUTE_PREFIX}/:postcode([A-Za-z]{1,2}\\d[A-Za-z\\d]?\\s*-\\d[A-Za-z]{2})/:channel(sales|lettings)/:fragment*`,
  destination: `${ROUTE_PREFIX}/properties?postcode=:postcode&channel=:channel&fragment=:fragment*`,
},
Copy