00. Next.js로 블로그 만들어보기 (Next.14)

개요

현재 블로그는 직접 여러기능을 심사숙고하면서 만들어낸 블로그입니다.
프론트엔드 개발자라면 적어도 개인 블로그를 하나정도는 운영해야 된다고 생각하고

나도 직접 블로그를 만들어보고 싶었기에 1달정도 제작하게 된 블로그입니다.

App-router는 공식문서도 잘되있지 않고 복잡한 기능이 많아
설계과정에 많은 어려움이 따랐습니다.

다른사람들은 나처럼 고생하지않고
쉽게 정보를 얻어서 블로그를 제작할 수 있기 바라며 이 글을 작성해봅니다.

아키텍처 구조

왜 블로그를 직접 만들게 되었는가?

독창적인 개인블로그를 가지고싶었던 마음도 컷고, 무엇보다

프론트엔드의 포르폴리오로서 다른사람들에게 노출되는 프로젝트를 구현한다면

저는 블로그를 가장크게 생각할 것 같습니다. 내 생각을 정리하고 내 정보를 공유하며

나에 대해 이야기한다면 블로그만한게 없다고 생각하기 때문이죠.

많은 정적 프레임워크가 존재한다. 왜 사용하지않았는가?

우선 필자는 맨처음에는 Nextra를 이용해서 간단한 위키형 블로그를 제작했었습니다.
하지만 이러한 프레임워크는 생각보다는 문제점이 많습니다.

코드의 레거시화

개발된 코드가 오래된 경우가 아주 많았습니다.
ContentLayer의 경우 마지막 업데이트가 2023년이며
App-router를 지원하지 않습니다.

또한 둘러보면 대체로 gatsby를 활용해서 제작한 블로그가 많은데
graphQL에 의존적이며 불필요한 앱이 많아 무겁게 작동하고
라이브러리가 버전업에 취약하다는 등 문제점이 많습니다.

Customize의 자유도

아무래도 직접 만들게 된다면 모든 요소에 대한 커스텀마이징과 나만의 스타일을
설계할 수 있습니다.무엇보다 큰 강점이자 단점인데, 다시말하자면 모든 스타일을 내손으로
설계 해야한다는 문제점도 존재합니다. 관련 스타일링을 도와주는 라이브러리가 존재하지만,

그럼에도 직접 커스텀해야하는 부분이 아주많기에 설계과정에 꽤나 난해합니다.

기능의 대한 이해부족

프레임워크를 통해 모든 형태가 정해져있다는 뜻은 다시말해 내가 해당 블로그의 작동방식도
알수 없다는 점입니다. 이런 부분은 개발자로서 직접만든 블로그라고 하기 애매하지않을까?

물론 단순 글쓰기에 치중을 둔다면 직접 블로그를 제작할 이유가 없습니다.
velog, tistory등 좋은 플랫폼이 많이 존재하고
해당플랫폼을 기반으로 작성하면 글작성은 훨씬 간단하기 때문입니다.

따라서 단순 포스팅을 위해서라면 굳이 직접 블로그를 제작하지 않아도 문제없다고 생각합니다.

제작 과정

제작을 시작하기전에 전체적인 흐름을 먼저 파악해라

블로그를 직접 만든다고 가정해봅시다.
우선 내가 만들어야될 기능이 무엇이 있을지 고려해보고
우선순위에 착안해서 기능을 개발해야 문제없이 설계할 수 있습니다.

필수 기능

게시글 목록 (전체 / 카테고리)
게시글 상세페이지
댓글

부가 기능

다크 / 라이트 기능
목차 사이드바 (TOC)
최상단, 최하단 이동 버튼
게시글 주소 복사
검색엔진 최적화 (SEO)
Reading Time Parsing
방문자 집계
날짜별 정렬
검색 기능

기술스택 선택하기

개인 블로그는 유지보수에 많은 시간을 사용하게 됩니다.
따라서 자신에게 친숙한 도구를 중점으로 사용하는게 좋습니다.

저는 복잡한 UI를 설계할거기때문에 typescript를 사용했고
레이아웃의 빠른 설계를 위해 tailwindCSS를 사용했습니다.

FrameWork: Next.js

현 프론트엔드 생태계에서 가장 핫한 프레임워크라고 할 수 있습니다.
Next.js를 사용하는 회사도 점차 많아지고 있고,
현 최신버전에 맞는 App-router에 적응하고, 학습하고자 선택했습니다.

Design: Tailwind CSS + Framer-Motion

가장 핫한 Js in CSS 라이브러리입니다. 물론 처음부터 설계하라고 한다면
Shadcn/ui도 같이 사용하며 UI를 간단하게 설계하는 것을 권장드립니다.
저는 규격화되어있지않는 저만의 디자인을 설계하고자 tailwindCSS를 사용하고, 사용자 친화적인 애니메이션을 다루고자 Framer-Motion를 다뤘습니다.

Post: MDX

게시글은 mdx로 작성해서 프로젝트 내부 디렉토리에 따로 저장합니다.
아직 블로그내에서 글작성 에디터는 따로 만들지 않았습니다. (개인 블로그인데 그정도가 필요할까요?..)

개발자라면 마크다운 문법에도 익숙해져야 한다고 생각하여 선택했습니다. 기본적인 md보다
확장적으로 jsx문법을 추가적으로 사용할 수 있는 mdx를 선택하였습니다.

Parsing: Gray-Matter + Next-MDX-Remote

작성된 mdx 파일의 메타정보와 본문 내용을 파싱합니다.
파싱된 정보를 토대로 게시글 목록을 조회할 수 있습니다.

Comment: Supabase

이 또한 현업에서 핫한 기술이죠. 저도 한번도 사용해보지 않았으나,
간단한 댓글 기능을 제공해주는 giscus, utterance 들은
비회원 이용자에게 댓글을 제공하지 않습니다.

그런 점에서 직접 댓글을 설계하고싶어 Supabase를 활용해서 Non-SQL로 설계해보고자 채택했습니다.

Deploy: Vercel

정적 웹사이트 및 서버리스 함수를 배포하고, 관리하는데 사용되는 클라우트 플랫폼 입니다.
Next.js는 Vercel에서 만든 프레임워크입니다. 따라서 호환성이 아주높고 많은 기능을 제공합니다.

레포지토리를 연동해두면 CI/CD 파이프라인또한 자동으로 수행됩니다.
간단하게 정적 웹 호스팅을 위해서라면 최고의 선택이 아닐까 싶습니다.

저는 계속해서 필요하다고 판단하는 라이브러리를 추가했지만, 선택적으로 사용하시기 바랍니다.

fec/remark-a11y-emoji : 마크다운내 이모티콘을 지원합니다.
tailwindcss/typography : 마크다운의 기본적인 스타일을 잡아줍니다.
dayjs : 가벼운 날짜 라이브러리, Date 처리를 쉽게 해줍니다.
js-cookie : 쿠키를 쉽게 사용하게 해줍니다.
next-image-export-optimizer : 정적 이미지 최적화 라이브러리
next-themes : next환경에서 다크/라이트 테마를 쉽게 처리하게 도와줍니다.
react-use : useEffectOnce, copy기능등 유용한 훅을 추가해줍니다.
reading-time : 파싱된 mdx파일의 읽는시간을 계산합니다
rehype-slug : h1,h2등 특정 태그에 적용 명칭을 붙여줍니다. toc 설계가 간편해집니다.
rehype-pretty-code : 코드블럭의 디자인을 도와줍니다.
shiki : rehype-pretty-code의 디자인영역을 담당합니다.
remark-breaks : 마크다운 내 공백을 직접 인식해서 개행합니다.
remark-gfm : 깃허브 추가 마크다운 문법을 제공합니다.
zustand : 전역 상태를 관리하기위해 채택했습니다.

기본적인 윤곽은 잡았으니,

이제 본격적으로 블로그를 설계해보면서 내용을 짚어보겠습니다.

댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.

댓글을 불러오는 중...