Next.js 13中如何将自定义_app迁移至Layout？

一、自定义_app在最新版Next.js中的沿用情况 #

Next.js 13+ 同时支持Pages Router和App Router两种模式：

• 若继续使用Pages Router，原来的自定义_app组件可以完全沿用，包括AuthProvider全局包裹、页面的requiresAuth静态属性逻辑都能正常运行，无需修改。
• 若要切换到App Router模式，则需要将自定义_app的逻辑迁移到新的Layout系统中。

二、迁移至Next.js 13 Layout系统的步骤 #

1. 全局包裹逻辑迁移到根Layout #

App Router中，根Layout（app/layout.tsx）承担了原自定义_app的全局组件包裹职责，将AuthProvider放在这里即可实现全局注入：

// app/layout.tsx
import { AuthProvider } from '@/components/AuthProvider';
import type { Metadata } from 'next';

// 全局元数据配置（替代原自定义_app中的head逻辑）
export const metadata: Metadata = {
  title: '你的应用',
  description: '应用描述',
};

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

2. 页面权限校验逻辑迁移 #

App Router不再支持页面静态属性（如requiresAuth），需通过以下两种方式替代：

方式一：Middleware服务器端校验（推荐，更安全）

创建middleware.ts文件，在请求到达页面之前做权限校验，适合全局保护路径：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 替换为你的实际鉴权逻辑，比如从Cookie/Header获取用户状态
  const isAuthenticated = request.cookies.get('auth-token')?.value ? true : false;
  // 定义需要鉴权的路径列表
  const protectedPaths = ['/table'];

  // 未登录访问保护路径时重定向到登录页
  if (protectedPaths.includes(request.nextUrl.pathname) && !isAuthenticated) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

// 指定Middleware生效的路径
export const config = {
  matcher: ['/table/:path*'],
};

方式二：客户端组件内校验

如果页面是客户端组件（添加'use client'指令），可通过AuthProvider提供的Hook在组件内做校验：

// app/table/page.tsx
'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/components/AuthProvider';
import MainLayout from '@/components/MainLayout';
import Balance from '@/components/Balance';

export default function TablePage() {
  const { user } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!user) {
      router.push('/login');
    }
  }, [user, router]);

  // 未登录时显示加载状态或空内容
  if (!user) {
    return <div>加载中...</div>;
  }

  return (
    <MainLayout bgColor="transparent" title="Balance sheet">
      <Balance />
    </MainLayout>
  );
}

3. 页面组件迁移 #

将原Pages Router下的页面文件（如pages/table.tsx）移动到App Router的app/table/page.tsx路径下，页面内部的MainLayout组件可以直接保留使用。

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