diff --git a/packages/nextra/src/client/components/auto-refresh.ts b/packages/nextra/src/client/components/auto-refresh.ts
index 7011fbd3c8..16b01b39f5 100644
--- a/packages/nextra/src/client/components/auto-refresh.ts
+++ b/packages/nextra/src/client/components/auto-refresh.ts
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps -- dev code will be removed from production build */
 'use client'
 
 // Based on https://www.steveruiz.me/posts/nextjs-refresh-content
@@ -7,16 +8,14 @@ import type { FC, ReactNode } from 'react'
 import { useEffect } from 'react'
 
 export const AutoRefresh: FC<{ children: ReactNode }> = ({ children }) => {
-  if (process.env.NODE_ENV === 'production') {
+  const port = process.env.NEXTRA_WS_PORT
+  console.log({ port })
+  if (process.env.NODE_ENV === 'production' || !port) {
     return children
   }
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- this code will be removed from production
   const router = useRouter()
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- this code will be removed from production
   useEffect(() => {
-    const ws = new WebSocket(`ws://localhost:${process.env.NEXTRA_WS_PORT}`)
+    const ws = new WebSocket(`ws://localhost:${port}`)
     ws.onmessage = event => {
       if (event.data === 'refresh') {
         router.refresh()
@@ -25,7 +24,7 @@ export const AutoRefresh: FC<{ children: ReactNode }> = ({ children }) => {
     return () => {
       ws.close()
     }
-  }, [router])
+  }, [])
 
   return children
 }
diff --git a/packages/nextra/src/server/index.ts b/packages/nextra/src/server/index.ts
index ee1e00fe03..6ffbbeb448 100644
--- a/packages/nextra/src/server/index.ts
+++ b/packages/nextra/src/server/index.ts
@@ -1,6 +1,6 @@
 /* eslint-env node */
 import path, { sep } from 'node:path'
-import { NextConfig } from 'next'
+import type { NextConfig } from 'next'
 import { fromZodError } from 'zod-validation-error'
 import type { Nextra } from '../types'
 import {
diff --git a/packages/nextra/src/server/watcher.ts b/packages/nextra/src/server/watcher.ts
index 5324d0c1aa..d4bbc1ad53 100644
--- a/packages/nextra/src/server/watcher.ts
+++ b/packages/nextra/src/server/watcher.ts
@@ -1,4 +1,4 @@
-import fs from 'node:fs'
+import fs from 'graceful-fs'
 import { WebSocketServer } from 'ws'
 import type { AddressInfo, WebSocket } from 'ws'
 import { logger } from './utils.js'
@@ -14,18 +14,22 @@ function withResolvers<T>() {
   return { promise, resolve: resolve!, reject: reject! }
 }
 
+// Based on https://www.steveruiz.me/posts/nextjs-refresh-content
+// and https://github.com/gaearon/overreacted.io/pull/797
 export async function createWsWatcherAndGetPort(
   folder: string
 ): Promise<number> {
   const { promise, resolve } = withResolvers<number>()
 
-  const wss = new WebSocketServer({ port: 0 }, function (this: {
-    address: () => AddressInfo
-  }) {
-    const { port } = this.address()
-    logger.info(`ws server is listening on port: ${port}`)
-    resolve(port)
-  })
+  const wss = new WebSocketServer(
+    // to get random port
+    { port: 0 },
+    function (this: { address: () => AddressInfo }) {
+      const { port } = this.address()
+      logger.info(`ws server is listening on port: ${port}`)
+      resolve(port)
+    }
+  )
 
   const clients = new Set<WebSocket>()