Next.js 블로그 만들기

Next.js 블로그 템플릿 커스터마이징

포트폴리오를 겸할 수 있는 공간을 만들고 싶어서, 기존 Next.js 블로그 템플릿을 나만의 스타일에 맞게 커스터마이징하고 필요한 기능들을 직접 추가했다. 나만의 공간이 생겨서 기쁘다.

한글이 잘리는 정규식 수정하기

function slugify(str: string) {
  return str
    .toString()
    .toLowerCase()
    .trim() // 앞뒤 공백 제거
    .replace(/&/g, "-and-") // & → -and-
    .replace(/[^\w가-힣\s\-]+/g, "") // 특수문자 제거 (공백과 하이픈, 한글 허용)
    .replace(/\s{2,}/g, " "); // 두 칸 이상 공백 → 한 칸
}

Heading 태그 안의 텍스트가 영문일 땐 a 태그의 href가 정상적으로 생성되는데, 한글일 땐 잘리는 현상이 발생했다. 문제를 찾아보니, mdx.tsx에서 slug 생성 시 사용한 정규식이 한글을 제외하고 있었던 게 원인이었다. 정규식을 수정해서 한글도 포함되도록 처리했고, 현재는 정상적으로 동작한다.

목차 자동 생성하기

기존에는 MDX의 Heading 태그 안에 <a> 태그가 자동으로 생성되어 앵커 기능을 처리하고 있었다. heading태그 안에 a태그를 자동으로 생성할 필요는 없기 때문에 이 부분을 제거해주고 utils.ts에 getHeadingsFromContent() 함수를 만들어 getBlogPosts() 함수 내에서 heading 정보를 함께 반환하도록 처리했다. 이제 페이지 렌더링 시 post.headings를 <Toc />에 넘겨주면 본문 구조에 맞는 목차가 자동으로 생성된다.

포스트 스타일 정의하기

인용문구 예시

목록 예시

• 목록 1
• 목록 2
  • 목록 2-2

순서 예시

1. 순서
2. 순서

글 하이라이팅은 회색 배경으로 링크와 굵은 링크는 강조된 컬러 표시와 hover효과가 있다. 외부 링크는 새 탭을 나타내는 아이콘이 생긴다. 강조된 글씨는 이렇게 보인다.