NextJs项目缺失_app.js文件求助：需配置TransactionContext

你创建的是Next.js 13+的App Router项目，它替代了旧版Pages Router的pages文件夹和_app.js入口文件，全局上下文的配置方式需要适配App Router的规则，具体步骤如下：

1. 创建TransactionContext文件 #

在app目录下新建contexts/TransactionContext.tsx（若使用JavaScript则改为jsx），编写Context和Provider组件：

'use client';

import { createContext, useContext, useState, ReactNode } from 'react';

// 定义上下文数据类型（TypeScript专属，JS可省略）
type TransactionContextType = {
  transactions: string[]; // 根据你的业务需求替换为实际数据类型
  addTransaction: (transaction: string) => void;
};

// 创建Context
const TransactionContext = createContext<TransactionContextType | null>(null);

// 封装Provider组件
export function TransactionProvider({ children }: { children: ReactNode }) {
  const [transactions, setTransactions] = useState<string[]>([]);

  const addTransaction = (transaction: string) => {
    setTransactions(prev => [...prev, transaction]);
  };

  return (
    <TransactionContext.Provider value={{ transactions, addTransaction }}>
      {children}
    </TransactionContext.Provider>
  );
}

// 自定义Hook，简化Context调用
export function useTransactionContext() {
  const context = useContext(TransactionContext);
  if (!context) {
    throw new Error('useTransactionContext必须在TransactionProvider内部使用');
  }
  return context;
}

2. 在根Layout中注入Provider #

修改app/layout.tsx，用TransactionProvider包裹所有子组件（根Layout相当于旧版_app.js的全局包裹作用）：

import { TransactionProvider } from './contexts/TransactionContext';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <TransactionProvider>{children}</TransactionProvider>
      </body>
    </html>
  );
}

3. 在页面/组件中使用Context #

在需要调用上下文的组件（比如app/page.tsx）中，通过自定义Hook获取上下文：

'use client';

import { useTransactionContext } from './contexts/TransactionContext';

export default function Home() {
  const { transactions, addTransaction } = useTransactionContext();

  return (
    <div>
      <h1>交易记录</h1>
      <button onClick={() => addTransaction(`交易 ${Date.now()}`)}>
        添加交易
      </button>
      <ul>
        {transactions.map((tx, idx) => (
          <li key={idx}>{tx}</li>
        ))}
      </ul>
    </div>
  );
}

关键注意事项 #

• App Router默认组件为服务器组件，所有使用useContext、useState等客户端API的组件，必须添加'use client';指令声明为客户端组件
• 根Layout是全局层级的组件，在这里注入Provider后，所有子页面和组件都能访问到上下文

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