Next.js 如何跨组件共享getStaticProps获取的静态数据？

先把Pages Router的基础规则讲透：getStaticProps 仅支持在pages目录下的页面文件导出，公共组件本身没有在构建阶段拉取静态数据的权限，实操上最稳妥的落地流程是「页面层拉取数据 → 向公共Layout组件透传 → 按组件需求分发到下游」：

1. 抽离公共数据拉取逻辑为独立工具函数
   把调用API拉取全局静态数据（导航配置、侧边栏菜单等全站通用内容）的逻辑封装成单独的函数，避免每个页面重复写请求代码，示例：

   // lib/global-config.js
   import apiClient from './api-client'
   
   // 构建阶段拉取全站通用静态数据
   export async function getGlobalStaticConfig() {
     const config = await apiClient.get('/site/global-config')
     // 可在这里做数据校验、简单缓存逻辑处理
     return config
   }
   

2. 每个页面在自身的getStaticProps中同时拉取全局数据和页面专属数据
   示例页面代码：

   // pages/about.js
   import Layout from '../components/Layout'
   import { getGlobalStaticConfig } from '../lib/global-config'
   import { getPageContent } from '../lib/page-content'
   
   export async function getStaticProps() {
     // 复用公共函数拉取全局静态数据
     const globalConfig = await getGlobalStaticConfig()
     // 拉取当前页面专属内容
     const pageData = await getPageContent('about')
   
     return {
       props: { globalConfig, pageData }
     }
   }
   
   export default function AboutPage({ globalConfig, pageData }) {
     return <Layout globalConfig={globalConfig}>
       <article>{pageData.content}</article>
     </Layout>
   }
   

3. 按组件层级选择合适的分发方式
   • 直接props透传：Layout组件拿到全局配置后，直接拆分对应字段传给内部的<Navbar/>、<Sidebar/>组件，适合组件层级浅、需要传递的数据量不大的场景。
   • 引入React Context避免props层层透传：如果组件嵌套层级深，可在Layout层创建Context把全局配置注入，所有下游组件直接通过useContext钩子拿取需要的字段，不用逐层传递props。

首先澄清一个常见误区：Next.js Pages Router 本身不支持在_app.js文件中导出getStaticProps或getServerSideProps，所有提到的"在_app中获取全局静态数据"的操作，本质都是给_app.js添加了getInitialProps方法——这也是为什么会出现"页面无法优化"的问题，核心弊端如下：

• 强制降级所有页面的渲染模式：只要在_app.js中添加了getInitialProps，Next.js就会忽略单个页面中写的getStaticProps/getServerSideProps配置，把整个站点的所有页面强制切换为请求时服务端动态渲染。原本能在构建阶段生成、托管到CDN的静态HTML，会变成每次用户访问都需要在服务端实时渲染，直接丧失静态生成的加载速度、边缘缓存优势，这就是所谓"页面无法再优化"的核心含义。
• 丢失Next.js内置的数据获取能力：getStaticProps自带的构建阶段错误捕获、增量静态再生（ISR）、静态资源自动内联、构建时数据缓存等优化能力，在getInitialProps场景下完全失效。手动编写的请求逻辑没有自动缓存机制，每次服务端请求都会重复执行数据拉取流程。
• 拉长首屏渲染链路：getInitialProps的执行逻辑是必须等所有全局数据、页面数据全部拉取完成后，才能生成HTML返回给客户端，哪怕全局数据不需要在首屏HTML中呈现，也会直接拉长首字节时间（TTFB）。
• 丧失纯静态导出能力：只要_app.js中存在getInitialProps，Next.js的纯静态导出功能会直接跳过对应路由，无法把项目构建成零服务端依赖的静态站点包。

补充：如果确实想避免每个页面重复调用全局数据拉取函数，可在构建阶段把全局静态数据生成为JSON文件存放到public目录，组件 hydration 时直接加载，全程不影响页面的静态生成能力。

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