NextJs生产环境页面渲染异常：含#的URL点击返回按钮出错

1. 避免混合路由模式冲突 #

NextJS默认采用HTML5 History模式管理路由，如果你手动在URL中添加#（比如锚点跳转或自定义hash路由），浏览器返回操作可能会触发NextJS客户端路由与原生hash变化的逻辑冲突。如果确实需要使用hash路由，建议通过next/router的API统一处理，不要直接手动修改URL的hash部分。

2. 监听Hash变化强制组件更新 #

在涉及hash的页面组件中，添加hashchange事件监听，当浏览器返回触发hash变化时，手动更新组件状态或触发路由刷新：

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

export default function ServicesPage() {
  const router = useRouter();
  const [currentHash, setCurrentHash] = useState(window.location.hash);

  useEffect(() => {
    const handleHashUpdate = () => {
      setCurrentHash(window.location.hash);
      // NextJS 13+ 用router.refresh()强制刷新页面数据
      router.refresh();
    };

    window.addEventListener('hashchange', handleHashUpdate);
    return () => window.removeEventListener('hashchange', handleHashUpdate);
  }, [router]);

  // 页面内容渲染逻辑依赖currentHash
  return <div>{/* 你的页面内容 */}</div>;
}

3. 让浏览器原生处理Hash跳转 #

NextJS的Link组件默认会拦截所有路由跳转，包括带hash的URL。如果是浏览器返回触发的hash变化，可通过配置让浏览器原生处理：

• 避免用Link组件跳转带hash的内部链接，改用原生<a>标签（添加href="#services"）；
• 在next.config.js中调整路由规则，跳过对hash部分的客户端路由拦截：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: '/:path*',
        locale: false,
      },
    ];
  },
};

4. 清除组件状态缓存 #

生产环境下NextJS可能会缓存组件状态，导致hash变化时页面未重新渲染。确保页面数据获取逻辑依赖hash值：

• 客户端渲染：在useEffect中把hash作为依赖项，重新获取数据；
• 服务端渲染：在getServerSideProps中解析hash并传递给组件：

export async function getServerSideProps(context) {
  const hash = context.req.url.split('#')[1] || '';
  // 根据hash获取对应数据
  const pageData = await fetchYourData(hash);
  
  return { props: { pageData, hash } };
}

5. 检查生产环境缓存配置 #

如果是静态资源或页面缓存导致的异常，可在next.config.js中调整缓存策略：

module.exports = {
  headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'no-cache, no-store, must-revalidate',
          },
        ],
      },
    ];
  },
};

内容的提问来源于stack exchange，提问作者Pouya Kermanshahi