How to use different layouts for dynamic internationalised routes coming from a headless cms? #65459

rnnyrk · 2024-05-07T14:47:44Z

rnnyrk
May 7, 2024

I'm working on a project using a Headless CMS. All pages are fetched dynamically from there so we can use internationalised slugs. This means;

EN: /tickets/buy
NL: /tickets/koop
EN: /accommodations/tents/my-english-slug
NL: /accomodaties/tenten/mijn-nederlandse-slug

Currently we create the pages with getStaticProps and render a layout via the pages directory. The setup looks something like this:

export const getStaticProps: GetStaticProps = async (context: GetStaticPropsContext) => {
 const { site, slug, locale } = getPageProperties(context);

 try {
   const [page, layout, locales] =
     await Promise.all([
       storyblokProvider.fetchPage({ site, slug, locale, locales }),
       storyblokProvider.fetchLayout(site, locale),
     ]);
 } catch() {}
};

export default function DynamicPage(props) {
 const { site, metaTitle, metaDescription, component } = props;

 const PageTemplate = PageTemplates[component] as FC<Props>;

 return (
   <Head />
   <PageTemplate {...props} canonicalUrls={canonicalUrls} site={site} />
 );
};

So currently we do not use any for of build-in optimised NextJS layout handeling like https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#per-page-layouts

We've now started building a new part of the application in App Router and are planning to migrate the whole application in the near future. Therefore we are looking for the best way to setup dynamic internationalised routes combined with the power of layouts in the new app router.

Currently I've created a page with this structure: app/[site]/[locale]/[...slug]/page.tsx;
This now includes something similar to the first provided example of the pages router.

export async function generateMetadata({ params: { site, locale, slug } }) {
  const page = await getBySlug({ site, slug: slug.join("/"), locale });

  return {
    title: page.content.metaTitle,
    description: page.content.metaDescription,
  };
}

async function DynamicAppPage({ params: { site, locale, slug } }) {
  const [config, page] = await Promise.all([
    await getSiteData({ site }),
    await getBySlug({ site, slug: slug.join("/"), locale }),
  ]);

  const PageTemplate = PageTemplates[`${page.content.component}Template`];

  return (
      <PageTemplate
        component={page.content.component}
        sections={page.content.sections}
      />
  );
}

export default DynamicAppPage;

I thought of maybe using Route Groups: https://nextjs.org/docs/app/building-your-application/routing/route-groups
But how does one dynamic loaded route knows to what group it belongs?

Any suggestion on how to leverage the layouts for dynamic routes in the new app router?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use different layouts for dynamic internationalised routes coming from a headless cms? #65459

{{title}}

Replies: 0 comments

Select a reply

How to use different layouts for dynamic internationalised routes coming from a headless cms? #65459

rnnyrk May 7, 2024

Replies: 0 comments

rnnyrk
May 7, 2024