I am looking for a solution for dynamic breadcrumb where the breadcrumb definition is colocated with the page. Is there a function in NextJS where I can import the page.tsx resolved by a URL?

I want to achieve something like the following.
app/settings/page.tsx

export default function SettingsPage() { // code to return page }
export function Breadcrumb() { return <>Settings</> }

then in a breadcrumb component

const pathname = usePathname() // /settings/contacts
const nodes = []
getParentPaths(pathname).map(parent => {
  const module = getPageImport(pathname)
  if ('Breadcrumb' in module) {
    nodes.append(<module.Breadcrumb/>)
  }
})

Any suggestions for dynamic breadcrumbs are welcomed.