Add build manifest #4119
Add build manifest #4119
Conversation
|
Custom document when adding css will look like: // _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'
export default class MyDocument extends Document {
render() {
const {buildManifest, pathname} = this.props
const {css} = buildManifest
return (
<html>
<Head>
<style>{`body { margin: 0 } /* custom! */`}</style>
{css.map((file) => {
return <link rel="stylesheet" href={`/_next/${file}`} key={file} />
})}
{}
</Head>
<body className="custom_class">
{this.props.customValue}
<Main />
<NextScript />
</body>
</html>
)
}
} |
|
build-manifest.json: |
| } | ||
|
|
||
| if (MATCH_ROUTE_NAME.exec(file)) { | ||
| pageFile = file |
There was a problem hiding this comment.
Why store this inside a loop?
Isn't that the previous value could get replaced when we are going to use this?
What's the purpose?
There was a problem hiding this comment.
Going to remove this, we don't need the pages mapping.
| return ( | ||
| const files = buildManifest[filename] | ||
|
|
||
| return files.map((file) => ( |
There was a problem hiding this comment.
Why we are having multiple files?
There was a problem hiding this comment.
It's just how webpack outputs the chunks:
Manifest looks like this:
{
"css": [
"static/style.css"
],
"main.js": [
"static/commons/main.js"
],
"manifest.js": [
"static/commons/manifest.js"
]
}
|
@timneutkens For example, in my So I am just changing the file name by putting it's id. However, the manifest gets the incorrect id number - this is because webpack seems to be returning incorrect information. I am trying this out on Why is this happening? You can easily repro whats happening by using the above - you will see, it won't work. |
This PR does 2 things:
renderPagewhich allows users extending the webpack config to use chunkhash for files too. One example of this is that we can modify next-css to use chunkhash in production mode.