Next.js中_app.js与_document.js的作用及下划线含义

文件名前下划线的意义 #

在Next.js的pages目录下，文件名前缀带下划线的文件不会被解析为路由页面，它们是框架提供的特殊自定义入口，用于全局覆盖或扩展Next.js的默认行为，不会生成对应的URL路径。

_app.js 的具体作用 #

• 全局布局与样式统一：在这里定义全局通用的布局组件（比如顶部导航、底部页脚），所有页面都会自动嵌套在这个布局里；也可以在这里引入全局CSS文件（比如globals.css），让样式作用于整个应用。
• 全局状态与逻辑处理：可以在这里挂载全局状态管理的Provider（比如React Context、Redux Provider），实现状态在所有页面的共享；还能处理全局认证逻辑，比如检查用户登录状态，未登录时跳转登录页。
• 页面渲染流程控制：Next.js默认会提供一个根App组件，重写_app.js就是自定义这个根组件，你可以在这里添加全局错误捕获、页面加载状态提示等逻辑，统一控制所有页面的渲染流程。
• 全局数据传递：通过getInitialProps（或Pages Router下的其他数据获取方法）获取全局通用数据，传递给所有页面组件使用。

_document.js 的具体作用 #

• 自定义HTML文档骨架：负责生成整个应用最外层的HTML结构，包括<html>、<head>、<body>标签。你可以在这里添加自定义meta标签、全局脚本（比如统计脚本）、修改HTML的lang属性等。
• 仅服务端执行：这个文件只在服务端渲染阶段运行，浏览器端不会执行，所以适合处理服务端专属的HTML配置，比如注入服务端生成的全局变量。
• 扩展默认Document组件：Next.js默认的Document组件会生成基础的HTML结构，重写这个文件可以扩展它的功能，比如优化head内容、添加自定义的HTML属性，或是使用第三方库来处理HTML输出。

两者的层级关系 #

_document.js是整个应用最外层的HTML容器，_app.js则是包裹所有页面的应用根组件，最终会渲染到_document.js的<body>标签内部。

内容的提问来源于stack exchange，提问作者Sajjad-Kazemi