如何在Next.js中创建重定向（附代码示例）

Next.js提供了开箱即用的路由功能，使重定向变得直接而简单。在本教程中，我将告诉你如何通过两种不同的方法进行重定向，通过Next.js的配置进行永久重定向，以及通过客户端重定向的 使用路由器钩子的客户端重定向。

如果你不熟悉Next.js，它是一个伟大的框架，在React的基础上扩展，并提供了一些非常有用的附加功能，你可以在这里阅读更多关于它的信息。

永久重定向

这发生在路由层面，例如，当有人试图访问要重定向的路由时，你的服务器会将他们重定向到要重定向的路由。

要在Next.js中创建重定向，你需要在文件中添加一个重定向函数。 next.config.js文件。这个函数应该返回一个重定向对象的列表，其中包含源路径、目标路径，以及重定向是否是永久性的。这一点很重要，因为它将告诉搜索引擎重定向是否是永久性的，他们可以用它来决定是否缓存该页面：

const nextConfig = {
    async redirects() {
        return [
            {
                source: '/login',
                destination: '/',
                permanent: true,
            },
        ];
    },
};

在这个例子中，我们将任何指向"/login "的点击重定向到根目录，这对于社交媒体网站来说可能很有用，你希望用户首先看到的是登录页面。你可以跳过为登录页面创建一个单独的路由，而只是提供同一个页面。

客户端重定向

有时，你可能只需要在某些条件下重定向，例如，如果用户没有登录，或者点击了某个按钮，就把他们重定向到一个登录页面。对于这一点，你可以使用 ***useRouter()***钩子。

const Profile = () => {
    const { push, query, isReady } = useRouter();

    useEffect(() => {
        if (!isReady) return; //The query string parameters might not be loaded straight away, but isReady will be true when they are
        if (!query.userId) push('/examples/login');
    }, [isReady, push, query.userId]);

    return (
        <div className="rounded bg-black p-5 font-title text-7xl text-white shadow">
            {query.userId && <h1>User Id: {query.userId}</h1>}
        </div>
    );
};

下面是一个简单的用户资料页面的模拟图。在现实世界中，你可能会使用这个用户ID来获取用户资料的其他部分，但在我们的例子中，我们只是显示这个ID。我们在这里通过一个查询字符串参数获得用户ID，你可以在这里找到更多的信息。

重定向到登录页面演示

当我们导航到这个页面时，如果没有提供userId，该页面将重定向到登录页面。这里需要注意的一件事是，在这种情况下，个人资料页面仍然会被加载，所以你需要一些条件渲染来确保用户数据不会被获取。

用户资料例子

希望这个教程足够简单明了，你可以根据自己的情况调整上述例子。如果你有任何建议，或者你只是喜欢这篇文章，请随时在评论中告诉我。