Next.js使用了一个称为以服务器为中心的路由的概念，另一个术语是基于文件系统的路由器。您可以在docs中的Next.js项目中了解路由。
在Next.js中，您可以使用link组件（阅读更多）路由用户，该组件在概念上类似于vanilla HTML中的a标记。或者，您可以使用next/router中的useRouter（read more），其行为类似于react-router中的useHistory。
为了达到你所描述的结果，我认为你有两个主要的选择。
1.您可以根据身份验证状态/用户操作动态呈现index.js中的组件。
1.您可以根据用户的身份验证状态将其路由到适当的页面（我推荐这种方法）。
作为第二个选项的伪代码示例，您的pages文件夹中将有一个与此类似的文件结构。对于基于文件系统的路由器，页面名称对应于路由路径：

├── index.js (example.com)
├── sign-in.js (example.com/sign-in)
├── sign-up.js (example.com/sign-up)
├── forgot-password.js (example.com/forgot-password)
└── foo
    ├── index.js (example.com/foo)
    └── bar.js (example.com/foo/bar)

在您的index.js

import { useRouter } from 'next/router';

//...

// route user based on authentication status
if(user is authenticated) {
   router.push("/foo/bar");
}
else if (user is not authenticated) {
   router.push("/sign-in");
}

在您的sign-in.js

import Link from 'next/link';

//...

<Link className="button" href="/forgot-password">Forgot Password</Link>