- Closes#23328
- Related to #19914
- Related to #22319
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see `contributing.md`
The right terminology should be used so we don't learn new developers wrong facts.
Using pure function here is plain wrong, the definition of a pure functions is as follows:
> The function return values are identical for identical arguments. The function application has no side effects.
What you have here both have side effects, the calls to `res.setXXX`, and it isn't identical for identical arguments since you have `Date.now()`.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes
- Helps clear up customer confusion about how to share React state with layouts, including nested layouts
- Provides guidance on best practices before shipping your application to production
Open to any feedback!
Fixes#27094
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes
Since we are no longer accepting new built-in loaders, users may wish to use a different cloud provider.
So this PR renames `dangerously-unoptimized` to `custom` to handle this case as well as the intention of `next export`.
If the user doesn't add a `loader` prop, we throw an error.
If the user adds a `loader` prop but it doesn't return the width, we print a warning.
- Follow up to #26847
- Fixes#21079
- Fixes#19612
- Related to #26850
Improve typing for use with Typescript example
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [X] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [X] Make sure the linting passes
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
## Why the change
I lost quite a few hours figuring out why my environment variable was `undefined` in the browser.
I read about the built-in support and was like: "Oh nice" and didn't read much further. I missed the part about how you need to prefix your variables with `NEXT_PUBLIC_` in order to expose them to the browser.
I think a hint to this in the anchor link to that section will make it more discoverable as it's then mentioned near the top and will save people who are like me some time and a headache.
This adds a new prop, `onLoadingComplete()`, to handle the most common use case of `ref`.
I also added docs and a warning when using `ref` so we recommend the new prop instead.
- Fixes#18398
- Fixes#22482
This ensures we don't recommend editing the `next-env` file since we need to be able to tweak it to accept future types we add in Next.js
## Documentation / Examples
- [x] Make sure the linting passes
Closes: https://github.com/vercel/next.js/issues/26533
Without `module.exports`, the provided code won't work if just pasted into `next.config.js`
## Documentation / Examples
- [x] Make sure the linting passes
This adds a note to the router doc explaining that page state is not reset by default when updating the URL but staying on the same page as this has come up in a few issues.
## Documentation / Examples
- [x] Make sure the linting passes
x-ref: https://github.com/vercel/next.js/issues/26270
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Incorporates some of the feedback we've had about this doc.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
It was mentioned in Issue #18858 that we might add a `placeholder="skeleton"` but that didn't ship with Next.js 11 because it would likely need to handle additional config such as light mode / dark mode, speed, duration, etc.
So this PR adds an example of `blurDataURL` usage with a nice shimmer animation (sometimes called a skeleton).
- Step for installing the latest next version was missing
- Turned "Upgrade React version to latest" to an h3 heading
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Noticed a few things off in the Script docs—for example, the "before" variant should show using a non-React Component `<script>` tag, & the capitalization was inconsistent in a few places.
## Documentation / Examples
- [x] Make sure the linting passes
* Update image documentation for static image
Adds documentation for static image and blurry placeholder functionality
* Update docs/api-reference/next/image.md
Co-authored-by: Steven <steven@ceriously.com>
* Update docs/api-reference/next/image.md
Co-authored-by: Steven <steven@ceriously.com>
* Update docs/api-reference/next/image.md
Co-authored-by: Steven <steven@ceriously.com>
* Update docs/api-reference/next/image.md
Co-authored-by: Steven <steven@ceriously.com>
* Version history and placeholder revisions
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
* lint-fix
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This PR updates the Learn path in the getting started and from Create React App docs.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
- Enables excludeDefaultMomentLocales by default
- Adds distDir cleaning (See RFC #6009)
- Adds support for `PORT`
- Removes `router.events` from the server-side router as it should not be used server-side (long-standing todo that is potentially breaking). Note that it's still available as `Router.events` (import Router from 'next/router') and with `useRouter` in `useEffect`. Using it with `useEffect` is the correct way and I've updated the upgrading guide to reflect that
- Added webpack 5 to the upgrading guide
- Removed `Head.rewind` as it's been a no-op since Next.js 9.5 and can now be safely removed from user code
Fixes#11408Fixes#10338Fixes#5554
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Since #24655 landed in 10.2.1, I wanted to update the documentation, especially for the top Google results for "next typescript", so that users know how to create a TS project.
Please feel free to change anything you feel is appropriate.
This mentions the experimental create react app transform to the codemods doc including the feedback link while it is experimental.
## Documentation / Examples
- [x] Make sure the linting passes
* docs: use descriptive links instead of "click here"
Linking text such as "here" or "click here" is not accessible (and
doesn't look that great either). The best example of why it's better to
use link text that provides context is that some screen readers allow
navigation by links alone. If all links say "click here", then how does
the user know which one to go to?
I tried to make the minimal change necessary to make the link text
descriptive but had to reword a few sentences that didn't read well.
* Apply suggestions from code review
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
1. Stable version of TypeScript 4.3 just released, replaced beta version tag with stable version v4.3.2.
2. Add reference article explaining about the performance improvement.
## Documentation / Examples
- [x] Make sure the linting passes
* Remove deprecated features
In the next major version we'll want to merge this PR that removes some of the long-time deprecated features, it'll have a positive effect on bundle size.
* Update tests
* Update tests
* Change unsized to layout=fill in test
* Update sizes
* Update rotation test
* Update size limit test
* Update test
* Update test
* Update test
I've been working on adding CDN support to my Next.js app and was very surprised to find that the `assetPrefix` did not turn `/_next/static/chunks/sha.js` into `$assetPrefix/chunks/sha.js`, but instead `$assetPrefix/_next/static/chunks/sha.js`. Hopefully this change to the documentation will make this behavior much more clear to future users.
I've also incorporated a warning against uploading the entire `.next` folder to a CDN, as I saw @timneutkens note in a discussion here: https://github.com/vercel/next.js/discussions/11622#discussioncomment-3779
## Documentation / Examples
- [ ] Make sure the linting passes
In general this means you did something wrong in your application (importing tests for example), so this should be fixed in the app, not using custom config.
This makes sure to mention the default revalidate value is `false` or to not revalidate since it previously only mentions it's optional.
## Documentation / Examples
- [x] Make sure the linting passes
When I first read the documentation about the `layout` property, I wondered how to apply the `object-fit` css property to the `Image` component. I think it makes sense to mention its `objectFit` property at this point.
## Documentation / Examples
- [x] Make sure the linting passes
This PR changes the `GetServerSidePropsResult` type to require that it returns a `props` object. The docs mention it's required even for a redirect/notFound, and it throws and error if it's not returned.
From the docs:
> props - A required object with the props that will be received by the page component. It should be a serializable object
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This updates the beforeFiles rewrites note to mention the rewrites can affect `_next` files which are required for loading pages client-side.
## Documentation / Examples
- [x] Make sure the linting passes
Updates an old message in the docs that caused some confusion here: https://github.com/vercel/next.js/issues/24904#issuecomment-837086983
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This fixes an infinite redirect in the `has` redirect examples by ensuring not to match the redirect destination itself
## Documentation / Examples
- [x] Make sure the linting passes
Based on user feedback, this clarifies the difference between rewrites and redirects, as well as follows the new pattern for showing version history with a collapsible table.
The guides for `next.config.js` never specify that the `has: { }` syntax is only available for v10.1, and not for v10.0. Add a note that indicates these features are only available in the latest version.
## Documentation / Examples
- [x] Make sure the linting passes
This updates this initial PR here https://github.com/vercel/next.js/pull/18146 to resolve merge conflicts and updates tests since we aren't able to update that PR itself.
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
Closes: https://github.com/vercel/next.js/pull/18146
The docs were vague on this -- `router.asPath` mentions that it doesn't include `basePath` but `router.pathname` didn't say either way.
## Documentation / Examples
- [ ] Make sure the linting passes: I haven't checked; I presume you have a CI bot for this.
- Since SuperTokens is a self hosted solution, it can be added to 'Bring Your Own Database' as well (in https://nextjs.org/docs/authentication#supertokens)
- Improvements to code structure in the with-supertokens example
added the following line, to remove the size of the `runner` (production) image. This will remove the `devDependencies` from the container after `next build` completes.
```
yarn install --production --ignore-scripts --prefer-offline
```
For the typescript starter, this is the change in size
| before <br/>proposed change<br/>size in bytes | after <br/> proposed change <br/> size in bytes|
|----|---|
| 347MB | 176MB |
As far as I know `notFound` supports use cases like a post getting permanently removed from CMS (thus should not exist on the webpage anymore) without a redeploy.
If the above statement is correct I believe this should be mentioned in the docs as it seems like a common use case and quite a few questions about this are floating around in the GitHub Discussions too.
I've recently built an i18n library that is tailored to usage in Next.js: [next-intl](https://github.com/amannn/next-intl). It complements the internationalized routing capabilities of Next.js by managing translations and providing them to components, as well as handling date and time formatting. It's a bit young, but I'm using it in two production apps now and I'm quite confident in the library.
Would you want to include an example and link to it?
Non-interactive elements such as a `<span>` should not have event bindings as they are not accessible by everyone.
This fix solves this issue by replacing it with a `<button>` which is suitable for interaction.
Since a button defaults to `type="submit"` the button also explicitly has a `type="button"` to prevent accidental form submits (all examples aim to navigate, not to submit a form).
[More background on this a11y best practice](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/no-static-element-interactions.md)
This updates the incremental adoption section in the rewrites docs to mention the new fallback rewrites instead of the no-op rewrite and also points to the incrementally adopting Next.js doc.
## Documentation / Examples
- [x] Make sure the linting passes
Closes: https://github.com/vercel/next.js/pull/23700
Closes: https://github.com/vercel/next.js/issues/23699
It took me quite a while to understand that in order to redirect from `/english(default)/:path` to `/en-us/:path`, I have to escape the parentheses in the source with double backslashes so I thought I'd suggest it as a small doc update.
## Documentation / Examples
- [x] Make sure the linting passes
