refactor!: not-found

app/(main)/ClientComponents/ServerDetailClient.tsx

@@ -9,7 +9,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import getEnv from "@/lib/env-entry";
 import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
 import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
+import { notFound, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import useSWR from "swr";
 import useSWRImmutable from "swr/immutable";
@@ -51,6 +51,10 @@ export default function ServerDetailClient({
     (item) => item.id === server_id,
   );
 
+  if (!fallbackData) {
+    notFound();
+  }
+
   const { data, error } = useSWR<NezhaAPISafe>(
     `/api/detail?server_id=${server_id}`,
     nezhaFetcher,

app/not-found.tsx

@@ -2,30 +2,25 @@ import { useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 
+import Footer from "./(main)/footer";
+import Header from "./(main)/header";
+
 export default function NotFoundPage() {
   const t = useTranslations("NotFoundPage");
   return (
-    <main className="relative h-screen w-full">
-      <div className="absolute inset-0 m-4 flex items-center justify-center">
-        <Image
-          priority
-          className="rounded-3xl object-cover"
-          src="/tardis.jpg"
-          fill={true}
-          alt="TARDIS"
-        />
-        <div className="text-container absolute right-4 p-4 md:right-20">
-          <h1 className="text-2xl font-bold opacity-80 md:text-5xl">
-            {t("h1_490-590_404NotFound")}
-          </h1>
-          <p className="text-lg opacity-60 md:text-base">
-            {t("p_601-665_TARDISERROR")}
-          </p>
-          <Link href={"/"} className="text-2xl opacity-80 md:text-3xl">
-            {t("Link_676-775_Doctor")}
+    <div className="flex min-h-screen w-full flex-col">
+      <main className="flex min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 bg-background p-4 md:p-10 md:pt-8">
+        <Header />
+        <section className="flex flex-col items-center min-h-44 justify-center gap-2">
+          <p className="text-sm font-semibold">{t("h1_490-590_404NotFound")}</p>
+          <Link href="/" className="flex items-center gap-1">
+            <p className="text-sm font-medium opacity-40">
+              {t("h1_490-590_404NotFoundBack")}
+            </p>
           </Link>
-        </div>
-      </div>
-    </main>
+        </section>
+        <Footer />
+      </main>
+    </div>
   );
 }

components/ServerCard.tsx

@@ -34,7 +34,7 @@ export default function ServerCard({
   };
 
   return online ? (
-    <Link onClick={saveSession} href={`/${id}`} prefetch={true}>
+    <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
       <Card
         className={cn(
           "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors",
@@ -138,12 +138,7 @@ export default function ServerCard({
             </div>
           </section>
           {showNetTransfer && (
-            <section
-              onClick={() => {
-                router.push(`/${id}`);
-              }}
-              className={"flex items-center justify-between gap-1"}
-            >
+            <section className={"flex items-center justify-between gap-1"}>
               <Badge
                 variant="secondary"
                 className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"

messages/en.json

@@ -98,7 +98,6 @@
   },
   "NotFoundPage": {
     "h1_490-590_404NotFound": "404 Not Found",
-    "p_601-665_TARDISERROR": "TARDIS ERROR!",
-    "Link_676-775_Doctor": "Doctor?"
+    "h1_490-590_404NotFoundBack": " Press here to go back"
   }
 }

messages/ja.json

@@ -98,7 +98,6 @@
   },
   "NotFoundPage": {
     "h1_490-590_404NotFound": "404 見つかりませんでした",
-    "p_601-665_TARDISERROR": "ターディスエラー!",
-    "Link_676-775_Doctor": "Doctor?"
+    "h1_490-590_404NotFoundBack": "戻る"
   }
 }

messages/zh-t.json

@@ -98,7 +98,6 @@
   },
   "NotFoundPage": {
     "h1_490-590_404NotFound": "404 未找到",
-    "p_601-665_TARDISERROR": "TARDIS 錯誤！",
-    "Link_676-775_Doctor": "Doctor？"
+    "h1_490-590_404NotFoundBack": "返回"
   }
 }

messages/zh.json

@@ -98,7 +98,6 @@
   },
   "NotFoundPage": {
     "h1_490-590_404NotFound": "404 未找到",
-    "p_601-665_TARDISERROR": "TARDIS 错误！",
-    "Link_676-775_Doctor": "Doctor？"
+    "h1_490-590_404NotFoundBack": "返回"
   }
 }