next.js搭建路由01

crop-x/src/app/error.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error(error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 via-orange-50 to-yellow-50">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-red-800 mb-4">
+          系统出现了错误
+        </h2>
+        <p className="text-red-600 mb-6">
+          {error.message || '未知错误'}
+        </p>
+        <button
+          onClick={reset}
+          className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
+        >
+          重新加载
+        </button>
+      </div>
+    </div>
+  )
+}