fix: cloudflare error

app/[locale]/(main)/header.tsx

@@ -20,7 +20,6 @@ function Header() {
   const router = useRouter();
   const locale = useLocale();
 
-
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
@@ -63,7 +62,7 @@ function Header() {
 
 // https://github.com/streamich/react-use/blob/master/src/useInterval.ts
 const useInterval = (callback: Function, delay?: number | null) => {
-  const savedCallback = useRef<Function>(() => { });
+  const savedCallback = useRef<Function>(() => {});
   useEffect(() => {
     savedCallback.current = callback;
   });

app/[locale]/(main)/layout.tsx

@@ -3,14 +3,22 @@ import Header from "@/app/[locale]/(main)/header";
 import { auth } from "@/auth";
 import { SignIn } from "@/components/sign-in";
 import getEnv from "@/lib/env-entry";
+import { redirect } from "next/navigation";
 import React from "react";
 
 type DashboardProps = {
   children: React.ReactNode;
 };
 export default async function MainLayout({ children }: DashboardProps) {
-  const session = await auth()
+  const session = await auth();
-  if (!session && getEnv("SITE_PASSWORD")) return <SignIn />
+
+  if (!session && getEnv("SITE_PASSWORD")) {
+    if (getEnv("CF_PAGES")) {
+      redirect("/api/auth/signin");
+    } else {
+      return <SignIn />;
+    }
+  }
 
   return (
     <div className="flex min-h-screen w-full flex-col">

app/[locale]/layout.tsx

@@ -1,4 +1,5 @@
 // @auto-i18n-check. Please do not delete the line.
+import { auth } from "@/auth";
 import { locales } from "@/i18n-metadata";
 import getEnv from "@/lib/env-entry";
 import { cn } from "@/lib/utils";
@@ -13,7 +14,6 @@ import { Inter as FontSans } from "next/font/google";
 import React from "react";
 
 import "/node_modules/flag-icons/css/flag-icons.min.css";
-import { auth } from "@/auth";
 
 const fontSans = FontSans({
   subsets: ["latin"],

app/api/auth/[...nextauth]/route.ts

@@ -1,2 +1,4 @@
-import { handlers } from "@/auth" // Referring to the auth.ts we just created
+import { handlers } from "@/auth";
-export const { GET, POST } = handlers
+
+// Referring to the auth.ts we just created
+export const { GET, POST } = handlers;

app/api/detail/route.ts

@@ -1,8 +1,8 @@
 import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { auth } from "@/auth";
+import getEnv from "@/lib/env-entry";
 import { GetServerDetail } from "@/lib/serverFetch";
 import { NextResponse } from "next/server";
-import { auth } from "@/auth"
-import getEnv from "@/lib/env-entry";
 
 export const dynamic = "force-dynamic";
 
@@ -12,7 +12,6 @@ interface NezhaDataResponse {
 }
 
 export const GET = auth(async function GET(req) {
-  
   if (!req.auth && getEnv("SITE_PASSWORD")) {
     return NextResponse.json({ message: "Not authenticated" }, { status: 401 });
   }

app/api/monitor/route.ts

@@ -12,7 +12,6 @@ interface NezhaDataResponse {
 }
 
 export const GET = auth(async function GET(req) {
-  
   if (!req.auth && getEnv("SITE_PASSWORD")) {
     return NextResponse.json({ message: "Not authenticated" }, { status: 401 });
   }

app/api/server/route.ts

@@ -12,7 +12,6 @@ interface NezhaDataResponse {
 }
 
 export const GET = auth(async function GET(req) {
-  
   if (!req.auth && getEnv("SITE_PASSWORD")) {
     return NextResponse.json({ message: "Not authenticated" }, { status: 401 });
   }

auth.ts

@@ -1,9 +1,10 @@
-import NextAuth from "next-auth"
+import NextAuth from "next-auth";
-import Credentials from "next-auth/providers/credentials"
+import Credentials from "next-auth/providers/credentials";
-import getEnv from "./lib/env-entry"
+
+import getEnv from "./lib/env-entry";
 
 export const { handlers, signIn, signOut, auth } = NextAuth({
-  secret:"this_is_nezha_dash_web_secret",
+  secret: "this_is_nezha_dash_web_secret",
   providers: [
     Credentials({
       credentials: {
@@ -11,10 +12,10 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
       },
       authorize: async (credentials) => {
         if (credentials.password === getEnv("SITE_PASSWORD")) {
-          return { id: "0" }
+          return { id: "0" };
         }
-        return null
+        return null;
       },
     }),
   ],
-})
+});

components/sign-in.tsx

@@ -1,40 +1,45 @@
-import Footer from "@/app/[locale]/(main)/footer"
+import Footer from "@/app/[locale]/(main)/footer";
-import Header from "@/app/[locale]/(main)/header"
+import Header from "@/app/[locale]/(main)/header";
-import { signIn } from "@/auth"
+import { signIn } from "@/auth";
-import { useLocale } from "next-intl"
+import { useLocale } from "next-intl";
-import { redirect } from "next/navigation"
+import { redirect } from "next/navigation";
 
 export function SignIn() {
-    const locale = useLocale()
+  const locale = useLocale();
 
-
+  async function handleSubmit(formData: FormData) {
-    async function handleSubmit(formData: FormData) {
+    "use server";
-        'use server'
+    try {
-        try {
+      await signIn("credentials", formData);
-            await signIn("credentials", formData)
+    } catch (error) {
-        } catch (error) {
+      redirect(`/${locale}`);
-            redirect(`/${locale}`)
-        }
     }
+  }
 
-    return (
+  return (
-        <div className="flex min-h-screen w-full flex-col">
+    <div className="flex min-h-screen w-full flex-col">
-            <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:p-10 md:pt-8">
+      <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:p-10 md:pt-8">
-                <Header />
+        <Header />
-                <form
+        <form
-                    className="flex flex-col items-center justify-start gap-4 p-4 "
+          className="flex flex-col items-center justify-start gap-4 p-4 "
-                    action={handleSubmit}
+          action={handleSubmit}
-                >
+        >
-                    <section className="flex flex-col items-start gap-2">
+          <section className="flex flex-col items-start gap-2">
-                        <label className="flex flex-col items-start gap-1 ">
+            <label className="flex flex-col items-start gap-1 ">
-                            <p className="text-base font-semibold">请输入页面密码</p>
+              <p className="text-base font-semibold">请输入页面密码</p>
-                            <input className="px-1 border-[1px] rounded-[5px]" name="password" type="password" />
+              <input
-                        </label>
+                className="px-1 border-[1px] rounded-[5px]"
-                        <button className=" px-1.5 py-0.5 w-fit text-sm font-semibold rounded-[8px] border bg-card hover:brightness-95 transition-all text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none">确认</button>
+                name="password"
-                    </section>
+                type="password"
-                </form>
+              />
-                <Footer />
+            </label>
-            </main>
+            <button className=" px-1.5 py-0.5 w-fit text-sm font-semibold rounded-[8px] border bg-card hover:brightness-95 transition-all text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none">
-        </div>
+              确认
-    )
+            </button>
+          </section>
+        </form>
+        <Footer />
+      </main>
+    </div>
+  );
 }

next.config.mjs

@@ -25,7 +25,7 @@ const nextConfig = {
   reactStrictMode: true,
   experimental: {
     serverActions: {
-      allowedOrigins: ['*'],
+      allowedOrigins: ["*"],
     },
   },
   logging: {