전 회사에서 애용하던 Next.js를 이용해 블로그를 만들어 보기로 했다. Next.js가 App Router를 정식으로 지원하면서 많은 게 달라졌다는데 궁금하다.
오랜만에 써보는 create-next-app
create-next-app도 많이 좋아진 것 같다. Typescript는 당연하고 이젠 Tailwind CSS도 자동으로 설정해준다.
그리고 import alias도 설정해준다. 예전엔 create-next-app을 실행한 이후에 많은 것을 직접 처리했던 것 같은데 편해졌다.
한편으로는 Tailwind CSS가 업계 표준이 되어가는 건가 싶어서 긴장된다. 난 여전히 오래된 방식으로 스타일을 만들고 있는데...
여전히 prettier는 내가 직접 설치해줘야 했다. 첫 번째 커밋에 gitmoji(🎉)를 달아주고 바로 한 일이 prettier를 설정하는 일이었다.
딴 소린데 최근에 prettier v3가 릴리즈된 건 보고 감회가 새로웠다.
프로젝트에서 사용하는 Node.js 버전을 고정
프로젝트가 어디에서 실행되건 Node.js 20을 사용하도록 강제하는 작업을 했다. @types/node 패키지도 최신화하고, package.json에 Node.js 버전도 명시해줬다.
프로젝트의 의존성을 dependencies로 통합
dependencies와 devDependencies를 열심히 구분하려는 노력을 아주 오랫동안 해왔다.
SPA에서 devDependencies가 가지는 의미를 정리해보기도 했다.
개발할 때만 사용하는 패키지가 개발 의존성이고 빌드할 때 사용하면 일반 의존성일까?
빌드할 때 필요한 것까지도 개발 의존성이고 프로덕션에서 실행하는 코드가 참조하는 의존성만 일반 의존성일까?
Next.js는 node_modules를 참조하니 서버에서 실행하는 코드는 그렇다 쳐도,
클라이언트에서 참조하는 패키지는 빌드 결과물에 모든 소스코드가 포함되어 있음에도 일반 의존성이니 서버의 node_modules에 설치해야 할까?
이렇게 항상 고민하게 만드는 모호한 문제인 반면에 둘을 분리했을 때의 이점은 크지 않다. 만약 하나의 규칙을 정해서 엄격하게 사용한다면 배포 단계의 어느 시점의 시간을 단축할 수도 있겠지만, 이 시간을 줄여야 할 필요를 느끼기 전까지 고민할 시간을 절약하기로 했다.
MDX 문서 표시
블로그 글을 MDX로 작성하기로 했다. MDX를 쓰면 마크다운의 이점을 취하면서도 자유롭게 리액트 컴포넌트를 사용할 수 있다는 점이 매력적이었다. 내가 쓰는 블로그 글은 리액트 실험이나 컴포넌트 제작 과정에서 했던 생각을 정리하는 경우가 많은데 이에 적합한 포맷은 MDX라고 추측했다. 아직 많은 글을 써보지 않아서 어떨지 모르겠지만...
Next.js에서 제공하는 MDX 가이드 문서를 따라 설정을 완료했고, 이 글이 처음 MDX로 작성해보는 글이다. 하지만, 아직 리액트 컴포넌트를 사용할 일은 없어서 아쉽다.
Next.js에서 시키는 대로 기본 설정만 하면 이모지를 제대로 렌더링하지 않는 현상을 발견했다. 🎉(폭죽 이모지)를 써도 `:tada:` 이렇게만 표시된다. 플러그인을 쓰면 되지 않을까 하는 생각을 했고, 가이드 문서에 있던 "rehype", "remarks" 플러그인 설정이 떠올랐다. `remarks-emoji`라는 플러그인을 찾았고, 적용해 주니 문제없이 렌더링되었다. 슬랙처럼 :tada:를 입력했을 때 자동으로 🎉로 변환해주면 좋겠다. 플러그인의 기능으로 되지 않을까 싶어서 다음에 좀 더 깊이 알아봐야겠다.
왜 그런진 모르겠지만 지금 보니 remarks-emoji 패키지가 없어도 이모지가 잘 표시된다. 그래도 :tada:를 자동으로 🎉로 변환하는 건 여전히 필요한 기능이다. 🥺
MDX가 렌더링하는 태그의 스타일 적용
MDX가 렌더링하는 HTML 태그는 어떻게 스타일링할 수 있을지 궁금했는데 <root>/mdx-components.tsx에서 정의하는 훅(이름이 useMDXComponents니까 훅이겠...지?)에서
반환하는 객체에 정의할 수 있었다.
굉장히 심플했다. 리액트의 컴포넌트 시스템을 최대한 이용할 수 있는 인터페이스 같다.
컴포넌트를 정의하는 것이기 때문에 단순히 스타일을 적용하는 것을 넘어서 특정한 UI가 되도록 만들어 주는 것도 될 것 같다.
예를 들어 제목 앞에 아이콘을 넣는다거나, 세 번째 헤딩엔 구분선을 넣는다거나.
포스트 디렉토리의 doc.mdx와 page.tsx
둘이 공존하는 게 조금 마음에 안 들었다. page.mdx로 바로 포스트를 작성하고 싶었는데 Next.js가 제대로 인식하지 못했다.
그런데 next.config에서 페이지 모듈의 확장자를 설정해줬더니 해결되었다! 😀
배포하기
배포는 역시 vercel로 하는 게 제일 편할 것 같다. GitHub 레포지토리에 푸시한 다음, vercel에서 임포트 해온다. "Deploy" 버튼을 누르면 끝!... 인줄 알았으나, vercel은 Node.js 20을 지원하지 않는다. Node.js 18 중에서도 18.16을 사용하네... 최신 버전은 18.17인데! 기준을 좀 더 완화해야겠다. 18.16으로 완화하니 이제 정말로 끝!