feat(dev): add SSE-based browser auto-reload triggered by external callers for development environment

Author: yoshinorin

src/app/api/dev/reload/route.ts

@@ -0,0 +1,30 @@
+let controller: ReadableStreamDefaultController | null = null;
+
+export async function GET() {
+  if (process.env.NODE_ENV !== "development") {
+    return new Response("", { status: 404 });
+  }
+
+  if (controller) {
+    controller.enqueue("data: reload\n\n");
+    return Response.json({ message: "reloaded" });
+  }
+
+  return new Response(
+    new ReadableStream({
+      start(c) {
+        controller = c;
+        c.enqueue("data: connected\n\n");
+      },
+      cancel() {
+        controller = null;
+      }
+    }),
+    {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache"
+      }
+    }
+  );
+}

src/app/layout.tsx

@@ -11,6 +11,7 @@ import {
   url
 } from "../../config";
 import { HeadMetaComponent } from "../components/components";
+import DevTools from "../components/dev/DevTools";
 import { fullUrl } from "../utils/url";
 import ClientLayout from "./clientLayout";
 
@@ -62,6 +63,7 @@ export default function RootLayout({
           }}
         />
         <ClientLayout>{children}</ClientLayout>
+        <DevTools />
       </body>
     </html>
   );

src/components/dev/DevTools.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+// Dynamic import with NODE_ENV check ensures dev-only components like ReloadBrowser
+// are completely excluded from the production bundle via tree-shaking.
+// This wrapper exists because layout.tsx is a Server Component, where
+// next/dynamic with { ssr: false } is not allowed.
+const ReloadBrowser =
+  process.env.NODE_ENV === "development"
+    ? dynamic(() => import("./ReloadBrowser"), { ssr: false })
+    : () => null;
+
+export default function DevTools() {
+  return <ReloadBrowser />;
+}

src/components/dev/ReloadBrowser.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function ReloadBrowser() {
+  useEffect(() => {
+    const es = new EventSource("/api/dev/reload");
+    es.onmessage = (e) => {
+      if (e.data === "reload") window.location.reload();
+    };
+    return () => es.close();
+  }, []);
+
+  return null;
+}