我是第一次学习NextJS,在用户登录后试图构建主页时有点迷路。我似乎既无法获得Session数据来提供任何信息,也无法理解如何填补NextAuth和NextJS不同文档中的空白。
我不想在查询字符串中传递用户ID,而更喜欢使用会话数据来获取用户信息。
下面是我的pages/protected/index.tsx
文件:
import SignOut from "@/components/sign-out";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import React from "react";
import { InferGetServerSidePropsType, GetServerSideProps } from "next";
import Router from "next/router";
import prisma from "@/lib/prisma";
import { Member, Tribe, User } from "@prisma/client";
import { authOptions } from 'pages/api/auth/[...nextauth]';
import { getServerSession } from 'next-auth/next';
type Victor = (
User & {members: (Member & {tribe: Tribe})[]}
);
// export const getServerSideProps: GetServerSideProps<{victor: Victor}> = async () => {
// const ses = await getSession();
// const res = await prisma.user.findFirst({
// include: {
// members: {
// include: {
// tribe: true,
// },
// },
// },
// where: {
// email: ses && ses.user && ses.user.email ? ses.user.email : '',
// },
// });
// console.log(res);
// return { props: {res}, };
// };
// export async function getServerSideProps(context) {
export async function getServerSideProps() {
// const ses = await getServerSession(context.req, context.res, authOptions);
const ses = await getServerSession(authOptions);
const victor = await prisma.user.findFirst({
include: {
members: {
include: {
tribe: true,
},
},
},
where: {
email: ses && ses.user && ses.user.email ? ses.user.email : '',
},
});
console.log('SESSION DATA', ses);
return { props: { victor }};
}
export default function Home({
victor,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
console.log('PRINTING DATA', victor);
return (
<pre>...Data goes here...</pre>
);
};
正如您可能从我的文件中推断的那样,我已经尝试了几种不同的方法来获取要拉入的数据。从NextAuth文档中,如果我向getServerSideProps()
函数添加了一个context
变量,我当前的设置应该可以工作,但我不知道该变量来自哪里或如何导入它。我也有一种感觉,我错过了一些概念上的东西,关于NextJS路由器如何工作,以及在最佳实践中应该把东西放在哪里。我以前使用过NodeJS,但我的主要背景是PHP和PHP框架,如Symfony,Wordpress,Codeigniter等。
1条答案
按热度按时间laawzig21#
NextJS提供服务器端渲染、静态站点生成和客户端渲染。(https://nextjs.org/learn/foundations/how-nextjs-works/rendering)
getServerSideProps()
函数运行服务器端。这样web服务器就可以用返回的props预渲染页面。getServerSideProps()
中作为参数出现的context
包含浏览器发送的GET
请求和响应以接收该文件(即:GET
)。您的页面)。如果我们使用getServerSession()
,NextAuth将根据存储在浏览器cookies
中的jwt
获取我们的会话信息,GET
包含在GET
请求中。