【问题标题】:Next.js use of _app.js and _document.jsNext.js 使用 _app.js 和 _document.js
【发布时间】:2018-12-05 01:03:40
【问题描述】:

我目前使用_document.js 将css 注入到我的Next.js 应用程序中,我想开始使用_app.js 来帮助将数据注入页面。

想知道是否可以同时使用 _document 和 _app 还是应该只使用其中一个?

【问题讨论】:

标签: next.js


【解决方案1】:

简短回答:是的,您可以同时使用两者。它们有不同的用途,可以在同一个应用程序中使用。

根据NextJS docs

Next.js 使用 App 组件来初始化页面。

要覆盖,请创建 ./pages/_app.js 文件并覆盖 App 类

Next.js 中的页面跳过了周围文档标记的定义。例如,您永远不会包含 <html><body> 等。要覆盖该默认行为,您必须在 ./pages/_document.js 创建一个文件,您可以在其中扩展 Document 类。

注意_document.js 仅在服务器端呈现,而不在客户端呈现。所以像onClick 这样的事件处理程序将无法正常工作。

【讨论】:

  • @Webwoman _app.js 在服务器端和客户端都呈现(在初始 SSR 期间在服务器上,在水合后在客户端上,然后在每个页面/路由导航上)。 _document.js“包装”_app.js.
  • _app 的文档在哪里?
  • 看来_app.js 仅在此处的“学习”部分中提及:nextjs.org/learn/basics/assets-metadata-css/global-styles 注意:添加后您需要重新启动服务器。
  • 你好,将环境变量注入 _document.js html 头标签是否安全?谢谢
  • @mangrove108 它会起作用,我不知道你所说的“安全”是什么意思。我不建议您在那里注入机密信息,因为它对客户可见,但您为什么要从 _document.js 访问 process.env
猜你喜欢
  • 2018-09-11
  • 2021-04-26
  • 1970-01-01
  • 1970-01-01
  • 2019-05-05
  • 2021-01-21
  • 2019-09-23
  • 2018-11-17
  • 2021-03-30
相关资源
最近更新 更多