ReactJS + NextJS 技术问题：如何从_app.js向页面传递Props？

刚从React转到Next.js的时候，我也纠结过这个问题——毕竟Next.js帮我们封装了路由逻辑，不像React那样手动渲染页面组件，传递props和调用根组件函数的方式确实不一样。下面给你分享两个最常用的解决方案：

在Next.js的Pages Router中，_app.js里的Component参数就是当前路由匹配到的页面组件，你只需要把自定义的props和默认的pageProps一起解构传递给它就行。

基础用法：直接传递静态/客户端props #

// pages/_app.js
function MyApp({ Component, pageProps }) {
  // 定义你想传递给所有页面的自定义props
  const globalProps = {
    appName: "My Next.js App",
    currentUser: { id: 1, name: "SJ19" }
  };

  // 合并默认的pageProps和自定义props，传给页面组件
  return <Component {...pageProps} {...globalProps} />;
}

export default MyApp;

然后在任意页面组件里，就能直接接收这些props：

// pages/profile.js
function ProfilePage({ currentUser, appName }) {
  return (
    <div>
      <h1>Welcome to {appName}</h1>
      <p>Your name: {currentUser.name}</p>
    </div>
  );
}

export default ProfilePage;

进阶用法：服务器端获取全局数据后传递 #

如果需要在服务器端获取全局数据（比如用户信息、站点配置），可以在_app.js的getInitialProps里处理，然后把数据合并到props中：

// pages/_app.js
import App from 'next/app';

function MyApp({ Component, pageProps, globalData }) {
  return <Component {...pageProps} globalData={globalData} />;
}

MyApp.getInitialProps = async (appContext) => {
  // 先获取页面本身的pageProps
  const appProps = await App.getInitialProps(appContext);
  // 全局请求数据（比如从数据库或API获取）
  const res = await fetch('https://api.example.com/global-config');
  const globalData = await res.json();

  return { ...appProps, globalData };
};

export default MyApp;

要让页面能调用_app.js里的函数，最靠谱的方式是用React的Context API——把_app.js作为Context的提供者，所有页面组件通过Context获取函数。

步骤1：创建App Context #

先新建一个Context文件：

// contexts/AppContext.js
import { createContext, useContext } from 'react';

// 创建Context
const AppContext = createContext();

// 封装Provider组件
export function AppProvider({ children, appFunctions }) {
  return (
    <AppContext.Provider value={appFunctions}>
      {children}
    </AppContext.Provider>
  );
}

// 封装自定义Hook，方便页面调用
export function useAppContext() {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useAppContext must be used within an AppProvider');
  }
  return context;
}

步骤2：在_app.js中注入函数 #

在_app.js里引入Provider，把你想暴露的函数传递进去：

// pages/_app.js
import { AppProvider } from '../contexts/AppContext';

function MyApp({ Component, pageProps }) {
  // 定义_app里的全局函数
  const appFunctions = {
    showGlobalToast: (message) => {
      // 这里可以实现全局提示逻辑，比如用第三方UI库
      console.log(`Global Toast: ${message}`);
    },
    refreshGlobalData: async () => {
      const res = await fetch('/api/refresh');
      return res.json();
    }
  };

  return (
    <AppProvider appFunctions={appFunctions}>
      <Component {...pageProps} />
    </AppProvider>
  );
}

export default MyApp;

步骤3：在页面中调用函数 #

在任意页面里，用自定义Hook获取函数并调用：

// pages/dashboard.js
import { useAppContext } from '../contexts/AppContext';

function DashboardPage() {
  const { showGlobalToast, refreshGlobalData } = useAppContext();

  const handleToast = () => {
    showGlobalToast('Dashboard loaded successfully!');
  };

  const handleRefresh = async () => {
    const data = await refreshGlobalData();
    console.log('Refreshed data:', data);
  };

  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={handleToast}>Show Toast</button>
      <button onClick={handleRefresh}>Refresh Data</button>
    </div>
  );
}

export default DashboardPage;

补充：Next.js 13+ App Router的情况 #

如果你以后升级到App Router（用layout.js代替_app.js），逻辑类似：

• 传递props可以通过给children传props，或者用Context
• 全局函数同样用Context来暴露

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