next.js
1.➔ next.js ➔
next.js는 서버 사이드 렌더링을 위한 프레임워크이다.서버 사이드 렌더링을 하기 위해 초기 작업들이 필요한데 next.js는 이를 셋팅해주어 셋팅을 해준 프레임안에서 작업을 해주면 된다.초기 작업들이란 code spliting , compling , minifyin
2.nextjs14 layout.tsx 파일에서는 state가 변경됬을 때, 리렌더링이 안된다?
app/layout.tsxnextjs14 규칙으로써 app 루트 내부 layout 파일은 필수적으로 존재해야하며 모든 페이지에서 나타나도록 설정되어있다.때문에 모든 페이지에 공통적으로 나타나야하거나 적용되야하는 부분이 있다면 위 layout.tsx에서 정의해주면 된다.
3.nextjs14 배포 vercel 에러 [Application error: a server-side exception has occurred (see the server logs for more information).]
nextjs 프로젝트를 vercel을 통해 배포했다.nextjs 에서 풀스택으로 개발하여 따로 백엔드는 없고 prisma와 aws rds(mysql)을 활용하였다.특정 페이지는 prisma를 통해 sql문을 통해 db 데이터를 불러오는데 로컬에서는 해당 데이터가 잘 불
4.nextjs14 배포 에러 (aws amplify 배포)
이번에는 aws amplify를 통해 배포를 해보았다.이번에도 역시 서버 컴포넌트를 사용하는 페이지에서 에러가 발생했다.해당 서버 컴포넌트에서는 prisma에서 rds에 연결하여 데이터를 sql을 통해 가져오고 있다.클라우드 와치에서 에러를 확인해보니 다음과 같았다.주
5.aws amplify에서 환경변수 로드하는 법(with nextjs)
nextjs 프로젝트를 aws amplify에 배포를 했다.db 연결 정보를 .env 파일에서 로드하여 가져오고 있다.amplify는 깃헙 레포지터리를 기준으로 하여 빌드하여 배포하는데 env파일은 깃헙에 올리지 않았기 때문에 amplify 에서 환경변수를 따로 설정해
6.nextjs,next-auth 구글 로그인(google login) 에러 해결{next-auth5 버전에 따른 셋팅 설정)
현재 진행하고 있는 사이드 프로젝트에서 nextjs 이용해서 풀스택으로 개발하고 있다.next-auth를 활용하여 구글 소셜 로그인을 이용하고 있는데 공식문서를 참조하여 셋팅을 해보아도 계속해서 다음과 같이 에러가 발생하였다.app-index.js:35 ClientFe