Next.js页面刷新跳转首页：如何实现刷新后保留当前页面？

你遇到的核心问题是Next.js未正确识别刷新后的路由路径，导致被错误重定向到首页。以下是针对性的排查和解决步骤：

1. 确认路由文件存在且路径正确 #

Next.js基于文件系统路由，确保项目结构符合要求：

• Pages Router：/pages目录下存在product/details.js（或.tsx）文件，对应路由/product/details
• App Router：/app目录下存在product/details/page.js（或.tsx）文件，对应路由/product/details

若路由文件缺失或路径错误，Next.js会自动 fallback 到首页，刷新时自然跳转到根路径。

2. 排查全局重定向规则 #

检查以下配置中是否存在错误的重定向逻辑：

• next.config.js：查看redirects数组里是否有将/product/details指向/的规则，比如：

  module.exports = {
    async redirects() {
      return [
        // 检查是否有类似错误规则
        {
          source: '/product/details',
          destination: '/',
          permanent: true,
        },
      ]
    },
  }
  

• middleware.js/.ts：若使用中间件，检查是否因路径匹配错误导致重定向，比如误将非首页路径全部重定向到/：

  export function middleware(request) {
    // 避免类似错误逻辑
    if (request.nextUrl.pathname !== '/') {
      return Response.redirect(new URL('/', request.url))
    }
  }
  

3. 检查页面内的重定向代码 #

查看/product/details页面的服务端函数（Pages Router的getServerSideProps/getStaticProps，或App Router的Server Component），是否在逻辑中错误返回了重定向：

• Pages Router示例：

  export async function getServerSideProps(context) {
    // 检查是否有类似错误重定向
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }
  

• App Router示例：

  import { redirect } from 'next/navigation'
  
  export default function DetailsPage() {
    // 检查是否有错误重定向逻辑
    redirect('/')
    return <div>Product Details</div>
  }
  

4. 静态导出场景的特殊处理 #

若项目使用next export生成静态文件：

• 在next.config.js中配置trailingSlash: true，确保路由路径以斜杠结尾，避免服务器解析路径出错：

  module.exports = {
    trailingSlash: true,
  }
  

• 确保托管静态文件的服务器配置正确，比如Nginx需将所有请求指向index.html并保留路径：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

5. 托管平台配置检查 #

若使用Vercel、Netlify等托管平台：

• 确认平台路由配置未强制重定向到首页，比如Vercel默认支持Next.js路由，无需额外配置，但如果手动添加过重定向规则需检查。

按以上步骤排查后，刷新/product/details页面即可正常保留在原页面，实现类似亚马逊的刷新行为。

内容的提问来源于stack exchange，提问作者Raghav Patel