feat(dev): add content watcher for HMR and integrate with Next.js config

Author: vLuckyyy

app/(website)/blog/page.tsx

@@ -6,7 +6,7 @@ import { SlideIn, StaggerContainer } from "@/components/ui/motion/motion-compone
 import { getAuthors } from "@/lib/author";
 import { getBlogPosts, getBlogTags } from "@/lib/blog";
 
-export const dynamic = "force-dynamic";
+// export const dynamic = "force-dynamic";
 export const revalidate = 5; // Revalidate every 5 seconds
 
 export const metadata: Metadata = {

app/(website)/docs/[...slug]/page.tsx

@@ -13,6 +13,7 @@ import { ErrorBoundary } from "@/components/docs/content/error-boundary";
 import { ReadingTime } from "@/components/docs/content/reading-time";
 import { components, mdxOptions } from "@/components/ui/mdx/mdx-components";
 import { docsStructure } from "@/lib/sidebar-structure";
+import { refreshTimestamp } from "../refresh";
 
 type DocMeta = {
   title: string;
@@ -148,6 +149,7 @@ export function generateStaticParams() {
 export default async function DocPage({ params }: Props) {
   const resolvedParams = await params;
   const doc = await getDocBySlug(resolvedParams.slug);
+  void refreshTimestamp;
   if (!doc) {
     notFound();
   }

app/(website)/docs/refresh.ts

@@ -0,0 +1,2 @@
+// This file is automatically updated to trigger hot reloads
+export const refreshTimestamp = 1765590851394;

lib/content-watcher.mjs

@@ -0,0 +1,54 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const CONFIG = {
+    debounceMs: 200,
+    contentDir: "content",
+    triggerFile: "app/(website)/docs/refresh.ts", // File that triggers the HMR
+};
+
+const isMdxFile = (filename) => filename && /\.(mdx?|md)$/.test(filename);
+
+const updateTriggerFile = (filePath) => {
+    const timestamp = Date.now();
+    const content = `// This file is automatically updated to trigger hot reloads\nexport const refreshTimestamp = ${timestamp};\n`;
+
+    try {
+        fs.writeFileSync(filePath, content);
+    } catch (error) {
+        console.error(`[ContentWatcher] Failed to update HMR trigger: ${error.message}`);
+    }
+};
+
+export function setupContentWatcher() {
+    if (process.env.NODE_ENV !== "development") {
+        return;
+    }
+
+    const cwd = process.cwd();
+    const contentPath = path.join(cwd, CONFIG.contentDir);
+    const triggerFilePath = path.join(cwd, CONFIG.triggerFile);
+
+    if (!fs.existsSync(contentPath)) {
+        return;
+    }
+
+    let debounceTimer;
+
+    const handleFileChange = (_eventType, filename) => {
+        if (!isMdxFile(filename)) {
+            return;
+        }
+
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+            updateTriggerFile(triggerFilePath);
+        }, CONFIG.debounceMs);
+    };
+
+    try {
+        fs.watch(contentPath, { recursive: true }, handleFileChange);
+    } catch (error) {
+        console.warn(`[ContentWatcher] Failed to start watcher: ${error.message}`);
+    }
+}

next.config.mjs

@@ -1,7 +1,3 @@
-
-
-
-
 const nextConfig = {
   pageExtensions: ["js", "jsx", "ts", "tsx"],
   images: {
@@ -61,12 +57,14 @@ const nextConfig = {
       allowedOrigins: ["eternalcode.pl", "www.eternalcode.pl"],
       bodySizeLimit: "5mb",
     },
-
   },
   bundlePagesRouterDependencies: true,
   serverExternalPackages: ["gray-matter", "sharp", "payload", "@payloadcms/db-sqlite"],
 };
 
 import { withPayload } from '@payloadcms/next/withPayload'
+import { setupContentWatcher } from './lib/content-watcher.mjs';
+
+setupContentWatcher();
 
 export default withPayload(nextConfig);