0

So I have the default page and some 'slug' dynamic pages, the urls look like this:

default page locally: localhost:3000/doc/default
slug page locally: localhost:3000/doc/[slug]

default page in production: default.com/doc
slug page in production: [slug].default.com/doc

The link I need should be inside the slug pages and lead to the default one. So far I tried getting the basePath from nextRouter to use as a href. But that returns the slug url ([slug].default.com/doc.

Can I use the Next.js Link component and point it to /doc/default? It works locally, but I don't want to push it to dev/prod just to test if it works.

kbo
  • 422
  • 5
  • 17
  • 1
    Could I ask why you need different routes local and production ? Wouldn't it be easier to just modify your local to match instead ? It seems here you are looking at domain for production. An example would be local to have local.default.com:3000/doc ( this would avoid the issue ) – Ziyed Aug 01 '22 at 13:07
  • just wanted to ask the exact same. that would be way more easy – Marcel Dz Aug 01 '22 at 13:07

1 Answers1

1

Have you tried redirects?

Next.js has an experimental a feature to redirect pages ahead of time inside its next.config.js file.

Let's say we'd like to redirect our root path site.com/ to site.com/en-us/. We could use useRouter whenever we needed to redirect the user or we could add directly into next.config.js:

const nextConfig = {
  async redirects() {
    return [
      {
        source: '/',
        permanent: false,
        destination: '/en-us',
      },
    ]
  }
}

Now anytime the user navigates to site.com/ he'll be redirected to site.com/en-us/ which will render the page inside pages/en-us/index.(jsx|tsx|mdx). It is also possible to use RegEx for matching as described on this issue.

For your use case, would be the the other way around. We'd probably have to use absolute paths, since we're redirecting to another domain. In this case, a subdomain of our root default.com domain.

// const getSlugs = fs.readdir(path.resolve(...), () => {})
const slugs = ['slug1', 'slug2']

const slugRedirects = slugs.map(slug => ({ 
  source: `/doc/${slug}`,
  destination: `https://${slug}.default.com/doc`,
  permanent: false
}))

const nextConfig = {
  async redirects () {
    return [...slugRedirects]
  }
}

module.exports = nextConfig

Now, whenever the user navigates to www.default.com/doc/slug1, either by typing the URL or clicking on a button that points to the pages/doc/[slug] pages, he will be redirected to slug1.default.com/doc.

Let me know if that helps. Cheers!

Moa
  • 1,456
  • 4
  • 20
  • Looks like exactly what I need, I'll give it a try and come back with the result, thanks! – kbo Aug 05 '22 at 15:05