diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a448f52..abf3d25 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,11 +4,13 @@ import { Inter } from 'next/font/google'; import './globals.css'; import AuthProvider from '../components/AuthProvider'; +import { SiteNameProvider } from '../components/SiteNameContext'; import { ThemeProvider } from '../components/ThemeProvider'; const inter = Inter({ subsets: ['latin'] }); export const dynamic = 'force-dynamic'; +export const runtime = 'edge'; export function generateMetadata(): Metadata { return { @@ -31,19 +33,24 @@ export default function RootLayout({ }: { children: React.ReactNode; }) { + const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'MoonTV'; + return ( - - {children} - + + + {children} + + ); diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 06f6f96..d7a0b27 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -3,6 +3,7 @@ import { useRouter, useSearchParams } from 'next/navigation'; import { Suspense, useState } from 'react'; +import { useSiteName } from '@/components/SiteNameContext'; import { ThemeToggle } from '@/components/ThemeToggle'; export const dynamic = 'force-dynamic'; @@ -90,7 +91,7 @@ function LoginPageClient({ siteName }: { siteName: string }) { } export default function LoginPage() { - const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'MoonTV'; + const siteName = useSiteName(); return ( diff --git a/src/components/MobileHeader.tsx b/src/components/MobileHeader.tsx index e55b3fa..84309d8 100644 --- a/src/components/MobileHeader.tsx +++ b/src/components/MobileHeader.tsx @@ -2,12 +2,13 @@ import Link from 'next/link'; +import { useSiteName } from './SiteNameContext'; import { ThemeToggle } from './ThemeToggle'; export const dynamic = 'force-dynamic'; const MobileHeader = () => { - const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'MoonTV'; + const siteName = useSiteName(); return (
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 1ba72d5..436498a 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,3 +1,5 @@ +'use client'; + import { Clover, Film, @@ -22,6 +24,8 @@ import { useState, } from 'react'; +import { useSiteName } from './SiteNameContext'; + interface SidebarContextType { isCollapsed: boolean; } @@ -164,7 +168,7 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => { { icon: VenetianMask, label: '日漫', href: '/douban?type=tv&tag=日本动画' }, ]; - const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'MoonTV'; + const siteName = useSiteName(); return ( diff --git a/src/components/SiteNameContext.tsx b/src/components/SiteNameContext.tsx new file mode 100644 index 0000000..9a763a1 --- /dev/null +++ b/src/components/SiteNameContext.tsx @@ -0,0 +1,22 @@ +import React, { createContext, useContext } from 'react'; + +/** + * 站点名称上下文，默认值为 "MoonTV"。 + * 不包含 "use client"，以便既能被 Server Component 引用，也能被 Client Component 引用。 + */ +export const SiteNameContext = createContext('MoonTV'); + +interface ProviderProps { + value: string; + children: React.ReactNode; +} + +export function SiteNameProvider({ value, children }: ProviderProps) { + return ( + + {children} + + ); +} + +export const useSiteName = () => useContext(SiteNameContext);