> 블로그, 14버전 Next.js로 새로 교체하다!

2024/02/10Crescent

Table of Contents

😇 갑자기 블로그를 새로 교체한 사연.

🥰 주요 제공 기능

1. 제목, 캡션 그리고 하이라이트 기능

2. 수식

2.1. 중복된 수식 숨기기

3. RSS

4. TOC (Table of Contents)

그 외 체크리스트

감사한 문서

😇 갑자기 블로그를 새로 교체한 사연.

Error: Node.js version 16.x has reached End-of-Life. Deployments created on or after 2024-06-15 will fail to build. Please set Node.js Version to 20.x in your Project Settings to use Node.js 20.

나는 내 블로그의 node 버전을 20이라 생각했는데 18도 아닌 16였네요. next.js으로 작성된 블로그여서 vercel에 배포한 상태였는데 vercel에서 방 빼라 경고장이 날아왔습니다;;
그냥 마크다운이 아닌 .mdx 기반의 블로그을 사용하고 있었다. 찾다 보니깐 line highlight 기능이 있는 것을 알게 되었고, 이 기능을 사용하고 싶었습니다.
그런데 기존의 블로그 코드가 꼬였는지 파일 하나만 올렸는데도 배포 오류가 나서 그냥 새로 만들기로 했습니다.

🥰 주요 제공 기능

기본적으로 Next.js + TailwindCSS + TypeScript + Contentlayer를 사용했습니다.
contentlayer로 mdx 파일을 파싱해서 데이터를 가져왔고, 거기서 제공하는 remark와 rehype를 사용해 문서를 꾸몄습니다.
기존의 블로그 기능을 살리는 방향으로 갔습니다.
제가 좋아하는 머테리얼 컬러인 #26a69a계통을 사용해 블로그의 포인트를 주었습니다.

1. 제목, 캡션 그리고 하이라이트 기능

라인 하이라이트 기능

const textForm = document.getElementById('textForm');
const textInput = document.getElementById('textInput');
 
textForm.onsubmit = function (event) {
  event.preventDefault();
  const text = textInput.value;
 
  console.log("input text:", text)
  textInput.value = '';
};

라인 하이라이트 기능을 사용한 코드 블록

```js title="라인 하이라이트 기능" caption="라인 하이라이트 기능을 사용한 코드 블록" showLineNumbers 9 /textInput/ 이라고 작성하면 위와 같은 결과를 얻을 수 있습니다.
rehype-pretty-code를 사용했습니다.
코드의 테마는 min-light로 설정했습니다.

rehype-figure를 사용해 이미지에 캡션을 추가했습니다.
닥스훈트는 정말 멋진 개입니다.(이미지 출처: Dog CEO's Dog API) -> 라고 코파일럿이 작성하래요.

2. 수식

f^{(t)} = \sigma(W_f h^{(t-1)} + U_f x^{(t)} + b_f)

forget gate

remark-math와 rehype-katex을 사용했습니다.
rehype-mathjax를 사용했을 때 실행이 되지 않는 문제가 있어서 rehype-katex로 변경했습니다.

2.1. 중복된 수식 숨기기

/global.css

.prose span.katex-html {
  display: none !important;
}

display: none을 통한 중복된 수식 숨기기

global.css에 span.katex-html을 숨기는 코드를 추가해 이를 해결했습니다.

3. RSS

rss를 사용해 RSS를 생성했습니다.
App router가 아닌 Page router로 진행했기에, /api/에 라우팅을 추가한 후 next.config.js의 rewrites에 추가했습니다.

4. TOC (Table of Contents)

rehype-autolink-headings와 rehype-slug를 사용해 TOC를 만들었습니다.
rehype-autolink-headings는 제목에 링크를 추가해주고, rehype-slug는 제목에 id를 추가해줍니다.
rehype-slug의 hypen 붙이는 알고리즘인 github-slugger를 사용했고, .replace나 .replaceAll를 사용해 h1~h6까지의 제목에서의 링크 등의 마크다운에서 꾸밈효과를 제거했습니다.

그 외 체크리스트

감사한 문서

Next.js 블로그에서 코드 블록 꾸미기, rehype-pretty-code 플러그인 활용법: 사실 이 글을 보고 블로그를 뒤엎게 되었습니다.