How to drop the query parameters after a redirect with NextJS?

In Next.js, if you need to remove query parameters from the URL after redirection, you can typically achieve this through two main approaches: server-side redirection (e.g., implemented in getServerSideProps) and client-side redirection (e.g., using Router or useRouter).

Approach 1: Server-Side Redirection (Implemented in getServerSideProps)

Within the getServerSideProps function of Next.js, you can implement server-side redirection and modify query parameters. The advantage of this method is that the URL is processed before the page is rendered on the client side, providing better user experience and SEO benefits.

Example Code:

javascript
import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async ({ query, res }) => {
  const { param, ...restQuery } = query;

  // When you determine that redirection is needed and certain parameters should be removed
  if (param) {
    const queryString = new URLSearchParams(restQuery).toString();
    res.writeHead(302, { Location: `/new-page?${queryString}` });
    res.end();
  }

  return { props: {} };
};

Approach 2: Client-Side Redirection (Using Router or useRouter)

On the client side, you can use Next.js' Router API to implement redirection and clear or modify query parameters during redirection. This approach is suitable for responding to user interactions or other client-triggered events.

Example Code:

javascript
import { useRouter } from 'next/router';
import { useEffect } from 'react';

const MyComponent = () => {
  const router = useRouter();

  useEffect(() => {
    const { param, ...restQuery } = router.query;

    if (param) {
      const queryString = new URLSearchParams(restQuery).toString();
      router.push(`/new-page?${queryString}`);
    }
  }, [router]);

  return (
    <div>
      Page content
    </div>
  );
};

export default MyComponent;

Both methods have their advantages, and the choice depends on specific application requirements and scenarios. Server-side redirection is better suited for handling redirection during initial page load, while client-side redirection is appropriate for dynamically modifying the URL after responding to user interactions. In practice, you can flexibly choose the appropriate redirection method based on actual needs.