This commit is contained in:
hailin 2025-06-25 17:04:05 +08:00
parent 5c6ef8366b
commit 072dce8517
2 changed files with 50 additions and 17 deletions

View File

@ -141,6 +141,7 @@ export default async function RootLayout({
src="/env.js" src="/env.js"
strategy="beforeInteractive" // 确保在 React 启动之前加载 strategy="beforeInteractive" // 确保在 React 启动之前加载
/> */} /> */}
<RuntimeEnvProvider /> {/* ✅ 注入 window.RUNTIME_ENV.SUPABASE_URL */}
</head> </head>
<body className={inter.className}> <body className={inter.className}>

View File

@ -50,43 +50,75 @@
// app/_runtime-env-provider.tsx (务必保持在 app 目录 ➜ Server 组件) // app/_runtime-env-provider.tsx (务必保持在 app 目录 ➜ Server 组件)
// import { headers } from "next/headers"
// import { useServerInsertedHTML } from "next/navigation"
// import React from "react"
// export function RuntimeEnvProvider({ children }: { children: React.ReactNode }) {
// /* 解析请求头 */
// const h = headers()
// console.log("[RuntimeEnv] Raw headers:", Object.fromEntries(h.entries()))
// const proto =
// h.get("x-forwarded-proto") ??
// (h.get("host")?.includes(":443") ? "https" : "http")
// console.log("[RuntimeEnv] Resolved protocol:", proto)
// const rawHost = h.get("x-forwarded-host") ?? h.get("host")!
// console.log("[RuntimeEnv] rawHost :", rawHost)
// const hostname = rawHost.split(",")[0].split(":")[0].trim()
// console.log("[RuntimeEnv] hostname :", hostname)
// const supabaseUrl = `${proto}://${hostname}:8000`
// console.log("[RuntimeEnv] supabaseUrl to inject:", supabaseUrl)
// /* 把脚本塞进 HTML这一行如果不打印说明没执行 */
// useServerInsertedHTML(() => {
// console.log("[RuntimeEnv] <script> tag inserted into HTML")
// return (
// <script
// id="runtime-env" /* 方便 View-Source 检查 */
// dangerouslySetInnerHTML={{
// __html: `window.RUNTIME_ENV = { SUPABASE_URL: ${JSON.stringify(
// supabaseUrl,
// )} }; console.log('[Client] window.RUNTIME_ENV =', window.RUNTIME_ENV);`,
// }}
// />
// )
// })
// return <>{children}</>
// }
// components/utility/runtime-env-provider.tsx
import { headers } from "next/headers" import { headers } from "next/headers"
import { useServerInsertedHTML } from "next/navigation" import { useServerInsertedHTML } from "next/navigation"
import React from "react" import React from "react"
export function RuntimeEnvProvider({ children }: { children: React.ReactNode }) { export function RuntimeEnvProvider() {
/* 解析请求头 */
const h = headers() const h = headers()
console.log("[RuntimeEnv] Raw headers:", Object.fromEntries(h.entries()))
const proto = const proto =
h.get("x-forwarded-proto") ?? h.get("x-forwarded-proto") ?? (h.get("host")?.includes(":443") ? "https" : "http")
(h.get("host")?.includes(":443") ? "https" : "http")
console.log("[RuntimeEnv] Resolved protocol:", proto)
const rawHost = h.get("x-forwarded-host") ?? h.get("host")! const rawHost = h.get("x-forwarded-host") ?? h.get("host")!
console.log("[RuntimeEnv] rawHost :", rawHost)
const hostname = rawHost.split(",")[0].split(":")[0].trim() const hostname = rawHost.split(",")[0].split(":")[0].trim()
console.log("[RuntimeEnv] hostname :", hostname)
const supabaseUrl = `${proto}://${hostname}:8000` const supabaseUrl = `${proto}://${hostname}:8000`
console.log("[RuntimeEnv] supabaseUrl to inject:", supabaseUrl)
/* 把脚本塞进 HTML这一行如果不打印说明没执行 */
useServerInsertedHTML(() => { useServerInsertedHTML(() => {
console.log("[RuntimeEnv] <script> tag inserted into HTML")
return ( return (
<script <script
id="runtime-env" /* 方便 View-Source 检查 */ id="runtime-env"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: `window.RUNTIME_ENV = { SUPABASE_URL: ${JSON.stringify( __html: `window.RUNTIME_ENV = { SUPABASE_URL: ${JSON.stringify(
supabaseUrl, supabaseUrl
)} }; console.log('[Client] window.RUNTIME_ENV =', window.RUNTIME_ENV);`, )} };`,
}} }}
/> />
) )
}) })
return <>{children}</> return null
} }