Next.js+TypeScript中如何将_app状态传递到页面？

一、先解决TypeScript类型错误 #

你遇到的Property 'setAccessToken' does not exist on type错误，核心原因是Next.js的NextPage默认props类型不包含你自定义的accessToken和setAccessToken，只需手动扩展类型即可解决：

1. 在页面组件中声明自定义Props类型 #

以Home页面为例，明确指定页面接收的props类型：

import { NextPage } from 'next';

// 定义共享状态的属性类型
type PageAuthProps = {
  accessToken: string;
  setAccessToken: React.Dispatch<React.SetStateAction<string>>;
};

// 结合NextPage默认类型与自定义类型
const Home: NextPage<PageAuthProps> = ({ accessToken, setAccessToken }) => {
  // 这里可以正常读写共享状态
  return (
    <div>
      当前Token: {accessToken}
      <button onClick={() => setAccessToken('new-auth-token')}>更新Token</button>
    </div>
  );
};

export default Home;

2. （可选）给_app.tsx添加类型约束 #

为了在_app.tsx中获得类型提示、避免传递错误props，可扩展AppProps类型：

import type { AppProps } from 'next/app';
import { useState } from 'react';
import { ApolloProvider } from '@apollo/client';
import apolloClient from '../path-to-your-apollo-client';

// 让Component的props包含共享状态属性
type AppWithAuthProps = AppProps & {
  Component: React.ComponentType<PageAuthProps>;
};

function MyApp({ Component, pageProps }: AppWithAuthProps) {
  const [accessToken, setAccessToken] = useState('');
  return (
    <ApolloProvider client={apolloClient}>
      <Component
        {...pageProps}
        accessToken={accessToken}
        setAccessToken={setAccessToken}
      />
    </ApolloProvider>
  );
}

export default MyApp;

二、是否需要换成Redux？ #

这取决于你的实际场景：

• 如果只是共享少量全局状态（如token、用户基础信息），且仅少数页面/组件需要访问修改，当前通过_app.tsx传递props的方案完全够用，无需额外引入状态管理库。
• 如果应用状态复杂（多模块状态联动、大量组件需读写状态），或需要状态持久化（刷新页面保留token），更推荐使用Zustand、Jotai这类轻量状态库，或Redux Toolkit（简化版Redux），它们能更优雅地处理全局状态，避免层层传递props的繁琐。

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