next.js

next.js는 서버 사이드 렌더링을 위한 프레임워크이다.서버 사이드 렌더링을 하기 위해 초기 작업들이 필요한데 next.js는 이를 셋팅해주어 셋팅을 해준 프레임안에서 작업을 해주면 된다.초기 작업들이란 code spliting , compling , minifyin

app/layout.tsxnextjs14 규칙으로써 app 루트 내부 layout 파일은 필수적으로 존재해야하며 모든 페이지에서 나타나도록 설정되어있다.때문에 모든 페이지에 공통적으로 나타나야하거나 적용되야하는 부분이 있다면 위 layout.tsx에서 정의해주면 된다.

nextjs 프로젝트를 vercel을 통해 배포했다.nextjs 에서 풀스택으로 개발하여 따로 백엔드는 없고 prisma와 aws rds(mysql)을 활용하였다.특정 페이지는 prisma를 통해 sql문을 통해 db 데이터를 불러오는데 로컬에서는 해당 데이터가 잘 불

이번에는 aws amplify를 통해 배포를 해보았다.이번에도 역시 서버 컴포넌트를 사용하는 페이지에서 에러가 발생했다.해당 서버 컴포넌트에서는 prisma에서 rds에 연결하여 데이터를 sql을 통해 가져오고 있다.클라우드 와치에서 에러를 확인해보니 다음과 같았다.주

nextjs 프로젝트를 aws amplify에 배포를 했다.db 연결 정보를 .env 파일에서 로드하여 가져오고 있다.amplify는 깃헙 레포지터리를 기준으로 하여 빌드하여 배포하는데 env파일은 깃헙에 올리지 않았기 때문에 amplify 에서 환경변수를 따로 설정해

현재 진행하고 있는 사이드 프로젝트에서 nextjs 이용해서 풀스택으로 개발하고 있다.next-auth를 활용하여 구글 소셜 로그인을 이용하고 있는데 공식문서를 참조하여 셋팅을 해보아도 계속해서 다음과 같이 에러가 발생하였다.app-index.js:35 ClientFe

이미지 버킷 URL로부터 파일 다운로드 프로젝트 중 첨부파일을 다운로드하는 기능을 개발을 하고 있다. 프로젝트할 때마다 대부분 있는 기능이어서 보통 개발할 때, 이미지 버킷 URL에서 fetch를 해와서 a 태그 download 기능을 이용해 다운로드하게 한다.

요즘 대부분 서비스를 확인해보면 프론트엔드 프레임워크로 nextjs를 대부분 사용하고 있는 것을 확인할 수 있다. nextjs 이전에는 react를 사용했었는데 왜 nextjs가 부상하게 되었을까? react 리액트는 SPA(Single Page Applicatio

프로젝트 메인 페이지에 들어갔을 때, 네트워크 탭을 보니 아직 접속하지 않은 여러 페이지들에 대한 prefetch 요청이 있는 것을 확인했다. 강력새로고침을 하고 캐시를 제거했음에도 위와 같이 요청이 간다.아래 페이지들에 대하여 요청이 가고 있다. 아래 페이지들은 아직

nextjs 프로젝트에서 @toast-ui/react-editor라는 에디터를 사용하고 있습니다. 하지만 페이지에서 에디터 컴포넌트를 불러오면 다음과 같이 에러를 뱉어내고 있어요.왜 이런 현상이 발생할까요?아래는 에러 로그와 에디터 컴포넌트,컴포넌트를 불러오는 페이지