처음 개발 시작했을 때 Jekyll(Ruby)로 블로그를 만들어서 GitHub Pages로 호스팅했었는데, 만들기만 하고 한참 방치해뒀던 기억이 납니다.
Next.js로 다시 만들어 보려고 해요. 3년 만에 새로 만드는 블로그 제작기... 이번엔 꾸준히 운영할 수 있을까요?

블로그 템플릿 살펴보기

아래 Next.js 템플릿들을 참고했습니다.

• Portfolio Starter Kit
• Blog Starter Kit

블로그 템블릿에 적용된 기능 중, 이전에는 신경쓰지 못했던 부분들이 많더라구요.

OpenGraph 이미지

OG 이미지는 소셜 미디어나 메신저에서 웹사이트 링크를 공유할 때, 미리보기에 활용되는 이미지입니다.
아래는 OG 이미지를 동적으로 생성하는 라우트 핸들러입니다.

1import { ImageResponse } from "next/og";
2import type { NextRequest } from "next/server";
3
4export async function GET(
5    _req: NextRequest,
6    ctx: RouteContext<"/og/posts/[slug]">,
7) {
8    const { slug } = await ctx.params;
9
10    return new ImageResponse(
11        <div tw="flex h-full w-full p-5 flex-col justify-between bg-[#F8FAF8] text-[#1d211c]">
12            ...
13        </div>,
14        {
15            width: 1200,
16            height: 630,
17        },
18    );
19}
Expand

이런 식으로 포스팅마다 동적으로 생성됩니다.

JSON-LD

웹페이지의 데이터를 JSON 기반으로 구조화하여, 검색 엔진이 웹페이지의 콘텐츠를 더 잘 이해하도록 돕는 마크업 언어라고 합니다. JSON 기반이라 읽기 쉽고, 기존 메타 태그 방식보다 유지 보수가 쉬운 장점이 있습니다.

아래처럼 script 태그를 만들어서 넣으면 됩니다. 위치는 꼭 head 태그 안이 아니어도 상관없다고 하네요.

1<script
2    type="application/ld+json"
3    dangerouslySetInnerHTML={{
4        __html: JSON.stringify({
5            "@context": "https://schema.org",
6            "@type": "BlogPosting",
7            headline: post.title,
8            datePublished: post.publishedAt,
9            dateModified: post.lastModifiedAt,
10            description: post.summary,
11            image: `${process.env.BASE_URL}/og/posts/${post.slug}`,
12            url: `${process.env.BASE_URL}/posts/${post.slug}`,
13            author: {
14                "@type": "Person",
15                name: "Jang Jong-in",
16            },
17        })
18    }}
19/>
Expand

Markdown 기반 블로그

블로그 글은 .md 파일로 관리하기로 했습니다. 렌더링/에디터 라이브러리 종속성을 최소화하는 방향으로 가고 싶었어요.
또한 글을 데이터로 관리하면 글만 따로 모아 별도의 리포지토리에서 관리할 수 있고, 마이그레이션/재사용에 용이하기 때문입니다.

Markdown 렌더링 라이브러리는 react-markdown을 선택했습니다.
블록 컴포넌트를 커스터마이징할 수 있고 플러그인이 다양한 점이 마음에 들었습니다.
아무래도 수식, 도식을 활용할 일이 많을 것 같아서 KaTeX, Mermaid 플러그인을 적용헸어요.

TO-DO

• 공통 렌더링 블록 컴포넌트로 분리
  • CommonMark
    • Thematic breaks
    • ATX headings
    • Paragraphs
    • Block quotes
    • Lists
    • Code spans
    • Links
    • Images
    • Autolinks
  • GFM(GitHub Flavored Markdown)
    • Tables
    • Task list items
    • Strikethrough
    • Autolinks
• CodeSandbox 블록
• TOC(Table of Contents) 사이드바
• 검색
• 방문자 수
• 댓글
• 그래프 뷰
• 에디터