Next.js 13中如何添加_document.js/_app.js？pages文件夹失效问题

你当前的项目采用的是Next.js的App Router（目录为src/app/），而_document.js和_app.js是旧版Pages Router（基于pages/目录）的全局自定义文件，直接在src下新建pages文件夹是无效的——App Router和Pages Router不能随意混用，这就是你没达到预期效果的原因。

下面是App Router对应的替代方案：

1. 全局布局（替代_app.js） #

在src/app/layout.js（或layout.tsx）中定义根布局，所有页面都会自动继承这个布局，你可以在这里添加全局样式、通用组件、全局状态逻辑等。
示例代码：

import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

如果你的项目里没有这个文件，直接手动创建即可，它是App Router的必需文件。

2. 自定义HTML结构（替代_document.js） #

在src/app/document.js（或document.tsx）中自定义HTML根结构，比如修改<html>属性、添加全局脚本、自定义<head>内容等。
示例代码：

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="zh-CN">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

重要提醒 #

不要尝试同时启用App Router和Pages Router，这会导致项目出现路由冲突、渲染异常等不可预期的问题，坚持使用一种路由方案即可。

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