从Instagram打开Next.js页面时出现客户端错误的解决求助

关于Vercel Web Analytics的关联性 #

大概率无关，Vercel Analytics仅负责数据统计，不会因fbclid这类查询参数触发客户端异常。除非你在集成脚本时自定义了和查询参数相关的逻辑，否则可以排除这个因素。

现有代码无效的原因 #

你之前的代码只是读取了fbclid参数，但没有对路由做任何修正，无法解决参数导致的崩溃问题。需要主动移除该参数并修正路由。

解决方案 #

1. Pages Router（客户端全局处理） #

在_app.tsx或全局布局组件中添加路由修正逻辑，检测到fbclid时自动移除参数：

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

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    if (!router.isReady) return;

    const { fbclid, ...cleanQuery } = router.query;
    // 存在fbclid参数时，重定向到清除该参数的URL
    if (fbclid) {
      router.replace(
        { pathname: router.pathname, query: cleanQuery },
        undefined,
        { shallow: true }
      );
    }
  }, [router.isReady, router.query, router.pathname]);

  return <Component {...pageProps} />;
}

export default MyApp;

2. Pages Router（服务端处理，更高效） #

在页面的getServerSideProps中直接重定向，避免客户端加载时触发异常：

export async function getServerSideProps(context) {
  const { fbclid, ...restQuery } = context.query;

  if (fbclid) {
    const baseUrl = context.resolvedUrl.split('?')[0];
    const newQuery = Object.keys(restQuery).length 
      ? `?${new URLSearchParams(restQuery)}` 
      : '';
    return {
      redirect: {
        destination: `${baseUrl}${newQuery}`,
        permanent: false,
      },
    };
  }

  return { props: {} };
}

可以将这个逻辑抽成公共函数，在多个页面或_app.tsx中复用。

3. App Router（全局Middleware拦截） #

在项目根目录创建middleware.ts，全局拦截所有带fbclid的请求并重定向：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const url = request.nextUrl.clone();
  // 移除url中的fbclid参数
  url.searchParams.delete('fbclid');
  
  // 参数移除后URL有变化则重定向
  if (url.href !== request.nextUrl.href) {
    return NextResponse.redirect(url, { status: 302 });
  }

  return NextResponse.next();
}

// 匹配所有路由路径
export const config = {
  matcher: '/:path*',
};

这种方式最彻底，所有进入站点的请求都会先清除fbclid参数，从根源解决问题。

额外排查建议 #

如果重定向后仍有崩溃，打开浏览器控制台查看具体错误信息，可能是某些组件或依赖对fbclid的特殊格式（比如超长字符串）处理不兼容，针对性修复即可。

内容的提问来源于stack exchange，提问作者Agustin Forero