如何在 NextJs 中重定向

Question

我正在NextJS 中构建一个使用 Firebase 身份验证的应用程序。成功验证后，我希望获取有关存储在MongoDB 实例中的客户的其他详细信息（或在首次登录时为客户创建一个新文档）。因为我无法访问 getServerSideProps 中的 firebase auth 对象，所以我在 firebase.auth() 之后重定向到 /dashboard/${user.uid}，然后 getsServerSideProps 使用传递的 uid 来获取自定义/动态内容。

dashboard.js

export default function DashboardAuth(props) {
  
  const [user, loading, error] = useAuthState(firebase.auth())
     if (user){
         return window.location.href = `/dashboard/${user.uid}`
     } else {
         return <SignIn/>
     }
}

/dashboard/[id].js

export async function getServerSideProps({ params }) {

    let userData 
    console.log("Logging in ")
    const { db } = await connectToDatabase();
    console.log("connected to database, awaiting query response with uid")
    const findUserResp = await db
      .collection("users")
      .findOne({'uid': params.id})
    
    if(findUserResp ){
      console.log("user data exists")
      userData = {
        uid: findUserResp.uid,
        email: findUserResp.email,
        displayName: findUserResp.displayName,
        photoURL: findUserResp.photoURL,
        storageQuoteRemaining: findUserResp.storageQuoteRemaining,
        emailVerified: findUserResp.emailVerified,
        currentPage: '/dashboard'
      }
    }else{
        console.log("user data does not exist") 
        userData = {
            uid:params.id,
            email: '',
            displayName: '',
            photoURL: '',
            storageQuoteRemaining: 0,
            emailVerified: false,
            currentPage: '/dashboard'
        }
        const addUserResp = await db
            .collection("users")
            .insertOne(userData)

    }
    console.log("returning userdata below")
    console.log(userData)
    return {
      props: {
        userData
      }
    }
}


export default function Dashboard(props) {
  
  const [user, loading, error] = useAuthState(firebase.auth())
  const userContext = getUserContext()
  useEffect(() => {
    userContext.handleCurrentUser(props.userData)
    }, []);
  if (user && props.userData.uid === user.uid){
    return  <Layout  children={<CreateItem/>}/>
  }else{
    return <SignIn/>
  }
    
  }

我的主要问题是，在用户首次登录时最初添加到 mongodb 后，在重定向到 [id].js 后立即出现错误

Error: Error serializing `.userData._id` returned from `getServerSideProps` in "/dashboard/[id]".
Reason: `object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.

但在刷新时它会消失。

另外，我不喜欢我编写重定向的方式，但 useRouter 不起作用。任何有关如何更好地做到这一点的建议将不胜感激。

Answer 1

1. 看起来您的第一个问题与这里所说的有关 - https://github.com/vercel/next.js/issues/11993#issuecomment-617375501。解决方案是：

JSON.parse(JSON.stringify(findUserResp))是返回的数据。

1. 如果使用早于 NextJS 12 的版本，您应该按照 here 或 getServerSeideProps 中的说明进行中间件求解 (NextJS 12) 或 redirect 键。

 if (user) {
    return {
      redirect: {
        destination: '/dashboard/${user.uid}',
        permanent: false,
      },
    }