Next.js 13使用App路由目录时自定义_app.js失效问题咨询

在Next.js 13的App Router目录结构中，./pages/_app.js是Pages Router的专属写法，自然不会生效。两种路由体系的全局初始化逻辑完全不同，以下是对应原_app.js功能的实现方式：

1. 保留页面切换时的布局/维持全局状态 #

App Router中，根布局文件app/layout.js是全局持久化的——所有页面都会嵌套在这个布局内，页面切换时布局组件不会重新渲染，天然实现布局保留与状态维持。

示例代码：

// app/layout.js
// 全局CSS必须在这里引入（唯一入口）
import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 这里放置全局导航、侧边栏等需要持久化的元素 */}
        <header>全局头部导航</header>
        {children}
        <footer>全局页脚</footer>
      </body>
    </html>
  );
}

如果需要在页面切换时重置部分状态，但仍要统一包裹所有页面，可以使用app/template.js——它会在每个页面渲染时重新实例化，适合做页面级的统一包装：

// app/template.js
export default function Template({ children }) {
  // 可添加页面级的状态管理、统一样式包裹等逻辑
  return <div className="page-container">{children}</div>;
}

2. 向页面注入额外数据 #

通过React Context结合根布局，实现全局数据的注入，所有子页面均可获取：

// app/contexts/GlobalContext.js
'use client'; // 需标记为客户端组件以使用React Hooks
import { createContext, useContext, useState } from 'react';

const GlobalContext = createContext();

export function GlobalProvider({ children }) {
  const [globalState, setGlobalState] = useState({ userInfo: null });
  
  return (
    <GlobalContext.Provider value={{ globalState, setGlobalState }}>
      {children}
    </GlobalContext.Provider>
  );
}

// 自定义Hook简化上下文调用
export function useGlobalData() {
  return useContext(GlobalContext);
}

在根布局中引入Provider：

// app/layout.js
import './globals.css';
import { GlobalProvider } from './contexts/GlobalContext';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <GlobalProvider>
          <header>全局头部导航</header>
          {children}
          <footer>全局页脚</footer>
        </GlobalProvider>
      </body>
    </html>
  );
}

后续任意页面组件均可通过useGlobalData()获取全局数据：

// app/page.js
'use client';
import { useGlobalData } from './contexts/GlobalContext';

export default function Home() {
  const { globalState } = useGlobalData();
  return <div>当前用户：{globalState.userInfo?.name}</div>;
}

3. 添加全局CSS #

App Router中，全局CSS必须放在app/globals.css，且只能在根布局layout.js中引入，这是全局样式的唯一合法入口，不可在其他组件中引入全局CSS文件。

内容的提问来源于stack exchange，提问作者Miguel Angel Marroquin Jordan