Next.js访问localhost:3000自动跳转至public/index报404求助

核心原因 #

你在next.config.js里配置了output: 'export'，这个配置是用来生成静态导出文件供生产部署用的，在本地开发环境下启用它会打乱路由逻辑，引发自动跳转错误。

解决方案 #

• 区分开发与生产配置
  修改next.config.js，只在生产构建时启用静态导出，开发环境下关闭：

  const isProduction = process.env.NODE_ENV === 'production';
  
  const nextConfig = {
    reactStrictMode: false,
    webpack: (config) => {
      config.module.rules.push({
        test: /\.(mp4|webm|mov)$/,
        use: {
          loader: "file-loader",
          options: {
            publicPath: "/_next/static/videos/",
            outputPath: "static/videos/",
            name: "[name].[ext]",
          },
        },
      });
      return config;
    },
    // 仅生产环境启用静态导出
    ...(isProduction ? { output: 'export' } : {}),
    images: {
      unoptimized: true,
    },
  };
  
  module.exports = nextConfig;
  

• 清理本地缓存

  1. 停止开发服务
  2. 删除项目根目录下的.next文件夹
  3. 执行npm install（或yarn install）重新安装依赖
  4. 重启开发服务npm run dev

• 清空浏览器缓存
  按Ctrl+Shift+R强制刷新页面，或者直接清空浏览器缓存数据，避免旧路由缓存干扰。

内容的提问来源于stack exchange，提问作者Sapient API