はじめに
当ブログの記事は、mdファイルで記事を管理しています。
Next.jsは開発環境のホットリロードに対応しているので、記事の見た目を随時確認しながら更新する予定でした。
ただNext.jsでは、mdファイルの更新を検知してくれないようで、これは誤算でした。
解決策を調査する
一番シンプルなのはnext-remote-watchを使うことのようです。
私も嬉々として導入しましたが、なぜかうまく動かず……。
原因を調べようかとも思いましたが、時間がかかりそうで挫折してしまいました。
(ですので、そもそも私の使い方が悪かったのかもしれません。)
あきらめて別の方法を探していたところ、下記の記事を発見し、導入したところうまくいきました。
Next.jsブログのmarkdown編集時に表示更新する
miyaoka.dev
実装方法
方法はほぼ同様なのですが、私の場合ということで念のためまとめます。
1. expressとchokidarをインストール
ファイル監視を行うchokidarと実行環境のexpressをインストールします。
1npm i express chokidar
2. server.jsを作成
ディレクトリの直下にserver.jsを作成します。
⋮
├src
│ ├app
│ ├lib
│ │ └post.ts // 定期更新対象
│ ├posts // 監視対象(mdが入る)
│ ⋮
├server.js // 今回のファイル
⋮
server.jsの内容は下記のとおりです。
先ほど紹介した記事のコードをほぼほぼコピペして使わせていただきました。
重ねてありがとうございます。
1import express from 'express'; 2import path from 'node:path'; 3import fs from 'node:fs'; 4import chokidar from 'chokidar'; 5 6const app = express(); 7 8app.listen(4000, () => { 9 console.log('http://localhost:4000'); 10 let isUpdating = false; 11 const postTs = path.join(process.cwd(), '/src/lib/post.ts'); 12 console.log(postTs); 13 14 const onChangePost = () => { 15 if (isUpdating) return; 16 isUpdating = true; 17 const content = fs.readFileSync(postTs, 'utf-8'); 18 fs.writeFileSync( 19 postTs, 20 `${content}\nconsole.log('updatedAt: ${new Date().toISOString()}')`, 21 ); 22 setTimeout(() => { 23 fs.writeFileSync(postTs, content); 24 isUpdating = false; 25 }, 1000); 26 }; 27 28 chokidar 29 .watch(path.join(process.cwd(), '/src/posts'), { ignoreInitial: true }) 30 .on('add', onChangePost) 31 .on('change', onChangePost); 32});
内容としては、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の両方が起動します。
1⋮ 2"scripts": { 3 "dev:next": "next dev", 4 "dev:server": "node server.js", 5 "dev": "npm run dev:server & npm run dev:next", 6 ⋮ 7}
まとめ
expressとchokidarを使ってmarkdownを監視する方法をまとめました。
私の環境ではこれで必要十分なスピードで更新されましたので、大変満足です。
ではまた。