saltcandy123
2020年9月21日

Next.js を使った個人用ブログの開発メモ

Next.js で個人用ブログを作ってみました。

基本

Next.js の公式チュートリアル (ソースコード) では、まさにブログを題材にしています。 これを見ればとりあえず完成します。

unified を使ったカスタマイズ

unified は、文字列や木構造の小さな変換を組み合わせて繋いでいくことで、柔軟な変換処理を提供するフレームワークです。

例えば、次のプラグインを組み合わせることで、 Markdown から React コンポーネントへの変換が可能です。

これに加えて、記事中のコードのハイライトのために rehype-highlight を使ったり、数式を表示させるために remark-mathrehype-katex を使ったりするといい感じです。

プラグインは自作することもできます。 Markdown からタイトルを抽出するプラグインはこんな感じで書くことができます。

import unified, { Plugin } from "unified";
import remarkParse from "remark-parse";
import visitParents from "unist-util-visit-parents";
import { Heading } from "mdast";

const h1Extractor: Plugin = function () {
  this.Compiler = (tree) => {
    const h1Texts: string[] = [];
    visitParents(tree, "heading", (node: Heading) => {
      if (node.depth !== 1) return;
      if (node.children.length !== 1 || node.children[0].type !== "text") {
        throw new Error();
      }
      h1Texts.push(node.children[0].value);
    });
    return h1Texts.join(" / ");
  };
};

const titleExtractionProcessor = unified()
  .use(remarkParse)
  .use(h1Extractor)
  .freeze();

function extractTitle(markdown: string): string {
  return titleExtractionProcessor.processSync(markdown).toString();
}