Next.js中如何在_app.tsx内安全访问window对象（Auth0集成）

你的问题核心是Next.js的服务端渲染（SSR）机制导致的：_app.tsx在服务端执行时，window对象还不存在，直接调用依赖window的函数就会报错。下面是几种可行的解决方案：

方案一：用React useEffect动态设置redirectUri #

useEffect仅在客户端渲染阶段执行，能安全访问window对象。修改你的_app.tsx：

import { useState, useEffect } from 'react';
import { Auth0Provider } from '@auth0/auth0-react';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  const [redirectUri, setRedirectUri] = useState('');

  useEffect(() => {
    const baseUrl = new URL(window.location.origin);
    baseUrl.pathname = process.env.AUTH0_PATH ?? '';
    setRedirectUri(baseUrl.toString());
  }, []);

  // 避免初始空值导致Auth0Provider报错，可临时返回加载组件或null
  if (!redirectUri) {
    return <div>加载中...</div>;
  }

  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN ?? ''}
      clientId={process.env.AUTH0_CLIENT_ID ?? ''}
      redirectUri={redirectUri}
    >
      <Component {...pageProps} />
    </Auth0Provider>
  );
}

export default MyApp;

方案二：给getAuth0RedirectURL添加服务端判断 #

在工具函数里先检查window是否存在，服务端返回占位值，客户端再返回真实地址：

// 工具函数
export const getAuth0RedirectURL = (): string => {
  // 服务端环境直接返回空，后续客户端会更新
  if (typeof window === 'undefined') return '';
  
  const url = new URL(window.location.origin);
  url.pathname = process.env.AUTH0_PATH ?? '';
  return url.toString();
};

然后在_app.tsx里用状态配合useEffect更新：

import { useState, useEffect } from 'react';
import { Auth0Provider } from '@auth0/auth0-react';
import { getAuth0RedirectURL } from './your-path';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  const [redirectUri, setRedirectUri] = useState(getAuth0RedirectURL());

  useEffect(() => {
    setRedirectUri(getAuth0RedirectURL());
  }, []);

  if (!redirectUri) return <div>加载中...</div>;

  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN ?? ''}
      clientId={process.env.AUTH0_CLIENT_ID ?? ''}
      redirectUri={redirectUri}
    >
      <Component {...pageProps} />
    </Auth0Provider>
  );
}

export default MyApp;

方案三：直接配置环境变量（更简单） #

如果你的开发/生产环境的redirectUri是固定的，可以直接在环境变量里配置，不需要访问window：

• .env.development：

AUTH0_REDIRECT_URI=http://localhost:3000/your-callback-path

• .env.production：

AUTH0_REDIRECT_URI=https://your-production-domain.com/your-callback-path

然后在_app.tsx里直接使用：

import { Auth0Provider } from '@auth0/auth0-react';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN ?? ''}
      clientId={process.env.AUTH0_CLIENT_ID ?? ''}
      redirectUri={process.env.AUTH0_REDIRECT_URI ?? ''}
    >
      <Component {...pageProps} />
    </Auth0Provider>
  );
}

export default MyApp;

这个方案最简洁，适合环境地址固定的场景；如果需要动态适配当前域名，优先选方案一或二。

内容的提问来源于stack exchange，提问作者husky