如何在_app.tsx中访问页面导出的变量？求标准实现方式

你目前采用的「将变量挂载到组件函数作为静态属性」的方法是可行的，同时还有两种更贴合Next.js规范的实现方式：

方式一：通过数据获取函数传递到pageProps #

如果你的变量需要服务端处理，或者想遵循Next.js官方数据流规范，可借助页面的getStaticProps（静态生成场景）或getServerSideProps（服务端渲染场景）将变量注入pageProps，在_app.tsx中直接通过pageProps访问：

// pages/visitor.tsx
const PageQuery = 'my query';

const Visitor = () => {
  return <div>Hello, World!</div>;
};

export async function getStaticProps() {
  return {
    props: {
      PageQuery, // 将变量作为props返回
    },
  };
}

export default Visitor;

在_app.tsx中访问：

import type { AppProps } from 'next/app';

const App = ({ Component, pageProps }: AppProps) => {
  // 直接读取pageProps中的PageQuery
  console.log(pageProps.PageQuery);
  return <Component {...pageProps} />;
};

export default App;

方式二：命名导出+动态加载页面模块 #

如果只是纯静态变量，不想引入数据获取函数，可在页面中直接命名导出变量，再在_app.tsx中通过当前路由动态导入页面模块获取：

// pages/visitor.tsx
export const PageQuery = 'my query'; // 命名导出变量

const Visitor = () => {
  return <div>Hello, World!</div>;
};

export default Visitor;

在_app.tsx中访问：

import type { AppProps } from 'next/app';

const App = ({ Component, pageProps, router }: AppProps) => {
  // 根据当前路由动态加载对应页面模块
  const pageModule = require(`../pages${router.pathname}`);
  const PageQuery = pageModule.PageQuery;
  console.log(PageQuery);
  
  return <Component {...pageProps} />;
};

export default App;

注意：这种方式在TypeScript环境下需要额外补充类型声明，避免类型报错。

关于你当前的实现方法 #

你将静态属性挂载到组件函数的写法，是React生态中常见的实践方案，尤其适合无需服务端处理的纯静态变量场景，代码简洁直接，完全可以正常使用。

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