nextjs에서 nuxtjs로 변경

쓰기 쉬운 nuxt content

created at: 2023-04-06


왜 옮겼나?

지난 몇달간 nextjs로 블로그를 생성해서 잘 사용했다. 물론 글 작성하기가 귀찮아져서 어느 순간부터 방치하긴 했지만, 언젠가 여러 문제점을 보완하자는 생각은 계속 하고있었다.

다시 velog로 돌아가기도 했다. 확실히 velog가 쓰기 편하다! 하지만.. 그래도 만들어놓은걸 버리려니 뭔가 아쉽다. 그래서 이번에 시간을 좀 내서 새롭게 만들었다.

기왕 하는김에 이전에 하고싶었던 마크다운 파싱 템플릿도 수정하려 했는데, nuxtjs/content를 발견했다. 파일기반 관리에 마크다운 파싱이나 코드 하이라이팅 등.. 필요하다 싶은건 다 때려박은 라이브러리인데, 한번 찍먹해봤다.

그렇게 한번 써보고 나니, nuxt로 넘어가지 않을 수가 없었다..

@nuxtjs/content는 이런것도 된다

@nuxtjs/content에서는 미리 정의한 vue 컴포넌트를 마크다운에서 사용할 수 있다. 다음과 같이 마크다운을 작성하면

::note
note가 추가된다
::

NOTE

note가 추가된다

이렇게 사전에 정의한 컴포넌트가 렌더링된다.

어떻게 정의하냐에 따라서

CAUTION

이렇게 할 수도 있다.

물론 직접 구현할 수도 있겠지만... 이미 잘 만들어진 라이브러리를 쓰는게 더 낫다.

하는김에 tailwind도 같이 써보자

기존에는 bootstrap을 사용했는데, 이번에는 tailwind를 사용했다. @nuxtjs/content를 쓰다보니 bootstrap보다는 tailwind가 더 쓰기 편한 이유도 있지만, 그냥 이전에 써보지 않을걸 써보고 싶었다.

처음이지만 그래도 생각보다는 잘 적용한 것 같다.

앞으로 추가할 기능

  • 다크모드 토글

    이전에 구현은 했지만 사용하지 않았는데.. 이제는 아예 없다.

    2023-04-08 구현 완료. tailwind를 사용하니 생각보다 간단했다.

  • 무한 스크롤

    현재 글 목록은 페이지로 나눠서 제공하는데, 무한 스크롤로 만들어보고 싶다.