I am writing a page that uses the id and token to make a request to the backend and based on the result the user is redirected to either the register page or the login page with some query params
The redirect works as intended:
http://localhost:3000/email-verification/2115/5115 =>
is redirected to =>
http://localhost:3000/register?alertMessage=Ooops%2C%20something%20went%20wrong.%20Please%20try%20again&alertType=error
but the issue is that the return is an empty page, as soon as I delete the params
and try to access:
http://localhost:3000/register
it works fine
This is my code:
import type { GetServerSideProps } from 'next';
import { VERIFY_USER } from '@/constants/endpoints';
import { HOME, LOGIN, REGISTER } from '@/constants/routes';
import { request } from '@/utils/request';
interface ErrorData {
status: number;
message: string;
}
interface VerificationResponse {
_id: string;
isVerified: boolean;
errorCode: string;
errorData: ErrorData;
}
const EmailVerificationPage = () => null;
export const getServerSideProps: GetServerSideProps = async (context) => {
const {
params: { id, token },
} = context;
let redirect = HOME;
let alertMessage = '';
let alertType = 'error';
try {
const response = await request.get<VerificationResponse>(
`${VERIFY_USER}${id}/${token}/`
);
alertMessage = response?.data?.errorData?.message;
if (response?.data?.isVerified) {
redirect = LOGIN;
alertMessage = 'Please sign in with your login and password';
alertType = 'success';
}
} catch (error) {
alertMessage =
error?.response?.data?.errorData?.message ?? 'Something went wrong';
console.log(alertMessage);
redirect = REGISTER;
}
const destination = `${redirect}${
alertMessage
? `?alertMessage=${encodeURIComponent(
alertMessage
)}&alertType=${encodeURIComponent(alertType)}`
: ''
}`;
return {
redirect: {
destination,
permanent: true,
},
};
};
export default EmailVerificationPage;
My folder structure is as following:
pages/email-verification/[id]/ => inside the folder [token].tsx
and my other page is for example: pages/register.tsx
RESOLVED!!!!
Wow, turns out i was just missing an even empty getServerSideProps inside my redirected to page.... facepalm
export async function getServerSideProps() {
return {
props: {},
};
}