Replace a screen (route)
Goal: completely redesign a page — here the events screen — with a different layout and hero, keeping the rest of the module intact.
- Override file:
overrides/leisure/routes/events/page.js - Regen needed: run
npm run gen:modulesafter adding/renaming a route file (it also runs onpredev/prebuild). A pure replace also works through the existing shim, but running it is harmless and keeps the log honest.
Recipe
Keep the route export contract: a default export (the page), plus optional
generateMetadata and export const dynamic.
// overrides/leisure/routes/events/page.js
import { getDictionary } from '@modelcity/core/lib/i18n/dictionaries';
import { makeMetadata } from '@modelcity/core/lib/a11y/pageMetadata';
import EventsList from '@modelcity/leisure/components/organisms/EventsList';
// City-local component under the mirrored components/ path, NOT inside routes/:
import AranjuezEventsHero from '@modelcity/leisure/components/molecules/AranjuezEventsHero';
export const generateMetadata = makeMetadata('nav.eventsAgenda');
export const dynamic = 'force-dynamic';
export default async function EventsPage({ params }) {
const { lang } = await params;
const dict = await getDictionary(lang, 'leisure');
return (
<>
<AranjuezEventsHero title={dict.leisure.events.bannerTitle} />
<EventsList lang={lang} /* …city-specific layout/props… */ />
</>
);
}
gen:modules logs override route (replace): leisure/routes/events/page; the page
renders at /{lang}/events.
Notes
- The generated shim reads the winning file's content, so if your override adds a
new route export (e.g.
generateStaticParams) the shim reflects it — re-run the codegen after such a change. - Need a bespoke loading state for this screen? See Add a loading skeleton.
Verify
npm run gen:modules prints the replace log line; npm run dev renders the new
events page at /{lang}/events.