-
Notifications
You must be signed in to change notification settings - Fork 26.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why we are having multiple files?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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:
renderPage
which 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.