수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨Next.js 필수 개발 가이드 3시간 완성!
소스 코드
현재 API 부분까지 잘 들었습니다.내용이 길지 않은데 핵심 부분을 잘 이야기 해주셔서 너무 좋습니다. 그런데 소스 코드가 없다는 것이 너무 아쉽습니다.내용이 정말 좋지만 소스 코드가 없으면 이해하기까지 시간이 많이 걸리기 때문에 강의를 듣는 것이 쉽지가 않습니다. 혹시 깃허브나 소스 코드가 제공될 수 있을까요?
- 해결됨Next.js 필수 개발 가이드 3시간 완성!
SSR CSR
질문이 있습니다.page 같은 경우는 최대한 SSR로 하고 page 하위에 사용되는 컴포넌트 같은 경우는 브라우저 API 사용한다면 CSR로 하는게 맞나요? ( 하이브리드 렌더링 방식 ) app/page.tsx 파일 상단에 "use client" 선언하면 페이지 전체가 CSR로 된다고 생각하는데 네트워크 창에 localhost에 preview를 보면 빈 페이지가 아닌 렌더링된 내용이 보이는데 왜 그런걸까요?
- 해결됨Next.js 필수 개발 가이드 3시간 완성!
Dynamic Routes GET 메소드 만들기 질문 있습니다!
안녕하세요 ! APIs 생성하기 섹션을 들으며 연습하고 있는데요.사용자 ID 값이 10 보다 큰 경우에는 404 에러를 출력하고 나머지 경우에는 사용자 정보를 반환하도록 작성해주신 GET 메서드 코드를 따라 작성했고, 포스트맨에서 정상 작동함을 확인하였습니다.강사님 코드import { NextRequest, NextResponse } from "next/server"; export function GET( request: NextRequest, { params }: { params: { id: number } } ) { // 사용자 ID 값이 10보다 큰 경우 404 오류 출력 if (params.id > 10) { return NextResponse.json({ error: "USER NOT FOUND" }, { status: 404 }); } // 사용자 정보를 응답으로 전달 return NextResponse.json([ { id: 1, name: "Jieun" }, { id: 2, name: "Hansol" }, ]); }따라하다가 문득, 전체 사용자 정보가 아니라 해당 id 에 해당하는 사용자 정보를 출력하고 싶어, 아래와 같이 코드를 수정하였습니다. 코드에 문제가 없다 생각했는데 에러를 출력하더라구요 ㅠㅠ에러 코드import { NextRequest, NextResponse } from "next/server"; export function GET( request: NextRequest, { params }: { params: { id: number } } ) { const userData = [ { id: 1, name: "Jieun" }, { id: 2, name: "Hansol" }, ]; const user = userData.find((user) => user.id === params.id); if (!user) { return NextResponse.json( { error: "사용자를 찾을 수 없습니다" }, { status: 404 } ); } return NextResponse.json(user); }`user` 를 잘 찾지 못하는 것 같아서 혹시 id 타입 문제인가 해서 params.id 의 타입을 바꾸고 실행하였더니 정상 작동 하였습니다.정상 작동했던 코드 1import { NextRequest, NextResponse } from "next/server"; export function GET( request: NextRequest, { params }: { params: { id: string } } ) { const userData = [ { id: 1, name: "Jieun" }, { id: 2, name: "Hansol" }, ]; const requestedId = parseInt(params.id); const user = userData.find((user) => user.id === requestedId); if (!user) { return NextResponse.json( { error: "사용자를 찾을 수 없습니다" }, { status: 404 } ); } return NextResponse.json(user); }정상 작동했던 코드 2import { NextRequest, NextResponse } from "next/server"; export function GET( request: NextRequest, { params }: { params: { id: number } } ) { // Mock user data const userData = [ { id: 1, name: "Jieun" }, { id: 2, name: "Hansol" }, ]; const requestedId = typeof params.id === "string" ? parseInt(params.id, 10) : params.id; const user = userData.find((user) => user.id === requestedId); if (!user) { return NextResponse.json( { error: "사용자를 찾을 수 없습니다" }, { status: 404 } ); } // Return the user information return NextResponse.json(user); }질문입니다!API 호출 시 전달되는 매개변수 params.id 의 타입은 GET 메소드 매개변수 선언시 지정해주는 타입으로 정해지는건가요?string 타입인거라면 강사님 코드가 실행되지 않았어야 하고, number 타입이라면 저의 에러코드 또한 실행되었어야 하는데 왜 정상적으로 작동하지 않았는지 궁금합니다.
- 해결됨Next.js 필수 개발 가이드 3시간 완성!
auth 에러에 대해서
제목: auth 해보고 있는데 오류가 나오고있네용설명: 저는 prisma를 postgresql로 하고있습니다.그래도 왜 이런 오류가 나오는지 원인은 잘 모르겠네요 내용: auth에서 credentials를 하고 있습니다.import NextAuth from "next-auth";import CredentialsProvider from "next-auth/providers/credentials";import KakaoProvider from "next-auth/providers/kakao";import NaverProvider from "next-auth/providers/naver";import { PrismaAdapter } from "@auth/prisma-adapter";import prisma from "@root/src/server/prisma";import bcrypt from "bcrypt";export const authOptions = { providers: [ CredentialsProvider({ name: "Credentials", credentials: { accountId: { label: "Username", type: "text" }, password: { label: "Password", type: "password" }, email: { label: "Email", type: "email" }, name: { label: "Name", type: "text" }, }, async authorize(credentials, req) { if (!credentials?.email || !credentials.password) { return null; } const exUser = prisma.user.findUnique({ where: { accountId: credentials.accountId as string, email: credentials.email as string, password: credentials.password, name: credentials.name as string, }, }); if (!exUser) return null; const passwordMatch = await bcrypt.compare( credentials.password as string, exUser.password! // 오류 발생 ); return passwordMatch ? exUser : null; }, }), KakaoProvider({ clientId: process.env.KAKAO_CLIENT_ID!, clientSecret: process.env.KAKAO_CLIENT_SECRET!, }), NaverProvider({ clientId: process.env.NAVER_CLIENT_ID!, clientSecret: process.env.NAVER_CLIENT_SECRET!, }), ], adapter: PrismaAdapter(prisma),};const handler = NextAuth(authOptions); // authOptions 오류 발생export { handler as GET, handler as POST }; 이건 제 소스이고,authOptions와 exUser.password! 부분에서 에러가 나오고 있는데 원인을 잘 모르겠습니다. 해당 오류입니다.'Prisma__UserClient<{ id: string; accountId: string | null; name: string | null; email: string | null; emailVerified: Date | null; image: string | null; phone: string; password: string; role: ROLE; } | null, null, DefaultArgs>' 형식에 'password' 속성이 없습니다.ts(2339) 아래는 authOptions 오류입니다. '{ providers: (CredentialsConfig<Record<string, CredentialInput>> | OAuthConfig<KakaoProfile> | OAuthConfig<...>)[]; adapter: Adapter; }' 형식의 인수는 'NextAuthConfig' 형식의 매개 변수에 할당될 수 없습니다.'adapter.linkAccount'의 형식은 해당 형식 간에 호환되지 않습니다.'((account: import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/@auth/core/adapters").AdapterAccount) => Promise<void> | import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/@auth/core/types").Awaitable<import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/@aut...' 형식은 '((account: import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/next-auth/node_modules/@auth/core/adapters").AdapterAccount) => Promise<void> | import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/next-auth/node_modules/@auth/core/types").Awaitable<...>) | undefined' 형식에 할당할 수 없습니다.'(account: import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/@auth/core/adapters").AdapterAccount) => Promise<void> | import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/@auth/core/types").Awaitable<import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/@auth...' 형식은 '(account: import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/next-auth/node_modules/@auth/core/adapters").AdapterAccount) => Promise<void> | import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/next-auth/node_modules/@auth/core/types").Awaitable<...>' 형식에 할당할 수 없습니다.'Promise<void> | import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/@auth/core/types").Awaitable<import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/@auth/core/adapters").AdapterAccount | null | undefined>' 형식은 'Promise<void> | import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/next-auth/node_modules/@auth/core/types").Awaitable<import("/Users/hwangjeong-yeon/workspace/Project/FOCC/focc/node_modules/next-auth/node_modules/@auth/core/adapters").AdapterAccount | null | undefined>' 형식에 할당할 수 없습니다.'AdapterAccount' 형식은 'Promise<void> | Awaitable<AdapterAccount | null | undefined>' 형식에 할당할 수 없습니다.'AdapterAccount' 형식에 'Promise<void>' 형식의 then, catch, finally, [Symbol.toStringTag] 속성이 없습니다.ts(2345)const authOptions: { providers: (CredentialsConfig<Record<string, CredentialInput>> | OAuthConfig<KakaoProfile> | OAuthConfig<...>)[]; adapter: Adapter;}혹시 제가 schema 부분에서 오류가 있을까요? model User { id String @id @default(cuid()) accountId String? name String? email String? @unique emailVerified DateTime? image String? phone String @default("") password String @default("") role ROLE @default(USER) accounts Account[] sessions Session[]