Next.js 14本地开发同端口应用异常重定向问题排查

应用配置详情 #

第一个应用（带重定向） #

next.config.js 配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
    async redirects() {
        return [
            {
                source: '/',
                destination: '/dashboard',
                permanent: true,
            },
        ];
    },
};

export default nextConfig;

访问根路径 / 时，会正确重定向到 /dashboard。

第二个应用（无重定向） #

next.config.mjs 配置：

import "./env.mjs"

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["avatars.githubusercontent.com", "http://localhost:8000", "localhost"],
  },
  experimental: {
    appDir: true,
    esmExternals: 'loose',
  },
};

export default nextConfig;

问题现象 #

关闭第一个应用后启动第二个应用，第二个应用仍会将根路径 / 重定向到 /dashboard，且仅在两个应用使用同一端口（3000）时出现此问题。

环境信息 #

• Next.js: v14
• Node.js: v21.6.1
• 操作系统：macOS Big Sur

这是浏览器缓存了第一个应用返回的永久重定向（301）响应导致的。因为第一个应用配置的是 permanent: true，浏览器会将这个301重定向规则持久化缓存，即便切换到同一端口的第二个应用，浏览器依然会直接使用缓存的重定向规则，不会向服务器发起新请求验证。

可以通过以下几种方式解决：

1. 清除浏览器缓存 #

针对localhost:3000站点清除缓存：

• 打开浏览器开发者工具（F12），切换到「网络」标签，勾选「禁用缓存」后刷新页面；或者直接清空浏览器本地缓存。

2. 临时修改端口启动第二个应用 #

启动第二个应用时指定不同端口，避免端口复用带来的缓存冲突：

next dev -p 3001

3. 调整第一个应用的重定向类型（开发环境建议） #

开发阶段将第一个应用的重定向设置为非永久类型，浏览器不会缓存该规则：

async redirects() {
    return [
        {
            source: '/',
            destination: '/dashboard',
            permanent: false, // 改为非永久重定向
        },
    ];
},

内容的提问来源于stack exchange，提问作者Nélio Bila