_document.js vs. _app.js -- What is the difference? Why use _document.js ?

[Elindo586]

So I noticed _document.js from Next and all the parts of html, head, and some others...

When / Why do I need to use _document.js?

Usually If I want something to show on every page I put it in the _app.js ... right now for example I am using next/head and next/script on the _app.js....

What is the purpose of using _document.js ?

[icyJoseph]

A custom Document can update the and tags used to render a Page. This file is only rendered on the server, so event handlers like onClick cannot be used in _document.

You can use the _document to set lang, load fonts, load scripts before page interactivity, collect style sheets for CSS in JS solutions like Styled Components, among a few other things.

• https://nextjs.org/docs/advanced-features/custom-document
• https://nextjs.org/docs/basic-features/font-optimization
• https://nextjs.org/docs/basic-features/script#beforeinteractive
• https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.tsx

For example, applying a CSS class to the body of the page, as part of the render logic, is not possible in _app. It is only possible via side-effects.

And that's about it. Some often try to inject initial data, and other discouraged things in _document, which you're probably better off ignoring.

_app in the other hand, is more of a page initialiser, from the docs:

Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:

• Persisting layout between page changes
• Keeping state when navigating pages
• Custom error handling using componentDidCatch
• Inject additional data into pages
  -Add global CSS

All of that because _app actually does get executed at runtime!

[Elindo586]

Hey! you are back!

Well thanks...

I was asking because I want to convert a next.js app into a pwa, and some code samples were using _document while other samples were using _app ....

Last week I was trying the next-pwa plugin, but didn't work to automatically generate the sw.js page and some other stuff.... I might give it another try just to get it going, but I am also gonna study pwa's in more details to get some of the features working later on as well...

[Elindo586]

Oh.. BTW.... can you have both? _document.js and _app.js ?

[icyJoseph]

Yes, they overlap slightly in terms of functions, but they do not necessarily conflict with each other.

[wongww]

For example, applying a CSS class to the body of the page, as part of the render logic, is not possible in _app. It is only possible via side-effects.

Sorry, did you mean to say _document?