reactjsnext.jsgetserversideprops

Next.js redirect with query params does not work


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


Solution

  • RESOLVED!!!!

    Wow, turns out i was just missing an even empty getServerSideProps inside my redirected to page.... facepalm

    export async function getServerSideProps() {
      return {
        props: {},
      };
    }