fix: add custom 404 and global error pages for Docker build

Create not-found.tsx and global-error.tsx to prevent Next.js from falling back to legacy Pages Router _error pages during static generation, which fail with useContext null in Docker. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-06 11:28:37 +08:00
parent 5e7eb20c26
commit 5230a31942
2 changed files with 65 additions and 0 deletions
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+export default function GlobalError({
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body
+        style={{
+          backgroundColor: "#252A2F",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100vh",
+          gap: 16,
+          fontFamily: "Lato, sans-serif",
+          color: "white",
+        }}
+      >
+        <h2>Terjadi Kesalahan</h2>
+        <button
+          onClick={() => reset()}
+          style={{
+            padding: "8px 16px",
+            borderRadius: 4,
+            border: "1px solid #ccc",
+            background: "transparent",
+            color: "white",
+            cursor: "pointer",
+          }}
+        >
+          Coba Lagi
+        </button>
+      </body>
+    </html>
+  );
+}
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -0,0 +1,24 @@
+import { Box, Text, Button } from "@mantine/core";
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <Box
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "100vh",
+        gap: 16,
+      }}
+    >
+      <Text size="xl" fw={700} c="white">
+        404 - Halaman Tidak Ditemukan
+      </Text>
+      <Button component={Link} href="/" variant="light">
+        Kembali ke Beranda
+      </Button>
+    </Box>
+  );
+}