Building a referral system with Next page router

[zealous skiff]

I'm trying to build a referral system with Next page router, here is my plan and question.

1. I can add a unique param in the URL for each user as part of the referral link
2. When a new users opens the referral URL that contains the referral param, the backend captures the param and save it to the DB

The question is in page router, how to capture this front end URL param at the backend? thanks

[sonic sierra]

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)

[long fossil]

like this?

https://yourdomain.com/api/url?referral=123

// pages/api/url.tsx
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const referral = req.query.referral;
}

[zealous skiff]

thanks, but this looks like it's an API route, I'm trying to get the param from front end URL, such as Google.com?refer=abcd

[long fossil]

like this

// pages/refer.tsx
import { GetServerSideProps } from "next";

export default function Page() {
  return <div></div>
}

export const getServerSideProps = (async ({ query }) => {
  const refer = query.refer;
  return {
    props: {},
  };
}) satisfies GetServerSideProps;

[zealous skiff]

oh, so it's to use GetServerSideProps? thanks let me check it out

[long fossil]

yes, so you can do the database operation inside of it

then pass the result to page from the props if you need

[zealous skiff]

Thank you @long fossil , appreciate the help here!

[long fossil]

np