세션을 이용하여 NextJS에서 로그인을 구현합니다.
SSR과 CSR을 하나의 페이지에서 구현하고 어떻게 사용자에게 보여지는지 알아봅니다.
구현경험을 통해 필요한 구현 방법을 상황에 맞게 적용할 수 있는 역량을 키우는 것이 목표입니다.
https://login-template-one.vercel.app/
git clone https://github.com/MINJE-98/login-template
cd login-template
yarn install
https://www.youtube.com/watch?v=rPqRyYJmx2g
클러스터의 collection은 따로 추가하지 않아도 됩니다.
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
KAKAO_CLIENT_ID=
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
MONGODB_URI=
yarn dev
배포 서버 URL 환경변수 추가
NEXT_PUBLIC_SERVER_URL= https://login-template-one.vercel.app/
yarn build
| 이름 | 버전 |
|---|---|
| node | 16.17.0 |
| typescript | 4.8.2 |
| next | 12.2.5 |
| react | 18.2.0 |
| react-dom | 18.2.0 |
| next-connect | ^0.13.0 |
| mongodb | 4.9.0 |
| connect-mongo | ^4.6.0 |
| axios | ^0.27.2 |
| next-session | ^4.0.5 |
| passport | 0.5.0 |
| react-query | 3.39.2 |
로그인된 사용자를 표시합니다. DataFetching 메서드를 통해 미리 HTML파일을 렌더링(SSR), 클라이언트측에서 렌더링(CSR)을 하나의 페이지에 구현하였습니다.
로그인페이지
회원가입 페이지
.
├── environment
├── lib
│ ├── db
│ ├── middleware
│ ├── passport
│ └──session
├── src
│ ├── components
│ ├── hooks
│ └── pages
└── ...
WebPack(default)
SWC(default)
Airbnb룰 준수
-
order
next, react 모듈 -> 외부 모듈 -> 내부 모듈 -> 타입
-
prefer-default-export
단일 메서드 export off
요구사항에 맞게 유저 정보를 사전렌더링할지를 결정하는 것이 바람직하다고 판단된다.
만약 앱내 모든 서비스가 렌더링되기 전에 미리 유저의 정보를 통해 사전렌더링 해야하는 컨텐츠로 구성되어 있다면 유저 정보를 토대로 사전렌더링을 처리할 것 같다.
(middleware를 활용하여 수신 요청을 기반으로 다시 작성, 리디렉션, 헤더 추가 또는 쿠키 설정을 통해 응답을 수정할 수 있다.)
딱히 로그인 유무에 따라 컨텐츠의 렌더링 조건이 변경되지 않는다면 유저 정보를 포함하지 않는 사전렌더링을 처리할 것 같다.
https://hygraph.com/blog/nextjs-authentication
https://github.com/hoangvvo/nextjs-mongodb-app/blob/v2/pages/api/auth.js
https://github.com/vercel/next.js/tree/canary/examples/with-passport-and-next-connect