Merge pull request #92 from hamster1963/router-perf

perf: use Link prefetch

app/(main)/ClientComponents/NetworkChart.tsx

@@ -1,10 +1,7 @@
 "use client";
 
-import NetworkChartLoading from "@/app/[locale]/(main)/ClientComponents/NetworkChartLoading";
-import {
-  NezhaAPIMonitor,
-  ServerMonitorChart,
-} from "@/app/[locale]/types/nezha-api";
+import NetworkChartLoading from "@/app/(main)/ClientComponents/NetworkChartLoading";
+import { NezhaAPIMonitor, ServerMonitorChart } from "@/app/types/nezha-api";
 import { BackIcon } from "@/components/Icon";
 import {
   Card,
@@ -108,8 +105,6 @@ export const NetworkChart = React.memo(function NetworkChart({
   formattedData: ResultItem[];
 }) {
   const t = useTranslations("NetworkChart");
-  const router = useRouter();
-  const locale = useLocale();
 
   const defaultChart = "All";
 

app/(main)/ClientComponents/NetworkChartLoading.tsx

@@ -1,13 +1,7 @@
-import { BackIcon } from "@/components/Icon";
 import { Loader } from "@/components/loading/Loader";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { useLocale } from "next-intl";
-import { useRouter } from "next/navigation";
 
 export default function NetworkChartLoading() {
-  const router = useRouter();
-  const locale = useLocale();
-
   return (
     <Card>
       <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">

app/(main)/ClientComponents/ServerDetailChartClient.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ServerDetailChartLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
-import { NezhaAPISafe, ServerApi } from "@/app/[locale]/types/nezha-api";
+import { ServerDetailChartLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading";
+import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api";
 import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
 import { Card, CardContent } from "@/components/ui/card";
 import { ChartConfig, ChartContainer } from "@/components/ui/chart";

app/(main)/ClientComponents/ServerDetailClient.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ServerDetailLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
-import { NezhaAPISafe, ServerApi } from "@/app/[locale]/types/nezha-api";
+import { ServerDetailLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading";
+import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api";
 import { BackIcon } from "@/components/Icon";
 import ServerFlag from "@/components/ServerFlag";
 import { Badge } from "@/components/ui/badge";
@@ -21,7 +21,6 @@ export default function ServerDetailClient({
 }) {
   const t = useTranslations("ServerDetailClient");
   const router = useRouter();
-  const locale = useLocale();
 
   const [hasHistory, setHasHistory] = useState(false);
 
@@ -43,7 +42,7 @@ export default function ServerDetailClient({
     if (hasHistory) {
       router.back();
     } else {
-      router.push(`/${locale}/`);
+      router.push(`/`);
     }
   };
 
@@ -52,6 +51,7 @@ export default function ServerDetailClient({
     nezhaFetcher,
   );
   const fallbackData = allFallbackData?.result?.find(
+    // @ts-ignore
     (item) => item.id === server_id,
   );
 

app/(main)/ClientComponents/ServerDetailLoading.tsx

@@ -20,13 +20,12 @@ export function ServerDetailChartLoading() {
 
 export function ServerDetailLoading() {
   const router = useRouter();
-  const locale = useLocale();
 
   return (
     <>
       <div
         onClick={() => {
-          router.push(`/${locale}/`);
+          router.push(`/`);
         }}
         className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
       >

app/(main)/ClientComponents/ServerListClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ServerApi } from "@/app/[locale]/types/nezha-api";
+import { ServerApi } from "@/app/types/nezha-api";
 import ServerCard from "@/components/ServerCard";
 import Switch from "@/components/Switch";
 import getEnv from "@/lib/env-entry";
@@ -12,7 +12,7 @@ import useSWR from "swr";
 export default function ServerListClient() {
   const t = useTranslations("ServerListClient");
   const containerRef = useRef<HTMLDivElement>(null);
-  const defaultTag = t("defaultTag");
+  const defaultTag = "defaultTag";
 
   const [tag, setTag] = useState<string>(defaultTag);
 

app/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ServerApi } from "@/app/[locale]/types/nezha-api";
+import { ServerApi } from "@/app/types/nezha-api";
 import { Loader } from "@/components/loading/Loader";
 import { Card, CardContent } from "@/components/ui/card";
 import getEnv from "@/lib/env-entry";

app/(main)/[id]/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { NetworkChartClient } from "@/app/[locale]/(main)/ClientComponents/NetworkChart";
-import ServerDetailChartClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailChartClient";
-import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
+import { NetworkChartClient } from "@/app/(main)/ClientComponents/NetworkChart";
+import ServerDetailChartClient from "@/app/(main)/ClientComponents/ServerDetailChartClient";
+import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient";
 import TabSwitch from "@/components/TabSwitch";
 import { Separator } from "@/components/ui/separator";
 import { useTranslations } from "next-intl";

app/(main)/header.tsx

@@ -19,7 +19,6 @@ function Header() {
   const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
 
   const router = useRouter();
-  const locale = useLocale();
 
   return (
     <div className="mx-auto w-full max-w-5xl">
@@ -27,7 +26,7 @@ function Header() {
         <section
           onClick={() => {
             sessionStorage.removeItem("selectedTag");
-            router.push(`/${locale}/`);
+            router.push(`/`);
           }}
           className="flex cursor-pointer items-center text-base font-medium"
         >

app/(main)/layout.tsx

@@ -1,5 +1,5 @@
-import Footer from "@/app/[locale]/(main)/footer";
-import Header from "@/app/[locale]/(main)/header";
+import Footer from "@/app/(main)/footer";
+import Header from "@/app/(main)/header";
 import { auth } from "@/auth";
 import { SignIn } from "@/components/SignIn";
 import getEnv from "@/lib/env-entry";

app/api/detail/route.ts

@@ -1,4 +1,3 @@
-import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
 import { auth } from "@/auth";
 import getEnv from "@/lib/env-entry";
 import { GetServerDetail } from "@/lib/serverFetch";

app/layout.tsx

@@ -1,12 +1,11 @@
 // @auto-i18n-check. Please do not delete the line.
-import { locales } from "@/i18n-metadata";
 import getEnv from "@/lib/env-entry";
 import { cn } from "@/lib/utils";
 import "@/styles/globals.css";
 import type { Metadata } from "next";
 import { Viewport } from "next";
-import { NextIntlClientProvider, useMessages } from "next-intl";
-import { unstable_setRequestLocale } from "next-intl/server";
+import { NextIntlClientProvider } from "next-intl";
+import { getLocale, getMessages } from "next-intl/server";
 import { PublicEnvScript } from "next-runtime-env";
 import { ThemeProvider } from "next-themes";
 import { Inter as FontSans } from "next/font/google";
@@ -38,20 +37,13 @@ export const viewport: Viewport = {
   userScalable: false,
 };
 
-export async function generateStaticParams() {
-  return locales.map((locale) => ({ locale }));
-}
-
-export default function LocaleLayout({
+export default async function LocaleLayout({
   children,
-  params: { locale },
 }: {
   children: React.ReactNode;
-  params: { locale: string };
 }) {
-  unstable_setRequestLocale(locale);
-
-  const messages = useMessages();
+  const locale = await getLocale();
+  const messages = await getMessages();
 
   return (
     <html lang={locale} suppressHydrationWarning>
@@ -74,7 +66,7 @@ export default function LocaleLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <NextIntlClientProvider locale={locale} messages={messages}>
+          <NextIntlClientProvider messages={messages}>
             {children}
           </NextIntlClientProvider>
         </ThemeProvider>

auto-i18n-config.json

@@ -1,10 +0,0 @@
-{
-  "defaultLang": "en",
-  "translatorServerName": "azure",
-  "needLangs": ["en", "zh", "zh-t", "ja"],
-  "brandWords": [],
-  "unMoveToLocaleDirFiles": [],
-  "enableStaticRendering": false,
-  "enableSubPageRedirectToLocale": false,
-  "disableDefaultLangRedirect": true
-}

components/LanguageSwitcher.tsx

@@ -7,45 +7,18 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { localeItems } from "@/i18n-metadata";
+import { setUserLocale } from "@/i18n/locale";
 import { useLocale } from "next-intl";
-import { usePathname, useRouter } from "next/navigation";
 import * as React from "react";
 
-import { localeItems } from "../i18n-metadata";
-
 export function LanguageSwitcher() {
   const locale = useLocale();
-  const router = useRouter();
-  const pathname = usePathname();
 
-  const handleChange = (code: string) => {
-    const newLocale = code;
-
-    const rootPath = "/";
-    const currentLocalePath = `/${locale}`;
-    const newLocalePath = `/${newLocale}`;
-
-    // Function to construct new path with locale prefix
-    const constructLocalePath = (path: string, newLocale: string) => {
-      if (path.startsWith(currentLocalePath)) {
-        return path.replace(currentLocalePath, `/${newLocale}`);
-      } else {
-        return `/${newLocale}${path}`;
-      }
-    };
-
-    if (pathname === rootPath || !pathname) {
-      router.push(newLocalePath);
-    } else if (
-      pathname === currentLocalePath ||
-      pathname === `${currentLocalePath}/`
-    ) {
-      router.push(newLocalePath);
-    } else {
-      const newPath = constructLocalePath(pathname, newLocale);
-      router.push(newPath);
-    }
-  };
+  function onChange(value: string) {
+    const locale = value;
+    setUserLocale(locale);
+  }
 
   return (
     <DropdownMenu>
@@ -57,10 +30,7 @@ export function LanguageSwitcher() {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         {localeItems.map((item) => (
-          <DropdownMenuItem
-            key={item.code}
-            onClick={() => handleChange(item.code)}
-          >
+          <DropdownMenuItem key={item.code} onClick={() => onChange(item.code)}>
             {item.name}
           </DropdownMenuItem>
         ))}

components/ServerCard.tsx

@@ -1,5 +1,4 @@
-import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
-import ServerCardPopover from "@/components/ServerCardPopover";
+import { NezhaAPISafe } from "@/app/types/nezha-api";
 import ServerFlag from "@/components/ServerFlag";
 import ServerUsageBar from "@/components/ServerUsageBar";
 import { Badge } from "@/components/ui/badge";
@@ -12,6 +11,7 @@ import {
 import getEnv from "@/lib/env-entry";
 import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
 import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 
 export default function ServerCard({
@@ -28,98 +28,95 @@ export default function ServerCard({
 
   const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true";
 
-  const locale = useLocale();
-
   return online ? (
-    <Card
-      className={
-        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer"
-      }
-      onClick={() => {
-        router.push(`/${locale}/${id}`);
-      }}
-    >
-      <section
-        className="grid items-center gap-2 lg:w-28 "
-        style={{ gridTemplateColumns: "auto auto 1fr" }}
+    <Link href={`/${id}`} prefetch={true}>
+      <Card
+        className={
+          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer"
+        }
       >
-        <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
-        <div
-          className={cn(
-            "flex items-center justify-center",
-            showFlag ? "min-w-[17px]" : "min-w-0",
-          )}
+        <section
+          className="grid items-center gap-2 lg:w-28 "
+          style={{ gridTemplateColumns: "auto auto 1fr" }}
         >
-          {showFlag ? <ServerFlag country_code={country_code} /> : null}
-        </div>
-        <p
-          className={cn(
-            "break-all font-bold tracking-tight",
-            showFlag ? "text-xs" : "text-sm",
-          )}
-        >
-          {name}
-        </p>
-      </section>
-      <div className="flex flex-col gap-2">
-        <section className={"grid  grid-cols-5 items-center gap-3"}>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("CPU")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {cpu.toFixed(2)}%
-            </div>
-            <ServerUsageBar value={cpu} />
-          </div>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("Mem")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {mem.toFixed(2)}%
-            </div>
-            <ServerUsageBar value={mem} />
-          </div>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("STG")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {stg.toFixed(2)}%
-            </div>
-            <ServerUsageBar value={stg} />
-          </div>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("Upload")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {up.toFixed(2)}M/s
-            </div>
-          </div>
-          <div className={"flex w-14 flex-col"}>
-            <p className="text-xs text-muted-foreground">{t("Download")}</p>
-            <div className="flex items-center text-xs font-semibold">
-              {down.toFixed(2)}M/s
-            </div>
-          </div>
-        </section>
-        {showNetTransfer && (
-          <section
-            onClick={() => {
-              router.push(`/${locale}/network/${id}`);
-            }}
-            className={"flex items-center justify-between gap-1"}
+          <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
+          <div
+            className={cn(
+              "flex items-center justify-center",
+              showFlag ? "min-w-[17px]" : "min-w-0",
+            )}
           >
-            <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"
-            >
-              {t("Upload")}:{formatBytes(serverInfo.status.NetOutTransfer)}
-            </Badge>
-            <Badge
-              variant="outline"
-              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
-            >
-              {t("Download")}:{formatBytes(serverInfo.status.NetInTransfer)}
-            </Badge>
+            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+          </div>
+          <p
+            className={cn(
+              "break-all font-bold tracking-tight",
+              showFlag ? "text-xs" : "text-sm",
+            )}
+          >
+            {name}
+          </p>
+        </section>
+        <div className="flex flex-col gap-2">
+          <section className={"grid  grid-cols-5 items-center gap-3"}>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("CPU")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {cpu.toFixed(2)}%
+              </div>
+              <ServerUsageBar value={cpu} />
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("Mem")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {mem.toFixed(2)}%
+              </div>
+              <ServerUsageBar value={mem} />
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("STG")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {stg.toFixed(2)}%
+              </div>
+              <ServerUsageBar value={stg} />
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("Upload")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {up.toFixed(2)}M/s
+              </div>
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("Download")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {down.toFixed(2)}M/s
+              </div>
+            </div>
           </section>
-        )}
-      </div>
-    </Card>
+          {showNetTransfer && (
+            <section
+              onClick={() => {
+                router.push(`/${id}`);
+              }}
+              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"
+              >
+                {t("Upload")}:{formatBytes(serverInfo.status.NetOutTransfer)}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
+              >
+                {t("Download")}:{formatBytes(serverInfo.status.NetInTransfer)}
+              </Badge>
+            </section>
+          )}
+        </div>
+      </Card>
+    </Link>
   ) : (
     <Card
       className={cn(

components/ServerCardPopover.tsx

@@ -1,4 +1,4 @@
-import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { NezhaAPISafe } from "@/app/types/nezha-api";
 import { cn, formatBytes } from "@/lib/utils";
 import { useTranslations } from "next-intl";
 

components/ServerList.tsx

@@ -1,4 +1,4 @@
-import ServerListClient from "@/app/[locale]/(main)/ClientComponents/ServerListClient";
+import ServerListClient from "@/app/(main)/ClientComponents/ServerListClient";
 import React from "react";
 
 export default async function ServerList() {

components/ServerOverview.tsx

@@ -1,4 +1,4 @@
-import ServerOverviewClient from "@/app/[locale]/(main)/ClientComponents/ServerOverviewClient";
+import ServerOverviewClient from "@/app/(main)/ClientComponents/ServerOverviewClient";
 
 export default async function ServerOverview() {
   return <ServerOverviewClient />;

components/Switch.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { motion } from "framer-motion";
+import { useTranslations } from "next-intl";
 import React, { createRef, useEffect, useRef, useState } from "react";
 
 export default function Switch({
@@ -15,6 +16,7 @@ export default function Switch({
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()));
+  const t = useTranslations("ServerListClient");
 
   useEffect(() => {
     const savedTag = sessionStorage.getItem("selectedTag");
@@ -82,7 +84,9 @@ export default function Switch({
               />
             )}
             <div className="relative z-20 flex items-center gap-1">
-              <p className="whitespace-nowrap">{tag}</p>
+              <p className="whitespace-nowrap">
+                {tag === "defaultTag" ? t("defaultTag") : tag}
+              </p>
             </div>
           </div>
         ))}

i18n.ts

@@ -1,14 +0,0 @@
-// @auto-i18n-check. Please do not delete the line.
-import { getRequestConfig } from "next-intl/server";
-import { notFound } from "next/navigation";
-
-import { locales } from "./i18n-metadata";
-
-export default getRequestConfig(async ({ locale }) => {
-  // Validate that the incoming `locale` parameter is valid
-  if (!locales.includes(locale as any)) notFound();
-
-  return {
-    messages: (await import(`./messages/${locale}.json`)).default,
-  };
-});

i18n/locale.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import getEnv from "@/lib/env-entry";
+import { cookies } from "next/headers";
+
+const COOKIE_NAME = "NEXT_LOCALE";
+
+export async function getUserLocale() {
+  return cookies().get(COOKIE_NAME)?.value || (getEnv("DefaultLocale") ?? "en");
+}
+
+export async function setUserLocale(locale: string) {
+  cookies().set(COOKIE_NAME, locale);
+}

i18n/request.ts

@@ -0,0 +1,11 @@
+import { getUserLocale } from "@/i18n/locale";
+import { getRequestConfig } from "next-intl/server";
+
+export default getRequestConfig(async () => {
+  const locale = await getUserLocale();
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});

lib/serverFetch.tsx

@@ -1,7 +1,7 @@
 "use server";
 
-import { NezhaAPI, ServerApi } from "@/app/[locale]/types/nezha-api";
-import { MakeOptional } from "@/app/[locale]/types/utils";
+import { NezhaAPI, ServerApi } from "@/app/types/nezha-api";
+import { MakeOptional } from "@/app/types/utils";
 import getEnv from "@/lib/env-entry";
 import { unstable_noStore as noStore } from "next/cache";
 

lib/utils.ts

@@ -1,4 +1,4 @@
-import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { NezhaAPISafe } from "@/app/types/nezha-api";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 

middleware.ts

@@ -1,23 +0,0 @@
-// @auto-i18n-check. Please do not delete the line.
-import createMiddleware from "next-intl/middleware";
-
-import { defaultLocale, locales } from "./i18n-metadata";
-
-// export { auth as middleware } from "@/auth"
-
-export default createMiddleware({
-  // A list of all locales that are supported
-  locales: locales,
-
-  // Used when no locale matches
-  defaultLocale: defaultLocale,
-
-  // 'always': This is the default, The home page will also be redirected to the default language, such as www.abc.com to www.abc.com/en
-  // 'as-needed': The default page is not redirected. For example, if you open www.abc.com, it is still www.abc.com
-  localePrefix: "always",
-});
-
-export const config = {
-  // Match only internationalized pathnames
-  matcher: ["/", "/(en|zh|zh-t|ja)/:path*"],
-};