This updates to output server chunks to a nested folder to prevent bundling the entire folder when tracing. This also fixes the webpack 5 tests not actually using webpack 5 since https://github.com/vercel/next.js/pull/22583 since the webpack 5 enabling check didn't account for the test environment variable used to enable webpack 5. This also clears up some deprecation warnings from webpack 5 in the mini-css-extract-plugin.
Fixes: https://github.com/vercel/next.js/issues/21297
This avoids the warning when you init a new Next.js app with the example:
```
warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://err.sh/next.js/react-version
```
There are two examples, one (a) for "Authenticating Statically Generated Pages" and one (b) for "Authenticating Server-Rendered Pages".
(a) uses a sudo `useUser` hook to fetch the user client-side.
It looks like the example for (b) was copied and pasted then edited from (a), but in (b) this `useUser` hook is not used (instead using `req.session.get('user')`).
This PR simply removes the unused import in the (b) example.
Delete "prettier/@typescript-eslint" from .eslintrc.json.
After update to the last version I getting this error on running lint: ESLint couldn't find the config "prettier/@typescript-eslint" to extend from.
I explore this issue https://github.com/prettier/eslint-config-prettier/pull/175 and I think those extensions aren't needed anymore.
This pull request ensures the webpack hook is installed before an attempt is made to load the configuration.
This pull request is tested by the PnP tests, which should now be passing as a result of this change.
---
Fixes#21679
We do have a third argument on `processEnv` to customize the console instance, however `processEnv` relies on `processEnv` which also have the same argument for the same purpose but it's not forwarded from `processEnv`.
Was there a purpose for it to be left out ? If not I would expect it to be forwarded 😄
Closes: https://github.com/vercel/next.js/pull/21788
Fixes https://github.com/vercel/next.js/issues/21943
i confirmed in a personal test repo that this solves the issue of infinite 307s on root level non-default locales :) let me know what else this needs if anything! thanks for the time/help @ijjk ❤️
After testing the new docker deployment documentation, ran into the following error when running the container if you're using `next/image`:
```
[Error: EACCES: permission denied, unlink '/app/.next/cache/images/2+fKe4RlpMaSTNc8npKwiCItZgik9aOX9qkxnVSrsUo=/1613616499089.3hEMhfux5+SolMDEVHEaVPK2O0OlcLoYNao0yKpmYeg=.webp'] {
errno: -13,
code: 'EACCES',
syscall: 'unlink',
path: '/app/.next/cache/images/2+fKe4RlpMaSTNc8npKwiCItZgik9aOX9qkxnVSrsUo=/1613616499089.3hEMhfux5+SolMDEVHEaVPK2O0OlcLoYNao0yKpmYeg=.webp'
}
```
This change gives the user correct ownership to have the correct permissions.
This ensures `distDir` is set under `renderOpts` in `next-server` so that it is present when experimental `optimizeCss` is enabled.
x-ref: https://github.com/vercel/next.js/pull/16539
Currently, the image component doesn't handle use of the `sizes` property with `layout="fill"` and `layout="responsive"` very well for small viewports. It will never include sizes smaller than the smallest viewport (640px) in the srcset, so even if you specify `sizes="30vw"` in your image, you have to download the full-viewport-width image on small devices.
This PR adds logic such that if you use `layout="fill"` and include a `sizes` property, the image component will include the full range of image sizes in the `srcset`.
It also includes an optimization where it finds the smallest `vw` value in the sizes value and combines that with the smallest viewport width, and uses that as the floor of the srcset. It does this so it doesn't unnecessarily increase transfer size by including ALL sizes. This is still a conservative optimization--for 95% of cases, taking the _largest_ `vw` size would work, but I don't see a way to do that without breaking a few corner cases.
The case of a sizes prop with `px` values is fixed but not optimized--though generally that case is less of a good fit for the fill or responsive layout anyway.
This mentions how locale routes are transformed when `locale: false` is not used to explain why regex routes might not match with i18n.
Closes: https://github.com/vercel/next.js/issues/21507
This ensures we handle resolve rewrites during prefetching the same way we do during a client-transition. Previously if a rewritten source was used in an `href` neither the page bundle or SSG data if needed would be prefetched although would work correctly on a client transition.
Fixes: https://github.com/vercel/next.js/issues/22441
Update docker file example in deploy documentation to use correct working directory in builder stage. It will fail to copy files from that stage since it's attempting to copy files that don't exist.
Add a Docker Image section into the Deployment Documentation with an example and how to build and run it.
The example is a multi-stage docker image with node modules layer caching for faster builds in development and a result image just with the node_modules and build code needed to run the application within a custom user with restricted access.
The example contains a commented piece of code on how to disable telemetry as well.
This is useful for folks that are deploying to container orchestrators like ECS, Kubernetes (GKE, EKS, AKS) or Hashicorp Nomad, as well as just running a docker container in a single node in some cloud provider.
Follow-up to https://github.com/vercel/next.js/pull/22139 this ensures the default 500 error page hydrates with the correct `statusCode` prop when updating query values on the client since currently it will switch the 404 `statusCode` when one isn't present. An additional test case has been added to ensure this is handled correctly.
If the three dependency is upgraded to version 0.125.0 and upwards, the following errors occur:
- Compilation error: Attempted import error: 'Geometry' is not exported from 'three'.
- ReferenceError: Blob is not defined.
Solution:
Upgrade drei to `2.2.21`.
This adds generating a static 500 status page when a `pages/500.js` file is added similar to how we handle generating static 404 pages when `pages/404.js` is present. This allows showing a customized error page when a 500 error occurs in an optimal way.
Added port config variable to the migrate-db.js script and .env.local.example files. This allows users to set the port for remote databases like Digital Ocean that don't use the default port.