（※）2026年現在、こちらのブログは技術構成を変更しました。

はじめに

当ブログの記事は、mdファイルで記事を管理しています。

Next.jsは開発環境のホットリロードに対応しているので、記事の見た目を随時確認しながら更新する予定でした。

ただNext.jsでは、mdファイルの更新を検知してくれないようで、これは誤算でした。

解決策を調査する

一番シンプルなのはnext-remote-watchを使うことのようです。

私も嬉々として導入しましたが、なぜかうまく動かず……。
原因を調べようかとも思いましたが、時間がかかりそうで挫折してしまいました。

(ですので、そもそも私の使い方が悪かったのかもしれません。)

あきらめて別の方法を探していたところ、下記の記事を発見し、導入したところうまくいきました。

Next.jsブログのmarkdown編集時に表示更新する

実装方法

方法はほぼ同様なのですが、私の場合ということで念のためまとめます。

1. expressとchokidarをインストール

ファイル監視を行うchokidarと実行環境のexpressをインストールします。

npm i express chokidar

2. server.jsを作成

ディレクトリの直下にserver.jsを作成します。

⋮
├src
│ ├app
│ ├lib
│ │ └post.ts // 定期更新対象
│ ├posts     // 監視対象(mdが入る)
│ ⋮
├server.js   // 今回のファイル
⋮

server.jsの内容は下記のとおりです。
先ほど紹介した記事のコードをほぼほぼコピペして使わせていただきました。

重ねてありがとうございます。

import express from "express";
import path from "node:path";
import fs from "node:fs";
import chokidar from "chokidar";

const app = express();

app.listen(4000, () => {
  console.log("http://localhost:4000");
  let isUpdating = false;
  const postTs = path.join(process.cwd(), "/src/lib/post.ts");
  console.log(postTs);

  const onChangePost = () => {
    if (isUpdating) return;
    isUpdating = true;
    const content = fs.readFileSync(postTs, "utf-8");
    fs.writeFileSync(
      postTs,
      `${content}\nconsole.log('updatedAt: ${new Date().toISOString()}')`,
    );
    setTimeout(() => {
      fs.writeFileSync(postTs, content);
      isUpdating = false;
    }, 1000);
  };

  chokidar
    .watch(path.join(process.cwd(), "/src/posts"), { ignoreInitial: true })
    .on("add", onChangePost)
    .on("change", onChangePost);
});

内容としては、chokidarを使ってsrc/posts配下にあるmdファイルを監視します。
変更を検知した際に、onChangePost関数を実行します。onChangePost関数は、lib/post.tsにコードを追加し、1秒後に元に戻します。

3. package.jsonに追加する

最後に、package.jsonにdev:serverとdev:nextを追加し、下記のように書き換えます。

これでnpm run devを実行すると、server.jsとnext.jsの両方が起動します。

⋮
"scripts": {
  "dev:next": "next dev",
  "dev:server": "node server.js",
  "dev": "npm run dev:server & npm run dev:next",
  ⋮
}

まとめ

expressとchokidarを使ってmarkdownを監視する方法をまとめました。
私の環境ではこれで必要十分なスピードで更新されましたので、大変満足です。

ではまた。