diff --git a/packages/next/server/hot-reloader.ts b/packages/next/server/hot-reloader.ts
index 82114149b3bb..ab91b544ae0b 100644
--- a/packages/next/server/hot-reloader.ts
+++ b/packages/next/server/hot-reloader.ts
@@ -612,6 +612,20 @@ export default class HotReloader {
 
       // If none were found we still have to show the other errors
       return this.stats.compilation.errors
+    } else if (this.serverStats?.hasErrors()) {
+      const { compilation } = this.serverStats
+      const failedPages = erroredPages(compilation)
+
+      // If there is an error related to the requesting page we display it instead of the first error
+      if (
+        failedPages[normalizedPage] &&
+        failedPages[normalizedPage].length > 0
+      ) {
+        return failedPages[normalizedPage]
+      }
+
+      // If none were found we still have to show the other errors
+      return this.serverStats.compilation.errors
     }
 
     return []
diff --git a/test/acceptance/ReactRefreshLogBox.dev.test.js b/test/acceptance/ReactRefreshLogBox.dev.test.js
index 575e91a6b346..b93db3fc9b43 100644
--- a/test/acceptance/ReactRefreshLogBox.dev.test.js
+++ b/test/acceptance/ReactRefreshLogBox.dev.test.js
@@ -1381,6 +1381,30 @@ test('_document top level error shows logbox', async () => {
   await cleanup()
 })
 
+test('server-side only compilation errors', async () => {
+  const [session, cleanup] = await sandbox()
+
+  await session.patch(
+    'pages/index.js',
+    `
+      import myLibrary from 'my-non-existent-library'
+      export async function getStaticProps() {
+        return {
+          props: {
+            result: myLibrary()
+          }
+        }
+      }
+      export default function Hello(props) {
+        return <h1>{props.result}</h1>
+      }
+    `
+  )
+
+  expect(await session.hasRedbox(true)).toBe(true)
+  await cleanup()
+})
+
 test('empty _app shows logbox', async () => {
   const [session, cleanup] = await sandbox(
     undefined,