Fixes: #13512
Defined and exported type for `metric` used in [reportWebVitals](https://nextjs.org/docs/advanced-features/measuring-performance)
```
export function reportWebVitals(metric) {
if (metric.label === 'custom') {
console.log(metric) // The metric object ({ id, name, startTime, value, label }) is logged to the console
}
}
```
One can now do
```
import { NextWebVitalsMetric } from 'next/app'
export function reportWebVitals(metric: NextWebVitalsMetric ) {
if (metric.label === 'custom') {
console.log(metric) // The metric object ({ id, name, startTime, value, label }) is logged to the console
}
}
```
Updates the way filenames are generated for browser compilation.
Notably:
- All entry bundles now have hashes in production, this includes pages (previously pages used a buildId in the path)
- The AmpFiles no longer depends on hardcoded bundle names, it uses the buildManifest instead (internals)
- All cases where we match the page name from the chunk/entrypoint name now use the same function `getRouteFromEntrypoint` (internals)
- In development we no longer include the "faked" `buildId` set to `development` for page files, instead we just use the `/_next/static/pages` path (was `/_next/static/development/pages`). This was changed as it caused unneeded complexity and makes generating the bundles easier (internals)
- Updated tons of tests to be more resilient to these changes by relying on the buildManifest instead of hardcoded paths (internals)
Follow up of these PRs:
https://github.com/vercel/next.js/pull/13759https://github.com/vercel/next.js/pull/13870https://github.com/vercel/next.js/pull/13937https://github.com/vercel/next.js/pull/14130https://github.com/vercel/next.js/pull/14176https://github.com/vercel/next.js/pull/14268Fixes#6303Fixes#12087Fixes#1948Fixes#4368Fixes#4255Fixes#2548
Webpack will randomly execute script order if its runtime is not prioritized before chunks execute.
This seems to be somehow triggered in #13870 because of slightly different script ordering.
This had actually broke CSS, which is why our tests are failing 50% of the time:
Without this PR:
However, it's still problematic to use `async` in development since we rely on script execution order. So, this PR disables `async` in development.
We're exploring `defer` in the future anyway (over `async`), which will be ordered, so I don't mind diverging between dev and prod in this way.
---
Fixes#13911
Initial work to use chunkhashes instead of buildid for the page files in production. This does not change the calculation of the filename itself initially.
Disambiguate between pages/index.js and pages/index/index.js so that they resolve differently.
It all started with a bug in pagesmanifest that propagated throughout the codebase. After fixing pagesmanifest I was able to remove a few hacks here and there and more logic is shared now. especially the logic that resolves an entrypoint back into a route path. To sum up what happened:
- `getRouteFromEntrypoint` is the inverse operation of `getPageFile` that's under `pages/_document.tsx`
- `denormalizePagePath` is the inverse operation of `normalizePagePath`.
Everything is refactored in terms of these operations, that makes their behavior uniform and easier to update/patch in a central place. Before there were subtle differences between those that made `index/index.js` hard to handle.
Some potential follow up on this PR:
- [`hot-reloader`](https://github.com/vercel/next.js/pull/13699/files#diff-6161346d2c5f4b7abc87059d8768c44bR207) still has one place that does very similar behavior to `getRouteFromEntrypoint`. It can probably be rewritten in terms of `getRouteFromEntrypoint`.
- There are a few places where `denormalizePagePath(normalizePagePath(...))` is happening. This is a sign that `normalizePagePath` is doing some validation that is independent of its rewriting logic. That should probably be factored out in its own function. after that I should probably investigate whether `normalizePagePath` is even still needed at all.
- a lot of code is doing `.replace(/\\/g, '')`. If wanted, that could be replaced with `normalizePathSep`.
- It looks to me like some logic that's spread across the project can be centralized in 4 functions
- `getRouteFromEntrypoint` (part of this PR)
- its inverse `getEntrypointFromRoute` (already exists in `_document.tsx` as `getPageFile`)
- `getRouteFromPageFile`
- its inverse `getPageFileFromRoute` (already exists as `findPageFile ` in `server/lib/find-page-file.ts`)
It could be beneficial to structure the code to keep these fuctionalities close together and name them similarly.
- revise `index.amp` handling in pagesmanifest. I left it alone in this PR to keep it scoped, but it may be broken wrt nested index files as well. It might even make sense to reshape the pagesmanifest altogether to handle html/json/amp/... better
Was going through _document and noticed some variable shadowing going on. Added a rule for it to our eslint configuration and went through all warnings with @Timer.
This allows a page to be fully static (no runtime JavaScript) on a per-page basis.
The initial implementation does not disable JS in development mode as we need to figure out a way to inject CSS from CSS imports / CSS modules without executing the component JS. This restriction is somewhat similar to https://www.gatsbyjs.org/packages/gatsby-plugin-no-javascript/. All things considered that plugin only has a usage of 600 downloads per week though, hence why I've made this option unstable/experimental initially as I'd like to see adoption patterns for it first.
Having a built-in way to do this makes sense however as the people that do want to adopt this pattern are overriding Next.js internals currently and that'll break between versions.
Related issue: #5054 - Not adding `fixes` right now as this implementation needs more work. If anyone wants to work on this feel free to reach out on https://twitter.com/timneutkens
* Make sure to show error when url prop is returned for a page
* Update test and handle undefined pageProps
* Handle empty props
* Apply suggestions from code review
Co-Authored-By: Tim Neutkens <tim@timneutkens.nl>
* Update tests
* Update to not add url prop for SSG/SSP pages
* Update errsh for reserved prop
* Update errsh wording some more
* Update tests and to warn instead of error
* Update reserved prop warning
* Include page in url prop warning
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: Joe Haddad <timer150@gmail.com>
* Add failing hydration test
* Add importing of next/router to _app
* Fix type
* Update _app check for windows
* Remove babel fix
* Update to use webpack to require next/router
* Enable New CSS Support by Default
* Adjust configs
* Fix invisible AMP body
* Fix AMP validation warning
* test fix
* Use expression that won't be eliminated by babel
* Adding native-url package
* Bumping native-url version
* Upgrading native-url
* Logging stats object for debugging
* Logging stats object for debugging
* Adding try catch to the error lines
* Experimenting with regex
* Experimenting with regex
* Experimenting with regex
* Testing regex changes
* Fixing defer-script test case to not include polyfill.js
* Meging changes with existing polyfill work
* Bumping version
* adjust webpack config
* Reduce size in size test
* Remove 1kb from legacy
* Bumping native-url version, includes fix for IE11
* Update lock file
* Updating native-url, fixes issue on IE11
* Fix sourcemap being added in document
* Adding Router as an app level dep. Fixes Router not being added as a dep to pages without Link when granularChunks is enabled
* Fix typescript error
* Adding native-url package
* Bumping native-url version
* Upgrading native-url
* Logging stats object for debugging
* Logging stats object for debugging
* Adding try catch to the error lines
* Experimenting with regex
* Experimenting with regex
* Experimenting with regex
* Testing regex changes
* Fixing defer-script test case to not include polyfill.js
* Meging changes with existing polyfill work
* Bumping version
* adjust webpack config
* Reduce size in size test
* Remove 1kb from legacy
* Bumping native-url version, includes fix for IE11
* Update lock file
* Updating native-url, fixes issue on IE11
* Fix sourcemap being added in document
* Polyfilling fetch and object-assign
* Polyfilling corejs object-assign
* Adding object-assign in polyfills.js. IE11 does not support Object.assign
* Fixing failing test
* Updating object.assign polyfill to fix aliasing
* Updating test case value to match new build stats
* Increasing the size of default build to 225kb
* Fixing defer-script test case to not include polyfill.js
* Revert README.md
* Re-design the polyfill approach based on PR feedback
* Adding comment and fixing test case
* Rename polyfills chunk
* Extract aliases into helper
* Remove extra new line
* Fix TypeScript typings
* Adding _internal_fetch alias
* Adjust build manifest plugin
* Build manifest plugin changes - adding a separate entry for polyfills
* Rename polyfills entry in build-manifest.json
* Remove old comment
* Fix TS
* Set key
* Polyfills already added
* Filtring polyfill.module.js
* Fix test
* Add __internal_fetch to alias rule
* Adjust name
* bump size
* ignore polyfills
* sigh
* Add initial bit for plugins
* Add checks for needed metadata values
* Add test
* Initial plugins changes
* Add handling for _app middleware
* Add loading of _document middleware and
handling of multiple default export syntaxes
* Fix insert order for middleware member expression
* Remove early return from middleware plugin from testing
* Add tests for current plugin middlewares
* Update test plugin package.json
* Update handling for class default export
* Update to use webpack loader instead of babel
plugin, remove redundant middleware naming, and add field for required env for plugins
* Add middleware to support material-ui use case
and example material-ui plugin
* Update tests and remove tests stuff from google analytics plugin
* Remove old plugin suite
* Add init-server middleware
* Exit hard without stack trace when error in collecting plugins
* Add on-error-client and on-error-server and update
to run init-server with next-start in serverless mode
* Update init-client for google analytics plugin
* Add example Sentry plugin and update with-sentry-simple
* Remove middleware field/folder and use src dir for plugins
* Add post-hydration middleware and update
material-ui plugin
* Put plugins code behind flag
* Update chromedriver
* Revert "Update chromedriver"
This reverts commit 1461e978e677f7da05e29e0415ec614a04bf65f9.
* Update lock file
* Remove un-needed _app for sentry example
* Add auto loading of scoped packages, add plugins
config for manually listing plugins, and update
to only collect plugins once
* Update example plugins
* Expose plugins' config
* Rename plugin lifecycles and add babel-preset-build
* Rename other methods with unstable
* Update log when plugin config overrides auto-detecting
* allow NextScript to optionally defer javascript
* move defer options to experimental feature
* combine defer flags into a single option
* Update deferScripts to work with serverless target
* Add test for defer and async property
* Read the async property
* Check versions of chrome and chromedriver
* Update to chromedriver 76
* Fix test
Before this patch users would see the following warning during initial
compilation:
```
Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
in link
in Head
in html
in Html
in Document
in Context.Provider
in Context.Provider
```
* Show content as soon as <style> tags are added
* Add fallback removal
* Add test for when unused
* Ensure the function is ES5 compatible
* IE support
* Test it works on broken pages
