next-drupal icon indicating copy to clipboard operation
next-drupal copied to clipboard

Having the same path alias for different next.js microsites

Open shaxaaa opened this issue 3 years ago • 3 comments

Hi guys,

First of all, great work! We are doing a PoC if the next module is a good fit for us and everything seems to be working so far. One thing we weren't able to see though is if we can have the same alias for multiple next.js sites. For example we have 3 presentation sites and all 3 of them should have a page aliased "/contacts" but still the node is different. We are thinking of prefexing them automatically with the site id in the alias and then do a reverse change on the next.js site from translatePathFromContext.

Did someone tackled this already or is there something done out of the box?

shaxaaa avatar Aug 08 '22 08:08 shaxaaa

We've solved a similar requirement in our project using Next.js rewrites: https://nextjs.org/docs/api-reference/next.config.js/rewrites

alex-ahumada avatar Aug 08 '22 08:08 alex-ahumada

Yes like @alex-ahumada said, you can do this using Next.js rewrites.

Let's say you have 3 microsites on Drupal, each with their own contact page:

Untitled-2022-03-23-1048-2-2

In your next.config.js, you can use rewrites to map /contact to /microsite-a/contact:

const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: "/contact",
        destination: "/microsite-a/contact",
      },
    ]
  },
}

module.exports = nextConfig

With the config above, visiting https://microsite-a.com/contact will render the contact page for Microsite A. You can do same for the other Next.js sites.

You can also use a similar strategy to handle more pages that are shared on the Drupal site using dynamic routes:

/** @type {import('next').NextConfig} */
const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: "/microsite-a/:path*",
        destination: "/:path*",
      },
    ]
  },
}

module.exports = nextConfig

This way, anything that resolves at /microsite-a/PATH in Drupal can be accessed at /PATH on your Next.js site.

Hope this helps.

shadcn avatar Aug 08 '22 10:08 shadcn

@shadcn curries if you are using pathauto for prefixing the pages with the microsites in your example and what happens afterwards when your are building your sitemaps, real time SEOs in Drupal with Yoast and etc.

One more question that I'm exploring is potentially different enabled languages per microsite and different translations per microsite.

shaxaaa avatar Aug 09 '22 04:08 shaxaaa

@shaxaaa Did you explore this approach anymore? I'm about to dive into this with a multilingual multi-frontend single drupal install.

Also curious if it breaks on demand incremental site regeneration.

martdavidson avatar Nov 30 '22 17:11 martdavidson