Next14 App Router react-quill 사용 (build 시 prerendered error 해결)
·
💻 개발 일지/React
react-quill 이란?- html editor를 활용할 . 수있는 라이브러리- 러닝커브가 낮아 많이 사용- next13에서 사용한 코드를 next14 App Router로 작성 중 build 시 [Error occurred prerendering page]/ [ReferenceError: document is not defined] 발생 react-quill 사용방법1. react-quill 설치yarn add react-quill 2. 코드 작성//Next13import ReactQuill from "react-quill";import "react-quill/dist/quill.snow.css";const Editor = () => { const Quill = ReactQuill.Quill;..
Next 로그인 (google provider 백엔드 구현 및 session에 사용자 정보 저장) (feat. next14 app-router)
·
💻 개발 일지/Next
Project Explanation- 2024.07.02 - [next] - Next-Auth Login(Google/ jwt) 구현 (feat. next 14 app-router)에서 구현했던 NextAuth Google Provider를 백엔드로 이동- 코드 수정된 부분만 남겨놓겠습니다 backend 좀 더 공부하고 링크 첨부 예정 Project Folder더보기📦app ┣ 📂api ┃ ┗ 📂auth ┃ ┃ ┗ 📂[...nextauth] ┃ ┃ ┃ ┗ 📜route.ts ┣ 📂login ┃ ┣ 📂googleLogin ┃ ┃ ┗ 📜page.tsx ┃ ┗ 📜page.tsx ┣ 📜layout.tsx ┗ 📜page.tsx📦lib ┗ 📜axios.ts📦providers ┗ 📜Sessi..
Next-Auth Login(Google/ jwt) 구현 (feat. next 14 app-router)
·
💻 개발 일지/Next
Project Setting더보기Would you like to use TypeScript? YesWould you like to use Tailwind CSS? YesWould you like to use App Router? (recommended) YesProject Folder더보기📦app┣ 📂api┃ ┗ 📂auth┃ ┃ ┗ 📂[...nextauth]┃ ┃ ┃ ┗ 📜route.ts┣ 📂login┃ ┗ 📜page.tsx┣ 📜layout.tsx┗ 📜page.tsx📦lib┗ 📜axios.ts📦providers┗ 📜SessionProvider.tsx📦src┣ 📂server┃ ┣ 📂services┃ ┃ ┗ 📜userService.ts┃ ┗ 📜auth.ts┗ 📂types┗ ..