Building a referral system with Next page router
Answered
Blanc de Hotot posted this in #help-forum
Blanc de HototOP
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
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
Answered by Ray
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;8 Replies
@Blanc de Hotot 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
like this?
https://yourdomain.com/api/url?referral=123
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;
}@Ray like this?
https://yourdomain.com/api/url?referral=123
ts
// pages/api/url.tsx
import { NextApiRequest, NextApiResponse } from "next";
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const referral = req.query.referral;
}
Blanc de HototOP
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
@Blanc de Hotot 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
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;Answer
Blanc de HototOP
oh, so it's to use GetServerSideProps? thanks let me check it out
@Blanc de Hotot oh, so it's to use GetServerSideProps? thanks let me check it out
yes, so you can do the database operation inside of it
then pass the result to page from the props if you need
@Ray yes, so you can do the database operation inside of it
Blanc de HototOP
Thank you @Ray , appreciate the help here!
np