CRA迁移Next.js：如何跨组件访问getServerSideProps获取的URL数据

我正从Create React App（CRA）迁移到Next.js，目前遇到的问题是：通过getServerSideProps的context拿到了主机名、协议等URL数据（存在requestUrlData中），但不想通过层层传参把这些数据传给深层嵌套的子组件，请问有没有更简洁的方式让深层组件直接访问这些数据？

原CRA中的环境判断逻辑（服务端无法使用window.location，需替代方案）：

if (window !== undefined) {
    const host = window.location.hostname;
    if (host.includes('dev.')) {
        env = 'DEV';
    } else if (host.includes('int.')) {
        env = 'INT';
    } else if (host.includes('localhost') || host.includes('127.0.0.1')) {
        env = 'LOCAL';
    }
}

已实现的Next.js getServerSideProps函数：

export const getServerSideProps: GetServerSideProps<{requestUrlData: programServerSideProps}> = async (context: any) => {
const requestUrlData = await absoluteUrl(context.req);
return { props : {requestUrlData} }
}

解决方案 #

1. 使用React Context全局共享URL数据 #

通过React Context可以把requestUrlData全局注入到组件树中，深层组件直接读取即可，无需层层传参。

步骤1：创建URL Context

新建UrlContext.tsx文件：

import { createContext, useContext } from 'react';

// 定义Context的类型，和你的programServerSideProps一致
type UrlContextType = programServerSideProps | null;

const UrlContext = createContext<UrlContextType>(null);

export const UrlProvider = UrlContext.Provider;
export const useUrlData = () => useContext(UrlContext);

步骤2：在页面组件中注入数据

在返回getServerSideProps的页面组件中，用UrlProvider包裹整个组件树：

import { UrlProvider } from './UrlContext';

export default function Home({ requestUrlData }) {
  return (
    <UrlProvider value={requestUrlData}>
      {/* 页面内容，包括深层嵌套组件 */}
      <DeepNestedComponent />
    </UrlProvider>
  );
}

export const getServerSideProps: GetServerSideProps<{requestUrlData: programServerSideProps}> = async (context: any) => {
  const requestUrlData = await absoluteUrl(context.req);
  return { props : {requestUrlData} }
}

步骤3：深层组件中直接获取数据

在任意深层子组件中，通过自定义的useUrlData Hook读取数据：

import { useUrlData } from './UrlContext';

export default function DeepNestedComponent() {
  const urlData = useUrlData();
  
  // 直接使用urlData中的hostname、协议等数据
  const env = urlData ? (
    urlData.host.includes('dev.') ? 'DEV' :
    urlData.host.includes('int.') ? 'INT' :
    urlData.host.includes('localhost') || urlData.host.includes('127.0.0.1') ? 'LOCAL' :
    'PROD'
  ) : 'PROD';

  return <div>当前环境：{env}</div>;
}

2. 优化：直接在服务端处理环境判断 #

既然已经在getServerSideProps中拿到了URL数据，完全可以在服务端直接完成环境判断，把结果作为props返回，再通过Context或直接使用，减少客户端逻辑：

export const getServerSideProps: GetServerSideProps<{requestUrlData: programServerSideProps, env: string}> = async (context: any) => {
  const requestUrlData = await absoluteUrl(context.req);
  let env = 'PROD';
  const host = requestUrlData.host;
  if (host.includes('dev.')) {
    env = 'DEV';
  } else if (host.includes('int.')) {
    env = 'INT';
  } else if (host.includes('localhost') || host.includes('127.0.0.1')) {
    env = 'LOCAL';
  }
  return { props : {requestUrlData, env} }
}

之后可以把env也注入到Context中，或者直接通过Context传递包含env的对象，深层组件直接读取env即可。

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