Next.js 프로젝트 스택 검토 (2023)

Next.js 프로젝트를 GitHub pages에 배포하기에서 사용한 Static Site Generation(SSG) 방식으로는 홈페이지를 만드는데 한계가 있어서, 서버 호스팅을 포함해 웹앱 개발 및 배포에 사용할 기술스택을 살펴보았다. 2023년 기준 스택이고, 무료 호스팅만 검토했다.

 

 

참고: https://dev.to/livecycle/how-to-host-your-side-projects-for-free-in-2023-from-auth-to-database-42im

How to host your side-projects for free in 2023: from Auth to Database

 

 

요약

• Framework: Next.js (https://nextjs.org/)
• CSS: Tailwind CSS (https://tailwindcss.com/)
• UI: shadcn/ui (https://ui.shadcn.com/)
• 인증: Lucia (https://lucia-auth.com/)
• 웹호스팅: Vercel (https://vercel.com/)
• 데이터베이스: PlanetScale (https://planetscale.com/)
• SQL: Kysely (https://kysely.dev/)

 

비고

shadcn/ui

 

Next.js, React UI 라이브러리를 검색해봤더니 정말 많은 것들이 나왔다.

여러 라이브러리들을 살펴본 끝에 각종 포스트의 댓글에서 인기가 많은 shadcn/ui를 사용하기로 했다.

 

Next.js 연동은 https://ui.shadcn.com/docs/installation/next에 정리되어 있다.

 

Lucia

참고글에서는 clerk을 추천하고 있지만, 그렇게 제대로 된 회원관리가 필요할 것 같지는 않아서 Lucia를 쓰기로 했다.

처음에는 Auth.js(구 NextAuth.js)를 검토했지만, 문서화가 너무 부족하고 연동 과정도 매끄럽지 않아서 대안으로 lucia를 선택했다.

lucia는 문서화도 잘 되어 있고, 연동도 짧은 시간 안에 쉽게 끝낼 수 있었다.

 

PlanetScale

예전에 비해 쓸만한 무료 데이터베이스도 참 많아진 것 같다. 그 중에서 PlanetScale은 vitess 기술을 기반으로 스케일, 성능, 안정성을 제공하는 MySQL 데이터베이스이다. https://pilcrow.vercel.app/blog/serverless-database-latency의 벤치마킹 결과를 참고하여 PlanetScale을 선택했다.

 

Kysely

Next.js 템플릿이나 예제를 보면 거의 Prisma ORM 라이브러리를 쓰고 있는데, 곳곳에서 느린 부분을 지적하는 글이 보였다. 파이썬 서버에서도 SQLAlchemy를 쓸 때 성능 이슈가 있었는데, ORM 라이브러리를 쓸 때 주의해야 할 듯하다. 사실 SQLAlchemy는 성능 이외에도 복잡한 서브쿼리나 조인을 사용하는 쿼리를 옮길 때 alias가 생각처럼 이뤄지지 않는 등 불편한 부분이 있었는데, Prisma도 사용하다 보면 비슷한 일들이 있지 않을까 싶다.

대신 Kysely는 쿼리 구문과 1:1 대응되게 코드를 짜면 돼서 훨씬 편할 것 같다. 예를 들어, Kysely에서 서브쿼리를 조인하는 예제는 다음과 같다.