NextJS中访问首页自动重定向到指定路由的正确实现方式是什么？

你当前的写法存在问题：在组件渲染逻辑中直接执行router.replace属于渲染时副作用，会引发 hydration 不匹配问题，且服务端渲染阶段不生效，只在客户端加载后才会跳转，性能和SEO友好度都很差。

以下是三种合规方案，按推荐优先级排序：

方案1：next.config.js 配置全局重定向（最推荐） #

这是性能最高的方案，在服务端层面直接返回重定向状态码，不需要前端执行任何代码，对SEO友好，和你用到的Apollo Client也完全兼容。
配置代码：

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/orders',
        // 永久重定向填true，返回308状态码，浏览器会缓存规则；临时重定向填false返回307
        permanent: true,
      },
    ]
  },
}

配置完成后重启项目即可生效，不需要修改现有首页组件代码。

方案2：getServerSideProps 服务端重定向（适合有动态判断逻辑的场景） #

如果你的重定向逻辑需要依赖用户身份、请求参数等动态条件，可以用页面层的服务端逻辑实现重定向，在页面请求阶段就完成跳转，也不会触发前端不必要的渲染。
代码示例：

import withApollo from '../apollo'

const Index = () => {
  return null
}

export async function getServerSideProps(context) {
  // 可在这里添加自定义判断逻辑，比如校验用户登录状态后再决定是否跳转
  return {
    redirect: {
      destination: '/orders',
      permanent: false,
    },
  }
}

export default withApollo(Index)

方案3：客户端侧重定向（仅当必须在前端完成跳转时使用） #

如果确实需要在客户端执行跳转，要把路由替换逻辑放在useEffect中，等组件挂载完成后再执行，避免渲染异常。
代码示例：

import { useRouter } from 'next/router'
import { useEffect } from 'react'
import withApollo from '../apollo'

const Index = () => {
  const router = useRouter()

  useEffect(() => {
    router.replace('/orders')
  }, [router])

  // 跳转过程中可以自定义加载状态，避免白屏
  return <p>正在跳转...</p>
}

export default withApollo(Index)

优先级建议：固定重定向规则优先选方案1，有动态判断逻辑优先选方案2，尽量避免使用客户端重定向方案。

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