如何在使用NextJS重定向后删除查询参数？

在Next.js中，如果需要在重定向后从URL中删除查询参数，通常可以通过两种主要方式来实现：服务器端重定向（例如，在getServerSideProps中实现）和客户端重定向（例如，使用Router或useRouter）。

方案1：服务器端重定向（在getServerSideProps中实现）

在Next.js的getServerSideProps函数中，可以实现服务器端重定向并修改查询参数。这种方法的好处是页面在客户端渲染之前，URL已经被处理，从而提供更好的用户体验和SEO优势。

示例代码：

javascript
import { GetServerSideProps } from 'next';

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

  // 当确定需要重定向并删除某些参数时
  if (param) {
    const queryString = new URLSearchParams(restQuery).toString();
    res.writeHead(302, { Location: `/new-page?${queryString}` });
    res.end();
  }

  return { props: {} };
};

方案2：客户端重定向（使用Router或useRouter）

在客户端上，可以使用Next.js的Router API来实现重定向，并在重定向时清除或修改查询参数。这种方法适用于响应用户交互或其他在客户端触发的事件。

示例代码：

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>
      页面内容
    </div>
  );
};

export default MyComponent;

以上两种方法各有优势，选择哪种取决于具体的应用需求和场景。服务器端重定向更适合处理初始页面加载时的重定向，而客户端重定向则适用于响应用户交互后动态修改URL的场景。在实际使用时，可以根据实际需求灵活选择合适的重定向方式。