NextJS rewrite retains URL search parameters

Question

NextJS rewrite retains URL search parameters

After a user clicks the button to access my website through email authentication, I need to verify if they have tokens. When they are redirected from Gmail to my page, there is a search parameter in the form of verification_token=**. If the user has already been authorized, this token needs to be removed.

According to the documentation on NextJS, I should use the NextResponse.rewrite function in middleware.ts to delete the token. However, when using this function, the page still displays with the same search parameter. I am using app router and Next 14.

I have attempted to delete the search parameter using

url.searchParams.delete('verification_token');

within the rewrite function, but it has not resolved the issue as the parameter remains. I have also tried different approaches such as nextResponse.redirect, but none have provided a solution.

javascript next.js

Answer 1

Answer №1

When dealing with proxying requests without changing the URL, I found success using the NextResponse.rewrite function. Alternatively, utilizing NextResponse.redirect proved effective in my case:

import { NextResponse } from "next/server";

export function customMiddleware(req) {
  const nextUrl = req.nextUrl;

  if (nextUrl.searchParams.has("verification_token")) {
    nextUrl.searchParams.delete("verification_token");
    return NextResponse.redirect(nextUrl);
  } else {
    return NextResponse.next();
  }
}

Answer 2

When dealing with proxying requests without changing the URL, I found success using the NextResponse.rewrite function. Alternatively, utilizing NextResponse.redirect proved effective in my case:

import { NextResponse } from "next/server";

export function customMiddleware(req) {
  const nextUrl = req.nextUrl;

  if (nextUrl.searchParams.has("verification_token")) {
    nextUrl.searchParams.delete("verification_token");
    return NextResponse.redirect(nextUrl);
  } else {
    return NextResponse.next();
  }
}

NextJS rewrite retains URL search parameters

Answer №1

Similar questions

Getting the Request URL from a Next.js API deployed on Cloudfront using S3 and Lambda@Edge

Error in React Typescript hook: The function is not executable

JavaScript - Attempting to Add Objects to Array Unsuccessful

Uploading files using Multipart/form-data in Node.js and Express.js

Issue encountered while attempting to send a direct message to a user that has been mentioned

Error message: "Unable to access 'title' property of an undefined value" for an item with a length of 1

What is the best way to create a moving line using EaselJS and TweenJS?

Issue with a hidden div, problem with scrolling, a div overlapping other divs

Run a Javascript function two seconds after initiating

Unable to access the contents of an array (React JS)

Unleashing the Power of Google Apps Script Filters

A concise way to write an else if statement in Javascript and jQuery

Maximizing the performance of plotting hundreds or thousands of series in a 2D scatter or line chart using Echarts

AngularJS - Setting an initial delay for ng-bind

HTTP GET request not updating data

TypeScript: creating an interface property that relies on the value of another

Deciphering HTML within a Vue attribute: Tips and tricks

Tips for modifying a list item on a different page

Is there a way to exclusively view references of a method override in a JS/TS derived class without any mentions of the base class method or other overrides in VS Code?

What is the best way to include a post identifier in my ajax request?