#Multiple Domain Redirection

82 messages · Page 1 of 1 (latest)

pliant birch
#

Hi there, would i be able to do multiple domain redirection in NextJS.

For example, my main site is example.com, can i set it up so that i can handle like

abc.com
xyz.com

Assuming that abc.com and xyz.com has setup their CName record pointing to my example.com.

I was also planning to use Caddy server as it seems that they have the API access which makes it easy when people add domain.

I'm trying to do a link shortener with custom domain

little cargoBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

cursive mason
#

Just try it out

pliant birch
cursive mason
pliant birch
#

I don't get it. I know how to do it for one domain. I'm jus confused about setup for multiple domain in the same project. How does that single NextJS project handle all the different domain.

cursive mason
#

in my case it's from cloudflare so these are my nameservers

image.png
pliant birch
#

Then do i need to do anything regarding the NextJS app.

#

Like how does it know that

example.xyz/ABC is supposed to redirect to google.com
I need to setup the redirection logic somewhere right even if it redirects to my main domain

cursive mason
#

If it's to your own domain you can set it up with nameservers otherwise this is your best bet

pliant birch
cursive mason
#

Nope, should theoretically work if I’m understanding your question correctly.

pliant birch
graceful crescent
# pliant birch Okayy i'll give it a try! Thanks! I believe i need https://vercel.com/docs/edge...

the easiest thing you can do when redirecting mulitple domains to other locations is to use a middleware in my opinion.

You get the host like this:

  // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
  let hostname = req.headers
    .get("host")!
    .replace(".localhost:3000", `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);

And can then do redirections with it. For that I suggest an object that tells which route where to go:

const domainRedirects = {
  'example.xyz': {
    '/ABC': 'https://google.com', // Redirect example.xyz/ABC to google.com
    '/other': '/internal-page' // Redirect example.xyz/other to your internal /internal-page
  },
  'anotherdomain.com': {
    '/': '/' // Redirect root of anotherdomain.com to your app's root
  },
// ... more
};

And then you only need to redirect:

const redirect = domainRedirects[hostname]?.[pathname];

if (redirect) {
  return NextResponse.redirect(new URL(redirect, request.url));
}
pliant birch
# graceful crescent the easiest thing you can do when redirecting mulitple domains to other location...

This one sounds good. I remember the Next.JS middleware being pretty restrictive right.

Because it's possibly a big and dynamic list. Like i need to get to the tablebase in order to match my item.

Like for example,
localhost:3000/abc this will lead to say google.com
my-custom-domain/abc this will make me find the domain which is my-custom-domain in my database table and then match the slug(abc) in order to find the link i'm supposed to redirect it to.

Those domain will be verified that the DNS (CName record) will be added in their DNS records. (I have done that, just hasn't gotten the caddy server to work yet, very hard to know how to test that) so that my middleware can catch them

#

Is my train of thoughts still correct?

graceful crescent
# pliant birch This one sounds good. I remember the Next.JS middleware being pretty restrictive...

in my opinion using the middleware is the correct approach as you might have limits inside your DNS configuration.

You are right, the middleware run in edge and because of that some functionalities are not available. However: your data is inside a database and normal fetch functions working fine inside a middleware. So it's even better, because you don't need to do everything manually. You just fetch your "redirectionMap" inside your middleware and the middleware will redirect to the correct place 👍

pliant birch
graceful crescent
graceful crescent
#

@pliant birch solved?

pliant birch
#

Hi sorry i think so. Haven't got it to try was busy with school

#

Will test it out this week

graceful crescent
#

alr, looking forward to your resposne

graceful crescent
brave hearth
#

Latency is 63ms. API Latency is 80ms

pliant birch
#

I've tried deploying it on vercel (It's slow because i think it's in a different region?)

#

For some reason, it works on my local environment but not on the deployed)

#

Can verify that the domain is saved into the database.

Screenshot_2024-12-31_at_12.19.16_PM.png
#

And it seems that right now, even if i'm using like [slug] without the domain it doesn't work.

e.g. marketable-fyi.vercel.app/test

#

I think probably because i'm not in the root domain

graceful crescent
# pliant birch

I haven't read thought the whole thread again, but at least your DNS config is wrong. You need to point to the cname from vercel instead of directly to your project. Point it like this: (see attached).

Green arrow points to the server from vercel and my "www." points also to the name servers of vercel

thefileusearchedfor.png
pliant birch
#

Wait hold up.

When i visit the vercel link that is provided,
https://marketable-fyi.vercel.app/

I don't land in my landing page anymore. Instead, i land at

Middleware triggered: {
  hostname: 'marketable-fyi.vercel.app',
  path: '/',
  url: 'https://marketable-fyi.vercel.app/'
}
Rewriting to: https://marketable-fyi.vercel.app/marketable-fyi.vercel.app/
graceful crescent
pliant birch
graceful crescent
pliant birch
graceful crescent
pliant birch
#

Alright the entire dashboard works, upon creating basic slugs.

I get 404 when i go to that link. Middleware says

Middleware triggered: {
  hostname: 'www.marketable.fyi',
  path: '/nhfimEn',
  url: 'https://www.marketable.fyi/nhfimEn'
}
Screenshot_2025-01-01_at_10.40.09_PM.png
#

So i think it probably could be that i didn't write the middleware logic robust enough?

graceful crescent
graceful crescent
pliant birch
graceful crescent
#

alr got it. Where inside your middleware (or page) is the request to your DB (to see if it matched somewhere)?

pliant birch
graceful crescent
pliant birch
#

Alright rerunning the deploying >_> The server and the local environment development is so different :C

#

Okay i see hello world

#

Which means it gets route here

graceful crescent
pliant birch
graceful crescent
# pliant birch nope it doesn't get hit

alr, instead of having this as a route, change it to an page:
https://github.com/xavieroyj/marketable-fyi/blob/357fee61820a7245119985dc377fbb630dd4f956/app/[domain]/[slug]/route.ts#L9

So rename to page.tsx.
Add the page syntax:

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  // your code here

  return <h1>My Page</h1>
}

The params can be the same.

Do you see the console.log now?

pliant birch
#

nope still don't see it

graceful crescent
pliant birch
#

yeah i rechecked i did

Screenshot_2025-01-01_at_11.17.00_PM.png
graceful crescent
# pliant birch yeah i rechecked i did

Ah the github cache wasn't updated yet. Now I see it.

When you visit your page at:

https://yourdomain.com/mydomain.com/my-slug/

Do you see your console.log now?

pliant birch
#

This is just the standard nextjs routing right?

graceful crescent
#

@pliant birch just to get this right:
example.com (https://example.com/) -> shows your langingpage
click.example.com (https://click.example.com/some-slug) -> with some slug that redirect to somewhere else (defined in the database)

click as subdomain is just an example

Is this correct?

pliant birch
#

I think the slug one (2nd option) is purely because i haven't setup the database calls yet

#

But ideally i should be setting up a separate domain. Let's say
click.crocheted-dreams.com/my-slug and trying the redirect first right

graceful crescent
#

Wouldn't it be easier to directly separate it?

pliant birch
#

okay i'll have a look

#

thanks

#

🙏🏼

graceful crescent
#

btw. it looks like the main issue here is that

/some-slug/

will never match to

[domain]/[slug]

as it's missing at the end (see attached)

thefileusearchedfor.png
little cargoBOT