面试题：Next.js 路由系统中如何实现简单的重定向

Question

在Next.js项目里，假设你有一个页面 '/old - page'，现在需要将访问该页面的用户重定向到 '/new - page'，请说明使用 Next.js 路由系统实现这一重定向的具体步骤，并给出关键代码示例。

Answer 1

1. 在 pages/old - page.js 文件中实现重定向：
   • 在 Next.js 中，可以使用 next/router 模块来进行路由操作。
   • 关键代码如下：

import { useRouter } from 'next/router';

const OldPage = () => {
    const router = useRouter();
    // 页面加载时立即重定向
    router.push('/new - page');

    return null;
};

export default OldPage;

2. 使用 getServerSideProps 进行服务端重定向（可选，适用于需要在服务端决定重定向的场景）：
   • 在 pages/old - page.js 中添加 getServerSideProps 函数。
   • 关键代码如下：

export async function getServerSideProps(context) {
    return {
        redirect: {
            destination: '/new - page',
            permanent: false // 设置为 true 表示永久重定向（308），false 表示临时重定向（307）
        }
    };
}

const OldPage = () => {
    return null;
};

export default OldPage;