As discussed with @csswizardry. This is a temporary option in case you know the preloads are not needed. It will likely be a default once the ScriptLoader work from @janicklas-ralph has been proven in partner apps and landed.
```js
// pages/index.js
export const config = {
unstable_JsPreload: false
}
```
Running next.js in `development` causes issues when having pages named "development" or "developments",... as `this.buildId` = `development`
Fixes: https://github.com/vercel/next.js/issues/19520
Fixes: https://github.com/vercel/next.js/issues/19100
> According to https://nextjs.org/docs/basic-features/image-optimization#caching Next.js populates a cache dir when using the new <Image /> component. This is not the case when using SVG files. This results in a performance penalty.
I created a function for writing images to cache directory (`wrirteToCacheDir`) and it is called for all images.
However, vector and animated images are not optimized before writing them to cache dir
Related to #18179
Hello friends
Ran into this bug on our production site, prerenderManifest stores revalidation info for the index as `"/": { .. }`, but the code tries to access this information as `"/index"`.
This leads to our index page always having s-max-age: 1
This pull request adds `future.strictPostcssConfiguration`, allowing users to opt-into the more strict PostCSS configuration loading.
This stricter PostCSS configuration loading ensures that CSS can be cached across builds.
Fixes#16864
The `router` can be missing in a test environment when trying to render a `Link` component. This PR bails out of `router.prefetch()` when `router` is missing.
The alternative is for users to mock `next/link` or to mock the `router` and wrap their test components.
Please let me know any feedback.
This ensures rewrites to API routes with i18n enabled handles as an API route correctly. This also adds tests for API routes in the i18n test suite
Fixes: https://github.com/vercel/next.js/issues/20725
This is a #19325 reconfigured to support a loader passed in via a `loader` prop on the Image component, rather than using a config-based approach.
The idea is that applications wanting to use a custom loader will create a wrapper element for the image component that incorporates that loader. See a simple example of this pattern in the integration tests.
This solution is similar to the one prototyped by @ricokahler in #20213 and described at https://github.com/vercel/next.js/issues/18606#issuecomment-720149156
---
Closes#19325Fixes#18606
Currently pages with `notFound: false` from `getServerSideProps` behave the same as `notFound: true`, i.e. just having the key is enough to result in a 404. This fixes the check in render.tsx and adds tests for it.
This pull request correctly assigns boolean attributes for `<script />` to match the element as it is created by a server-side render.
Prior to this pull request, we'd double-execute `<script>` tags with the `async`, `defer`, or `nomodule` property.
---
Fixes#9070
Follow-up to https://github.com/vercel/next.js/pull/20628 this ensures `isReady` is not initially true when the query isn't present but the page is an automatically statically optimized dynamic route
Currently there is no way to add multiple meta tags with the same name attribute to the head of a page. This PR modifies the Head component to allow multiple meta tags with the same name if they have unique keys.
This is important for integrating with certain services like Google Scholar and Swiftype.
Fixes#10183
This PR fixes a bug where we'd accidentally pass-through the user-provided `srcSet` if the image was lazy, just to then replace it when we hydrate.
---
Fixes#19041
This pull request adjusts our experimental scroll restoration behavior to use `sessionStorage` as opposed to `History#replaceState` to track scroll position.
In addition, **it eliminates a scroll event listener** and only captures when a `pushState` event happens (thereby leaving state that needs snapshotted).
These merely adjusts implementation detail, and is covered by existing tests:
```
test/integration/scroll-back-restoration/
```
---
Fixes#16690Fixes#17073Fixes#20486
This ensures we render the locale domain on the `href` when using `next/link` previously the provided `href` was stilling being rendered which differed from the resulting `href` that was navigated to.
Fixes: https://github.com/vercel/next.js/issues/20612
This pull request makes `Router#push` and `Router#replace` function identically to `<Link />`, i.e. reset scroll when the new render is complete.
Users can opt out of this new behavior via:
```tsx
const path = '/my-page'
router.push(path, path, { scroll: false })
```
---
Fixes#3249
This ensures we detect domain specific locales and redirect them client-side. Tests have been added in the `i18n` suite to ensure the domain redirect is applied correctly during a client-side navigation
Fixes: https://github.com/vercel/next.js/issues/19174
This refactors to instead of throwing a specific error when a SSG data route 404s, we return it through props and render the 404 outside of the error handling flow. No additional tests have been added as existing tests should cover this.
Closes: https://github.com/vercel/next.js/issues/19243
This moves the scroll reset behavior to happen synchronously with the DOM commit, instead of a few ticks after the render completes.
This is necessary for components that read scroll state on mount.
---
Fixes#6462
This ensures the default path used for the `next/image` component includes the `basePath` when configured. Additional tests have also been added to ensure the image component is working correctly with `basePath` configured.
Fixes: https://github.com/vercel/next.js/issues/19711
This fixes `next/image` to properly ignore inherited styles applied to the `img` tag by a parent element.
Image styling should **always** be done by a wrapper element—not to the image itself!
---
Fixes#19817Fixes#19964
This makes sure we don't generate the wrong locale source variant for the rewrite requiring a `/` on the end which won't ever be added causing the rewrite to never match. Additional tests have been added to ensure this specific rewrite is working correctly.
Fixes: https://github.com/vercel/next.js/issues/20508
This makes sure the query isn't dropped when doing a history navigation with i18n. Additional tests have been added to ensure this is working correctly as well.
Fixes: https://github.com/vercel/next.js/issues/20212
This ensures we show an error for string values for `revalidate` since we currently don't handle these and instead it results in `revalidate: false` being used. This also adds tests for our `revalidate` checks to ensure they are triggered correctly and not triggered for valid values.
x-ref: https://github.com/vercel/next.js/issues/20310
This makes sure redirects to the index route properly end with a trailing slash or don't based on the `trailingSlash` config to ensure an additional redirect doesn't need to take place un-necessarily.
Fixes: https://github.com/vercel/next.js/issues/19405
This ensures the pages-manifest only includes forward slashes and not backslashes when adding i18n page references, this also adds tests ensuring we don't regress on this in the i18n-support test suite.
Fixes: https://github.com/vercel/next.js/issues/20330
There's currently two bugs with the font optimization, but we'd really like to ship a stable version.
To unblock the stable release, we're **temporarily** reflagging this. It'll be unflagged on canary again!
This makes sure the `locale` doesn't cause the wrong `href` to be resolved, this also ensures route specificity is correct when loading dynamic routes in production mode.
Fixes: https://github.com/vercel/next.js/issues/19747
Currently if sizes is not defined, Next.js is setting sizes as:
```
(max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, 3840px'
```
This pull request will make sizes be `100vw` by default, which will allow us to download "smaller" images than what's currently happening.
In a demo app I have, the difference is between downloading 488KB vs 1.4MB (in images)
Adds an err.sh link to the production build missing message. Also clears up `valid` as `production`.
Also fixes an edge case where an unhelpful error would be thrown because we checked for `.next` instead of `.next/BUILD_ID`
Added the out directory location as the list line during export to make sure people know where the files are output.
Fixes#19778Fixes#19788
## Why
Some users prefer to use a custom server implementation that handles body parsing. If they do this, they have no way to opt out of all body parsing in API Routes. Requests with bodies die if next's `bodyParser` is not disabled. Requests just hang forever.
Instead of adding [this config](https://nextjs.org/docs/api-routes/api-middlewares#custom-config) to every API Route, we do a simple check to avoid parsing the body twice.
Fixes#8315Fixes#7960
* make the error message more clear if webpack config comes back undefined
* Update check and add test
* bump
* Update build-output test
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Fixes#16173
## What
Restores handling of termination signals, `SIGTERM` and `SIGINT`, to allow graceful termination of next commands. Seems to have been removed during a child process refactor #6450, was this intentional?
## Why
Currently the command processes have to be forcefully killed. This would help those using Next.js with custom servers and tools like Docker and Kubernetes that rely on termination signals to shutdown instances.
---
Where would be a good location to add some tests? [test/integration/cli/test/index.test.js](fc98c13a2e/test/integration/cli/test/index.test.js)?
This updates the fallback locale for `locale: false` to be the `defaultLocale` instead of the currently active `locale` as it allows passing through URLs more seamlessly as a URL without the locale prefixed can be treated as the `defaultLocale` instead of having to worry if the locale matches the currently active locale. This also ensures `locale={false}` is tested in the i18n-support-catchall suite
Closes: https://github.com/vercel/next.js/issues/19048
This ensures navigations to non-configured locales causes the 404 page to be shown, it also adds tests to ensure direct visits for non-configured locales 404s correctly.
Fixes: https://github.com/vercel/next.js/issues/19214
This PR removes the modern mode experiment because:
- It does not yield meaningful bundle size wins when compared to other initiatives we've taken
- It's not compatible with webpack 5 (which we're upgrading to)
- It's currently broken and causes most apps to malfunction
- There's no champion currently owning the experiment
We can re-introduce this in the future when we'd like to make it a default for all Next.js apps.
Note: **Next.js still supports Differential Loading (`nomodule`) and does it by default.** This PR strictly removes the experimental modern _syntax_, and does not disable our existing modern/legacy polyfilling.
---
Fixes#19200Fixes#18960Fixes#14707Fixes#14465
This ensures redirects are handled properly with i18n + `trailingSlash: true`, additional tests have also been added to ensure this is covered
Fixes: https://github.com/vercel/next.js/issues/19069
This makes sure SSG data is correctly prefetched for the default locale and other locales on the same page. Tests for this behavior have been added for catch-all and normal pages.
Closes: https://github.com/vercel/next.js/issues/19048
We accidentally regressed back in 9.5 and dropped support for inline CSS comments. PostCSS always parses these as pass-through (and not a syntax error), which can cause problems when minifying.
Browsers do a similar thing and ignore the comments.
To ensure we generate valid CSS, this adds support for stripping the CSS comments from the build.
---
Fixes#15589Closes#17130
Fixes#18720
This removes image preloading. It doesn't work correctly on any browser other than Chrome (with Chrome's real engine). On all other browsers, it triggers 2x the bytes to be downloaded. The tradeoff isn't worth it here IMO.
Chrome itself should be smart enough to bump an `<img />` tag's priority over other preloads that are script type during the preparse phase.
We can reintroduce this when we don't hurt non-Chrome users.
This ensures root optional-catch-all index routes with i18n are output to the correct location and are also loaded from the `prerender-manifest` correctly.
Fixes: https://github.com/vercel/next.js/issues/19095
## Description
Fixes#18338 - Fixed an issue with `trailingSlash: true` adding a slash to the end of an external link.
After
```
<h1 class="Home_title__3DjR7">Welcome to <a href="https://nextjs.org">Without slash</a></h1>
<h1 class="Home_title__3DjR7">Welcome to <a href="https://nextjs.org">With slash?</a></h1>
```
Before
```
<h1 class="Home_title__3DjR7">Welcome to <a href="https://nextjs.org">Without slash</a></h1>
<h1 class="Home_title__3DjR7">Welcome to <a href="https://nextjs.org/">With slash?</a></h1>
```
This fixes a few things related to optional catch-all routes and i18n. The first thing is it ensures the correct data route is generated on the client so that the locale isn't duplicated for an optional catch-all route, the next is it ensures the browser history is updated correctly when only a locale change is occurring, and then it also ensures we handle the locales and normalizing for fallback optional catch-all pages correctly.
Tests have been added to ensure these cases are covered properly and we don't regress on them, these changes were also tested on Vercel [here](https://next-js-bug-i18n-root-params-nybg44l0b.vercel.app/)
Fixes: https://github.com/vercel/next.js/issues/18633
Fixes: https://github.com/vercel/next.js/issues/19059
This pull request completely replaces our old page loader with a brand new route loader.
Our existing comprehensive test suite means I did not need to add a bunch of tests. I did add them where behavior was added or fixed.
Summary of the changes:
- Eagerly evaluates prefetched pages in browser idle time (speeds up transitions)
- Router is **no longer frozen** indefinitely if the Build Manifest never arrives
- Router is **no longer frozen** indefinitely if a page fails to bootstrap
- New `withFuture` utility instead of ad-hoc deduping per resource
- Prefetching is now delayed until browser idle time to not impact TTI
- Browsers without `prefetch` now fall back to eager evaluation instead of using `preload`
- We're now ready to serve non-static assets **with `no-store` without breaking prefetching**
- **Application can now hydrate without fetching CSS assets—this is a huge performance win that was previously blocking hydration**
---
The minor size increase here is unfortunate, but we have to incur it for correctness.
---
Fixes#18389Fixes#18642
This ensures we use the `defaultLocale` for a locale domain when rendering non-static pages. Static pages will initially contain the global `defaultLocale` and then be updated on the client since we don't currently prerender a version of the pages for each locale domain.
Closes: https://github.com/vercel/next.js/issues/18970
We fixed this in a previous PR but there were no tests for `.ico` so this PR adds a test for it to ensure we don't regress.
Similar to SVG, we bypass ICO because it typically contains multiple sizes in a single file.
Closes#18600
Fixes#18563 by adding the etag header to the optimized image response.
This does _not_ change the expireAt (TTL) for cached files on the server, which still uses the max-age of the upstream response.
The new file format on disk for cached image files is the following:
```
.next/cache/images/<HASHED_QUERYSTRING>/<EXPIREAT>.<ETAG>.<EXT>
```
This ensures dynamic routes are correctly generated for `next start` with i18n and adds tests to the i18n suite to ensure they are working correctly.
Closes: https://github.com/vercel/next.js/issues/18397
This PR fixes two bugs causing HTML validators to complain.
- Error: Bad value data:image/svg+xml;charset=utf-8, for attribute src on element img: Illegal character in scheme data: < is not allowed.
- Fixed by using base64 for svg during `layout=intrinsic` to avoid angle brackets
- Error: Element img is missing required attribute src.
- Fixed by using base64 transparent gif for `loading=lazy` placeholder
Fixes#18850
This pull request fixes `<Image />` not updating when new props are passed by removing external DOM mutations and relying on React to do it instead.
As an added bonus, I've extracted the intersection observer from both the `<Image />` and `<Link />` component, as their instance can be shared!
The increase in size is minor (+3B), and actually a decrease for apps using both `<Image />` and `<Link />`.
---
Fixes#18698Fixes#18369
While we were fixing how Next.js handled CSS, we added a complex prefetch, preload, fetch sequence to acquire the CSS asset.
This unnecessarily overcomplicated what could've been only a `fetch()` from the very start!
---
Fixes#16932
This corrects this test failing from an arrow function being used in ie11 which isn't supported natively
```
● Production Usage › Dynamic import › default behavior › should not remove css styles for same css file between page transitions
JavascriptError: Error executing JavaScript
at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
```
This upgrades to ncc@0.25.0 and fixes the previous bugs including:
* ncc not referenced correctly in build
* Babel type errors
* node-fetch, etag, chalk and raw-body dependencies not building with ncc - these have been "un-ncc'd" for now. As they are relatively small dependencies, this doesn't seem too much of an issue and we can follow up in the tracking ncc issue at https://github.com/vercel/ncc/issues/612.
* `yarn dev` issues
Took a lot of bisecting, but the overall diff isn't too bad here in the end.
This adds inlining for Babel and the Babel plugins used in next.
This is based to the PR at https://github.com/vercel/next.js/pull/18823.
The approach is to make one large bundle and then separate out the individual packages from that in order to avoid duplications.
In the first attempt the Babel bundle size was 10MB... using "resolutions" in the Yarn workspace to reduce the duplicated packages this was brought down to a 2.8MB bundle for Babel and all the used plugins which is exactly the expected file size here.
This will thus add a 2.8MB download size to the next package, but save downloading any babel dependencies separately, removing a large number of package dependencies from the overall install.
This pull request speeds up Next.js' rendering pipeline by fetching data, parsing it, and loading it into memory instead of only doing the network request.
This will mainly result in improved Firefox/Safari performance since they handled prefetch incorrectly—only Chrome did it right. This also gets us closer to being able to use `no-store` in our caching headers!
---
Fixes#18639
x-ref #18802
This PR prints a pretty error when the Image `src` property is a [protocol-relative URL](https://www.paulirish.com/2010/the-protocol-relative-url/).
> Update 2014.12.17:
> Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique is now an anti-pattern. If the asset you need is available on SSL, then always use the https:// asset.
Fixes#18536
Serverside Dynamically loaded CSS module file insertion adds css-files as usual static files with special data-n-p tag, that is used in page transition logic. That files get removed on page transition cause they are not explicitly required in scope of page.
Mini-css-extract-plugin adds style tags at chunk insertion without any tags and leave them be, no matter how many page transitions were made.
I removed data-n-p tag from dynamically loaded css module files and added new data-n-d tag for it.
Fixes#16950
This makes sure we don't incorrectly strip locale characters from the path if it is not a locale prefix e.g. `/fr` should not be removed from `/frank`. Additional tests have been added to ensure this isn't stripped for this case.
Fixes: https://github.com/vercel/next.js/issues/18332
When visiting a non-locale prefixed path (`/hello` instead of `/fr/hello`) we don't trigger locale redirects currently so if another locale is matched we need to ensure this is reset to the `defaultLocale` for rendering to prevent a mis-match on the client and the server.
This also fixes hydration errors from occurring with `asPath` for `getServerSideProps` pages due to `normalizeLocalePath` expecting only a pathname and `asPath` containing `hash` and `query values also.
Fixes: https://github.com/vercel/next.js/issues/18337
Fixes: https://github.com/vercel/next.js/issues/18510
This adds support for passing `statusCode` in a `redirect` from `getServerSideProps` or `getStaticProps` which matches the `redirect` shape allowed to be returned for `redirects` in `next.config.js`
Closes: https://github.com/vercel/next.js/issues/18350
Older versions of Safari (and other browsers) do not support webp format so we were incorrectly falling back to png.
This PR fixes#18509 so that we fallback to the original image format if a modern format like webp was not explicitly provided in the Accept header.
Tests were added to ensure that the Accept header for Safari, Firefox, and Chrome work properly.
