NEXT

AWS S3 Access Denied CopyObjectCommand

CopySource에 복사 경로 + 원본 파일명만 적었는데 Bucket 이름까지 작성해야한다.S3 예제 코드const input = { "Bucket": "destinationbucket", "CopySource": "/sourcebucket/HappyFacejpg", "Key": "HappyFaceCopyjpg"};const command = new CopyObjectCommand(input);const response = await client.send(command);작성 코드const Bucket = process.env.AMPLIFY_BUCKET;const s3 = new S3Client({ region: process.env.AWS_REGION, credentials: { acc..

Only plain objects, and a few built-ins, can be passed to Server Actions.

Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.💡상품 저장 전 서버에 이미지를 먼저 업로드 하려 했으나일반 객체가 아닌 직렬화 할 수 없는 클래스나 null 프로토타입을 가진 객체는 서버 컴포넌트로 넘기지 못한다는 에러를 받았다. 해결책 FormData클라이언트 > 서버 전송 시 데이터를 직렬화해 서버에 전달하고, 서버는 이를 역직렬화해 처리하는데 FormData는 파일과 같은 비구조적 데이터를 직접 바이너리 형태로 전송되므로 별도의 직렬화 과정이 필요하지 않습니다.수정 전const handleFileChange = async (e: Ch..

NEXT JS + Google Analytics Connect Setting

Google Analytics 생성  Redirecting... analytics.google.com보고 시간대와 통화를 본인 국가로 설정한다.생성 이후 보고서 검토에 나올 메뉴들을 선택하는 것으로 Get baseline reports 선택해도 무관하다.PropertyID 획득이후 runReport API 호출 시 필요한 ID로 ENV 환경 변수에 저장NextJS Google Analytics 설정Next/third-parties 설치# ME : "@next/third-parties": "^14.2.5"npm i @next/third-partiesGoogleAnalytics 설정// 메인 Root Layoutimport { GoogleAnalytics } from '@next/third-parties/g..

Parallel Routes Modal Difficult Error

1. Pages Router Error💡 무심코 만든 pages 폴더가 Parallel Routes 모달을 만들지 못하게 했다.Next.js 13 이전 부터 사용하던 Page Router의 pages 폴더가 새로 도입된 App Router의 App 폴더와 같이 존재하면서 발생한 문제로 pages 폴더를 삭제하면 Parallel Routes 사용이 원활해진다. GitHub - vercel/nextgram: A sample Next.js app showing dynamic routing with modals as a route.A sample Next.js app showing dynamic routing with modals as a route. - vercel/nextgramgithub.com 2. D..

NextJs Next-auth getSession() 로그인 정보 확인

Client API | NextAuth.jsThe NextAuth.js client library makes it easy to interact with sessions from React applications.next-auth.js.org💡 getSession() 함수 호출 시 위 문서와 같이 설정했음에도 2가지 에러가 발생하여 Session 로그인 정보를 에러없이 불러오는 것을 목적으로 합니다. 1. api/auth/session 400 에러 ( GET http://localhost:3000/api/auth/session 400)2. ClientFetchError: Unexpected token 'SessionProvider 설정MetaData 사용을 위해 SessionProvider는 컴포넌트로..

NEXT 14 NEXT-AUTH 5 middleware.ts not working

💡 Learn Next에서는 src 폴더를 사용하지 않는 경우, middleware.ts 파일을 프로젝트 루트에 위치시킵니다. 그러나 src 폴더를 사용하는 경우에는 파일을 src 폴더 내부에 위치시켜야 합니다.문제점auth.ts - NextAuth - signIn 함수는 제대로 동작을 했으나 middleware.ts에 연결된 auth.config.ts 파일이 동작않았습니다.//auth.tsasync function getUser(email: string): Promise { try { return await prisma.user.findUnique({where: { uid: 1 }}) } catch (error) { console.error('Failed to fetch user:', ..

NextJS Prisma PostgreSQL 연결 및 Migrate

Prisma 설치 및 적용npm install prisma --save-devnpm install @prisma/clientnpx prisma initENV 및 Schema 파일 설정// .envDATABASE_URL="postgresql://[UserName]:[Password]@[Host]:[Port]/[Database]"//schema.prisma// Prisma클라이언트와 같은 코드 생성기 설정하여 Prisma가 어떤 타입의 코드를 생성할지 정의generator client { // 사용할 데이터베이스 드라이버를 지정합니다. provider = "prisma-client-js"}// datasource 블록은 Prisma가 연결할 데이터베이스에 대한 설정을 정의합니다.datasource db {..

next-themes Hydration failed Error

Hydration failed because the initial UI does not match what was rendered on the server ThemeProvider를 태그 위에 적용했을 때 발생하는 에러로 body 태그 자식으로 넣어야 한다.Extra attributes from the server: data-theme,style html 태그에 suppressHydrationWarning 속성을 작성하지 않았을 때 발생하는 에러.// app/layout.tsximport { ThemeProvider } from 'next-themes';export default function RootLayout({childrenReadonly) { return ( {..