如何在Next.js中实现自动重定向到其他站点

核心前提：PWA的start_url必须配置为同域路径，直接填写外部域名会导致PWA安装失败、无法以独立窗口模式启动，所以所有方案都基于「同域中转路径+自动跳转」的逻辑实现。

方案1：服务端重定向（体验最优，无白屏） #

不需要写额外的页面组件，通过Next.js原生的路由重定向能力直接在请求层完成跳转，加载速度最快，不会出现中转页闪屏。

• 调整PWA配置（如果你使用next-pwa等PWA插件，修改对应manifest配置即可），将start_url设置为同域专属中转路径，比如/pwa-entry，注意不要修改scope，保持默认同域配置即可。
• 在项目根目录的next.config.js中添加重定向规则，原有配置保持不变：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 保留你原有的其他配置、PWA相关配置
  async redirects() {
    return [
      {
        source: '/pwa-entry',
        destination: 'https://你的目标站点地址',
        permanent: false, // 临时重定向，后续如果要改目标地址不会被浏览器长期缓存
      },
    ]
  },
}

module.exports = nextConfig

• 重新构建部署项目即可，用户点击桌面图标启动PWA时，会直接跳转到目标站点，全程不会出现可见的中转落地页。

方案2：客户端页面跳转（适配静态导出场景） #

如果你的Next.js项目是output: 'export'静态导出模式，没法用服务端重定向，可以用客户端跳转方案：

• 先把PWA的start_url设置为同域路径，比如/launch。
• 新建对应路由页面：App Router模式下新建app/launch/page.js，必须标记为客户端组件；Pages Router模式下新建pages/launch.js。
• 页面代码如下，不需要渲染多余内容：

// App Router模式需要保留下面这行声明，Pages Router直接删除即可
'use client'
import { useEffect } from 'react'

export default function LaunchPage() {
  useEffect(() => {
    // 用replace而不是href，避免中转页写入浏览历史，用户点返回不会回到这个空白页
    window.location.replace('https://你的目标站点地址')
  }, [])

  // 极简加载提示，避免跳转前白屏
  return <div style={{ height: '100vh', display: 'grid', placeItems: 'center' }}>加载中...</div>
}

常见坑点说明 #

• 禁止直接将manifest中的start_url、scope配置为外部域名，会直接导致PWA安装校验失败，安装后点击图标只会在普通浏览器标签页打开，不会进入独立应用窗口。
• 不要用Next.js自带的useRouter做跳转，router.push/router.replace仅支持同域路由跳转，跨域场景必须用window.location原生方法。
• 已安装到用户桌面的PWA会缓存旧的manifest配置，配置修改后最长24小时会自动同步更新，不需要用户手动重新安装。

内容的提问来源于stack exchange，提问作者Qi'ra