Next.js中_app.js与layout.tsx的区别及规范编写方案咨询

核心区别 #

• 所属路由体系：_app.js 是**Pages Router（旧路由系统）的全局根组件，layout.tsx 是App Router（Next.js 13+ 主推新路由系统）**的布局文件，两者分属不同体系，不建议混用。
• 功能定位：
  • _app.js：作为所有页面的统一包裹器，负责全局初始化（如状态管理Provider、全局样式）、页面切换时的全局逻辑（如权限校验），页面切换时自身仅在 props 变化时重新渲染。
  • layout.tsx：属于嵌套布局体系，支持为不同路由段定义专属布局，父布局自动包裹子路由内容；默认是 Server Component，可直接编写异步逻辑，路由切换时布局会保留渲染（除非对应路由段变化），核心职责是共享UI结构（导航栏、侧边栏）、文档结构定义。

规范编写方案 #

方案一：使用 App Router（推荐，Next.js 13+） #

1. 移除 pages/_app.js，在 app 目录下创建根 layout.tsx，负责全局基础结构：

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

// 全局元数据配置
export const metadata: Metadata = {
  title: '我的 Next.js 应用',
  description: '基于 App Router 的示例应用',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body className={inter.className}>
        {/* 全局共享导航 */}
        <nav className="fixed top-0 w-full bg-white shadow-md p-4">
          <a href="/" className="mr-6">首页</a>
          <a href="/about">关于</a>
        </nav>
        {/* 页面内容区域 */}
        <main className="pt-16 px-4">{children}</main>
        {/* 全局页脚 */}
        <footer className="mt-8 py-4 text-center text-gray-500">
          © 2024 我的应用
        </footer>
      </body>
    </html>
  );
}

2. 子路由专属布局：为特定路由段创建独立 layout.tsx，比如 app/about/layout.tsx，会嵌套在根布局中：

export default function AboutLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      {/* 关于页专属侧边栏 */}
      <aside className="w-64 p-4 bg-gray-50">关于页侧边栏</aside>
      {/* 关于页内容 */}
      <div className="flex-1 p-4">{children}</div>
    </div>
  );
}

方案二：使用 Pages Router（旧项目兼容） #

1. 在 pages/_app.js 中处理全局逻辑与状态：

import '../styles/globals.css';
import { AuthProvider } from '../contexts/AuthContext';
import Router from 'next/router';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  // 全局权限校验逻辑
  useEffect(() => {
    const checkAuth = async () => {
      const res = await fetch('/api/auth/check');
      const data = await res.json();
      if (!data.isAuthenticated && Router.pathname !== '/login') {
        Router.push('/login');
      }
    };
    checkAuth();
  }, [Router.pathname]);

  return (
    <AuthProvider>
      {/* 全局共享布局组件 */}
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </AuthProvider>
  );
}

// 全局共享布局
function Layout({ children }) {
  return (
    <>
      <nav className="p-4 bg-blue-500 text-white">
        <a href="/" className="mr-4">首页</a>
        <a href="/profile">个人中心</a>
      </nav>
      <main className="p-4">{children}</main>
      <footer className="mt-8 p-4 text-center text-gray-600">
        © 2024 我的旧版应用
      </footer>
    </>
  );
}

export default MyApp;

关键注意事项 #

• 禁止混用两个路由体系的文件，否则会导致布局冲突，Next.js 会优先加载 App Router 的布局。
• 从 Pages Router 迁移到 App Router 时，逐步迁移全局逻辑：先把全局样式、状态 Provider 移到根 layout.tsx，再逐个迁移页面。
• App Router 的 layout.tsx 默认是 Server Component，可直接编写异步数据请求；Pages Router 的 _app.js 是 Client Component，需通过 useEffect 处理异步逻辑。

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