Next.js 重定向：next.config.js 中的重定向键与 getServerSideProps() 中的重定向对象

Question

假设我想将我的 index 页面重定向到 Next.js 中的 about 页面。好像我有两个选择：

1。在 `next.config.js`

中添加 redirects 键

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/about',
        permanent: true,
      },
    ]
  },
}

2。在 `getServerSideProps()` 函数

中返回 redirect 对象

// pages/index.js
export async function getServerSideProps() {
  return {
    redirect: {
      destination: '/about',
      permanent: true,
    },
  };
};

这两个选项有什么区别？

Answer 1

根据您的逻辑，它们在功能方面是相同的，但是您页面 pages/index.js 上的 redirect 将具有更大的灵活性和更多的自定义。例如，您想有条件地重定向到另一个页面，如下所示

// pages/index.js
export async function getServerSideProps() {
  const value = true; //receive data from APIs

  //if value is true, redirect to `/help` instead of `/about`
  if(value) {
    return {
      redirect: {
        destination: '/help',
        permanent: true,
      },
    };
  }

  //TODO: You can add your logic here before redirection

  return {
    redirect: {
      destination: '/about',
      permanent: true,
    },
  };
};

您无法使用 next.config.js 下的 redirects() 实现该逻辑。你可以想象这就像配置只应用一次，没有复杂的逻辑要求。

您可以考虑这些用例：

如果您不想拥有复杂的路由逻辑而只是将它们用作 one-time 设置 - 在 next.config.js

redirects()

如果您有一些逻辑来处理页面中的路由并且它依赖于外部资源 - 在页面本身中使用 redirect

Next.js 重定向：next.config.js 中的重定向键与 getServerSideProps() 中的重定向对象

Next.js Redirects: redirects key in next.config.js vs. redirect object in getServerSideProps()

next.js

1。在 `next.config.js`

2。在 `getServerSideProps()` 函数

Next.js 重定向：next.config.js 中的重定向键与 getServerSideProps() 中的重定向对象

Next.js Redirects: redirects key in next.config.js vs. redirect object in getServerSideProps()

next.js

1。在 next.config.js

2。在 getServerSideProps() 函数

1。在 `next.config.js`

2。在 `getServerSideProps()` 函数