Merge pull request #5 from hamster1963/swr-prefetch

feat: prefetch data and add Dockerfile

Dockerfile

@@ -0,0 +1,58 @@
+FROM node:21-alpine AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+RUN apk --no-cache add ca-certificates wget
+RUN wget -q -O /etc/apk/keys/sgerrand.rsa.pub https://alpine-pkgs.sgerrand.com/sgerrand.rsa.pub
+RUN wget https://github.com/sgerrand/alpine-pkg-glibc/releases/download/2.28-r0/glibc-2.28-r0.apk
+RUN apk add --no-cache --force-overwrite glibc-2.28-r0.apk
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* bun.lockb* ./
+RUN \
+    if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+    elif [ -f package-lock.json ]; then npm ci; \
+    elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+    elif [ -f bun.lockb ]; then npm install -g bun && bun install; \
+    else echo "Lockfile not found." && exit 1; \
+    fi
+
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ARG PROD_ENV=""
+# Appends to .env.production
+RUN printf "$PROD_ENV" >> .env.production
+
+RUN yarn build
+
+
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.env.production ./.env.production
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

README.md

@@ -6,13 +6,11 @@
 </div>
 
 ### 一键部署到 Vercel
+
 [部署简易教程](https://buycoffee.top/blog/tech/nezha)
 <br>
 <br>
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhamster1963%2Fnezha-dash&env=NezhaBaseUrl,NezhaAuth&project-name=nezha-dash&repository-name=nezha-dash)
 
-
-
-
 ![screen-shot-one](/.github/shotOne.png)
 ![screen-shot-two](/.github/shotTwo.png)

app/(main)/ClientComponents/ServerListClient.tsx

@@ -4,33 +4,31 @@ import { ServerApi } from "@/app/types/nezha-api";
 import ServerCard from "@/components/ServerCard";
 import { nezhaFetcher } from "@/lib/utils";
 import useSWR from "swr";
-import { DateTime } from "luxon";
 
 export default function ServerListClient() {
-  const { data } = useSWR<ServerApi>('/api/server', nezhaFetcher, {
+  const { data } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
     refreshInterval: 3000,
   });
   if (!data) return null;
   const sortedResult = data.result.sort((a: any, b: any) => a.id - b.id);
+  const timestamp = Date.now() / 1000;
 
   return (
-    <section className={"grid grid-cols-1 gap-2  md:grid-cols-2"}>
+    <section className={"grid grid-cols-1 gap-2 md:grid-cols-2"}>
-      {sortedResult.map(
+      {sortedResult.map((server: any) => (
-        (server: any) => (
+        <ServerCard
-          <ServerCard
+          key={server.id}
-            key={server.id}
+          id={server.id}
-            id={server.id}
+          cpu={server.status.CPU}
-            cpu={server.status.CPU}
+          name={server.name}
-            name={server.name}
+          up={server.status.NetOutSpeed / 1024 / 1024}
-            up={server.status.NetOutSpeed / 1024 / 1024}
+          down={server.status.NetInSpeed / 1024 / 1024}
-            down={server.status.NetInSpeed / 1024 / 1024}
+          status={timestamp - server.last_active > 300 ? "offline" : "online"}
-            status={DateTime.now().toUnixInteger() - server.last_active > 300 ? "offline" : "online"}
+          uptime={server.status.Uptime / 86400}
-            uptime={server.status.Uptime / 86400}
+          mem={(server.status.MemUsed / server.host.MemTotal) * 100}
-            mem={(server.status.MemUsed / server.host.MemTotal) * 100}
+          stg={(server.status.DiskUsed / server.host.DiskTotal) * 100}
-            stg={(server.status.DiskUsed / server.host.DiskTotal) * 100}
+        />
-          />
+      ))}
-        ),
-      )}
     </section>
   );
 }

app/(main)/footer.tsx

@@ -1,22 +1,22 @@
 export default function Footer() {
-    return (
+  return (
-        <footer className="mx-auto w-full max-w-5xl">
+    <footer className="mx-auto w-full max-w-5xl">
-            <section className="flex flex-col">
+      <section className="flex flex-col">
-                <p className="mt-3 flex gap-1 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
+        <p className="mt-3 flex gap-1 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
-                    Find the code on{' '}
+          Find the code on{" "}
-                    <a
+          <a
-                        href="https://github.com/hamster1963/nezha-dash"
+            href="https://github.com/hamster1963/nezha-dash"
-                        target="_blank"
+            target="_blank"
-                        className="cursor-pointer font-normal underline decoration-yellow-500 decoration-2 underline-offset-2 dark:decoration-yellow-500/50"
+            className="cursor-pointer font-normal underline decoration-yellow-500 decoration-2 underline-offset-2 dark:decoration-yellow-500/50"
-                    >
+          >
-                        GitHub
+            GitHub
-                    </a>
+          </a>
-                </p>
+        </p>
-                <section className="mt-1 flex items-center gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
+        <section className="mt-1 flex items-center gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
-                    © 2020-{new Date().getFullYear()}{' '}
+          © 2020-{new Date().getFullYear()}{" "}
-                    <a href={'https://github.com/hamster1963'}>@Hamster1963</a>
+          <a href={"https://github.com/hamster1963"}>@Hamster1963</a>
-                </section>
+        </section>
-            </section>
+      </section>
-        </footer>
+    </footer>
-    )
+  );
 }

app/(main)/header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { Separator } from "@/components/ui/separator";
 import { DateTime } from "luxon";
@@ -36,22 +36,45 @@ function Header() {
   );
 }
 
+// https://github.com/streamich/react-use/blob/master/src/useInterval.ts
+const useInterval = (callback: Function, delay?: number | null) => {
+  const savedCallback = useRef<Function>(() => { });
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  useEffect(() => {
+    if (delay !== null) {
+      const interval = setInterval(() => savedCallback.current(), delay || 0);
+      return () => clearInterval(interval);
+    }
+
+    return undefined;
+  }, [delay]);
+};
+
 function Overview() {
   const [mouted, setMounted] = useState(false);
   useEffect(() => {
     setMounted(true);
   }, []);
-  const time = DateTime.TIME_SIMPLE;
+  const timeOption = DateTime.TIME_SIMPLE;
-  time.hour12 = true;
+  timeOption.hour12 = true;
+  const [timeString, setTimeString] = useState(DateTime.now().setLocale("en-US").toLocaleString(timeOption));
+
+  useInterval(() => {
+    setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption));
+  }, 1000);
 
   return (
-    <section className={"md:mt-16 mt-10 flex flex-col"}>
+    <section className={"mt-10 flex flex-col md:mt-16"}>
       <p className="text-md font-semibold">👋 Overview</p>
       <div className="flex items-center gap-1.5">
         <p className="text-sm font-medium opacity-50">where the time is</p>
         {mouted && (
           <p className="opacity-1 text-sm font-medium">
-            {DateTime.now().setLocale("en-US").toLocaleString(time)}
+            {timeString}
           </p>
         )}
       </div>

app/(main)/nav.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import { clsx } from "clsx";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import React from "react";
-
-import { cn } from "@/lib/utils";
-
-export const siteUrlList = [
-  {
-    name: "Home",
-    header: "👋 Overview",
-    url: "/",
-  },
-  {
-    name: "Service",
-    header: "🎛️ Service",
-    url: "/service",
-  },
-];
-export default function Nav() {
-  const nowPath = usePathname();
-  return (
-    <div className={"flex flex-col items-center justify-center"}>
-      <div
-        className={
-          "fixed bottom-6 z-50 flex items-center gap-1 rounded-[50px] bg-stone-700 bg-opacity-80 px-2 py-1.5 backdrop-blur-lg"
-        }
-      >
-        {siteUrlList.map((site, index) => (
-          <div key={site.name} className={"flex items-center gap-1"}>
-            {index !== 0 && (
-              <p key={index} className={"pointer-events-none text-stone-500"}>
-                /
-              </p>
-            )}
-            <Link
-              key={site.name}
-              href={site.url}
-              scroll={true}
-              className={cn(
-                "rounded-[50px] px-2.5 py-1.5 text-[16px] font-[500] text-stone-400 transition-colors sm:hover:text-white",
-                clsx(
-                  nowPath === site.url &&
-                  "bg-stone-500 text-white dark:bg-stone-600",
-                ),
-              )}
-            >
-              {site.name}
-            </Link>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

app/(main)/page.tsx

@@ -1,14 +1,21 @@
 import ServerList from "@/components/ServerList";
 import ServerOverview from "@/components/ServerOverview";
-
+import { GetNezhaData } from "@/lib/prefetch";
-
+import { SWRConfig } from "swr";
 
 export default function Home() {
-
   return (
-    <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
+    <SWRConfig
-      <ServerOverview />
+      value={{
-      <ServerList />
+        fallback: {
-    </div>
+          "/api/server": GetNezhaData(),
+        },
+      }}
+    >
+      <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
+        <ServerOverview />
+        <ServerList />
+      </div>
+    </SWRConfig>
   );
 }

app/api/server/route.ts

@@ -1,56 +1,58 @@
-
 import { NezhaAPI, ServerApi } from "@/app/types/nezha-api";
 import { MakeOptional } from "@/app/types/utils";
 import { NextResponse } from "next/server";
-import { DateTime } from "luxon";
 
 export async function GET(_: Request) {
-    if (!process.env.NezhaBaseUrl) {
+  if (!process.env.NezhaBaseUrl) {
-        return NextResponse.json({ error: 'NezhaBaseUrl is not set' }, { status: 400 })
+    return NextResponse.json(
-    }
+      { error: "NezhaBaseUrl is not set" },
+      { status: 400 },
+    );
+  }
 
-    // Remove trailing slash
+  // Remove trailing slash
-    var nezhaBaseUrl = process.env.NezhaBaseUrl;
+  var nezhaBaseUrl = process.env.NezhaBaseUrl;
 
-    if (process.env.NezhaBaseUrl[process.env.NezhaBaseUrl.length - 1] === '/') {
+  if (process.env.NezhaBaseUrl[process.env.NezhaBaseUrl.length - 1] === "/") {
-        nezhaBaseUrl = process.env.NezhaBaseUrl.slice(0, -1);
+    nezhaBaseUrl = process.env.NezhaBaseUrl.slice(0, -1);
-    }
+  }
 
-    try {
+  try {
-        const response = await fetch(nezhaBaseUrl+ '/api/v1/server/details',{
+    const response = await fetch(nezhaBaseUrl + "/api/v1/server/details", {
-            headers: {
+      headers: {
-                'Authorization': process.env.NezhaAuth as string
+        Authorization: process.env.NezhaAuth as string,
-            },
+      },
-            next:{
+      next: {
-                revalidate:1
+        revalidate: 0,
-            }
+      },
-        });
+    });
-        const nezhaData = (await response.json()).result as NezhaAPI[];
+    const nezhaData = (await response.json()).result as NezhaAPI[];
-        const data: ServerApi = {
+    const data: ServerApi = {
-            live_servers: 0,
+      live_servers: 0,
-            offline_servers: 0,
+      offline_servers: 0,
-            total_bandwidth: 0,
+      total_bandwidth: 0,
-            result: []
+      result: [],
+    };
+    const timestamp = Date.now() / 1000;
+    data.result = nezhaData.map(
+      (element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
+        if (timestamp - element.last_active > 300) {
+          data.offline_servers += 1;
+        } else {
+          data.live_servers += 1;
         }
+        data.total_bandwidth += element.status.NetOutTransfer;
 
-        data.result = nezhaData.map((element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
+        delete element.ipv4;
-            if (DateTime.now().toUnixInteger() - element.last_active > 300) {
+        delete element.ipv6;
-                data.offline_servers += 1;
+        delete element.valid_ip;
-            } else {
-                data.live_servers += 1;
-            }
-            data.total_bandwidth += element.status.NetOutTransfer;
 
-            delete element.ipv4;
+        return element;
-            delete element.ipv6;
+      },
-            delete element.valid_ip;
+    );
-
-            return element;
-        });
-
-        return NextResponse.json(data, { status: 200 })
-    } catch (error) {
-        return NextResponse.json({ error: error }, { status: 200 })
-    }
 
+    return NextResponse.json(data, { status: 200 });
+  } catch (error) {
+    return NextResponse.json({ error: error }, { status: 200 });
+  }
 }

app/types/utils.ts

@@ -1 +1,2 @@
-export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>>;

components/ServerCard.tsx

@@ -40,9 +40,11 @@ export default function ServerCard({
       <TooltipProvider delayDuration={0}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <section className={"flex lg:w-28 items-center justify-start gap-2"}>
+            <section
+              className={"flex items-center justify-start gap-2 lg:w-28"}
+            >
               <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
-              <p className="text-sm font-bold tracking-tight break-all">
+              <p className="break-all text-sm font-bold tracking-tight">
                 {name}
               </p>
             </section>
@@ -90,7 +92,9 @@ export default function ServerCard({
       <TooltipProvider delayDuration={0}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <section className={"flex lg:w-28 items-center justify-start gap-2"}>
+            <section
+              className={"flex items-center justify-start gap-2 lg:w-28"}
+            >
               <span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
               <p className="text-sm font-bold tracking-tight">{name}</p>
             </section>

components/ServerList.tsx

@@ -2,10 +2,6 @@ import React from "react";
 
 import ServerListClient from "@/app/(main)/ClientComponents/ServerListClient";
 
-
-
 export default async function ServerList() {
-  return (
+  return <ServerListClient />;
-    <ServerListClient />
-  );
 }

components/ServerOverview.tsx

@@ -1,12 +1,5 @@
 import ServerOverviewClient from "@/app/(main)/ClientComponents/ServerOverviewClient";
 
-
-
-
 export default async function ServerOverview() {
-    return (
+  return <ServerOverviewClient />;
-        <ServerOverviewClient />
-    )
-
-
 }

components/SubscribeCard.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-
-import { Loader } from "@/components/loading/Loader";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Progress } from "@/components/ui/progress";
-
-type SubscribeCardProps = {
-  provider: string;
-  behavior: string;
-  value: number;
-  nextBillDay?: number;
-  total: number;
-  unit: string;
-  colorClassName: string;
-  isLoading: boolean;
-};
-
-function SubscribeCard({
-  provider,
-  behavior,
-  value,
-  total,
-  unit,
-  nextBillDay,
-  colorClassName,
-  isLoading,
-}: SubscribeCardProps) {
-  return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-bold md:text-base">
-          {provider}
-        </CardTitle>
-        {nextBillDay !== -1 && (
-          <div className={"flex items-center gap-0.5"}>
-            <p className={"text-[10px] font-semibold opacity-50"}>
-              {nextBillDay}
-            </p>
-            <p className={"text-[10px] font-bold"}>|</p>
-          </div>
-        )}
-      </CardHeader>
-      <CardContent>
-        <div className={"flex items-center gap-0.5"}>
-          <p className="text-[12px] text-muted-foreground">{behavior}</p>
-          <Loader visible={isLoading} />
-        </div>
-
-        <div className={"flex items-baseline gap-1"}>
-          <p className={"mb-4 text-3xl font-semibold"}>{value}</p>
-          <p className={"mb-4 text-sm font-light text-muted-foreground"}>
-            {unit}
-          </p>
-        </div>
-        <Progress
-          aria-label={`Used ${unit}`}
-          aria-labelledby={`${value} Used ${unit}`}
-          value={(value / total) * 100}
-          indicatorClassName={colorClassName}
-          className={"h-[3px] rounded-sm"}
-        />
-      </CardContent>
-    </Card>
-  );
-}
-
-export default SubscribeCard;

lib/prefetch.tsx

@@ -0,0 +1,54 @@
+import { NezhaAPI, ServerApi } from "@/app/types/nezha-api";
+import { MakeOptional } from "@/app/types/utils";
+import { error } from "console";
+
+export async function GetNezhaData() {
+    if (!process.env.NezhaBaseUrl) {
+        error("NezhaBaseUrl is not set");
+        return;
+    }
+    // Remove trailing slash
+    var nezhaBaseUrl = process.env.NezhaBaseUrl;
+
+    if (process.env.NezhaBaseUrl[process.env.NezhaBaseUrl.length - 1] === "/") {
+        nezhaBaseUrl = process.env.NezhaBaseUrl.slice(0, -1);
+    }
+    try {
+        const response = await fetch(nezhaBaseUrl + "/api/v1/server/details", {
+            headers: {
+                Authorization: process.env.NezhaAuth as string,
+            },
+            next: {
+                revalidate: 1,
+            },
+        });
+        const nezhaData = (await response.json()).result as NezhaAPI[];
+        const data: ServerApi = {
+            live_servers: 0,
+            offline_servers: 0,
+            total_bandwidth: 0,
+            result: [],
+        };
+        const timestamp = Date.now() / 1000;
+        data.result = nezhaData.map(
+            (element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
+                if (timestamp - element.last_active > 300) {
+                    data.offline_servers += 1;
+                } else {
+                    data.live_servers += 1;
+                }
+                data.total_bandwidth += element.status.NetOutTransfer;
+
+                delete element.ipv4;
+                delete element.ipv6;
+                delete element.valid_ip;
+
+                return element;
+            },
+        );
+
+        return data;
+    } catch (error) {
+        return error;
+    }
+}

lib/utils.ts

@@ -6,15 +6,25 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function formatBytes(bytes: number, decimals: number = 2) {
-  if (!+bytes) return '0 Bytes'
+  if (!+bytes) return "0 Bytes";
 
-  const k = 1024
+  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals
+  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+  const sizes = [
+    "Bytes",
+    "KiB",
+    "MiB",
+    "GiB",
+    "TiB",
+    "PiB",
+    "EiB",
+    "ZiB",
+    "YiB",
+  ];
 
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
 export function getDaysBetweenDates(date1: string, date2: string): number {
@@ -43,16 +53,15 @@ export const fetcher = (url: string) =>
     });
 
 export const nezhaFetcher = (url: string) =>
-      fetch(url)
+  fetch(url)
-        .then((res) => {
+    .then((res) => {
-          if (!res.ok) {
+      if (!res.ok) {
-            throw new Error(res.statusText);
+        throw new Error(res.statusText);
-          }
+      }
-          return res.json();
+      return res.json();
-        })
+    })
-        .then((data) => data)
+    .then((data) => data)
-        .catch((err) => {
+    .catch((err) => {
-          console.error(err);
+      console.error(err);
-          throw err;
+      throw err;
-        });
+    });
-    

next.config.mjs

@@ -18,6 +18,9 @@ const withPWA = withPWAInit({
 });
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  output: "standalone",
+  reactStrictMode: true,
+};
 
 export default bundleAnalyzer(withPWA(nextConfig));

package.json

@@ -4,9 +4,9 @@
   "private": true,
   "scripts": {
     "dev": "next dev -p 3020",
-    "build": "next build",
+    "start": "node .next/standalone/server.js",
-    "start": "next start",
+    "lint": "next lint",
-    "lint": "next lint"
+    "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/"
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.2.6",
@@ -33,7 +33,7 @@
     "react-wrap-balancer": "^1.1.0",
     "sharp": "^0.33.3",
     "sonner": "^1.4.41",
-    "swr": "^2.2.6-beta.3",
+    "swr": "^2.2.6-beta.4",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"