This documents the request query passing behavior of redirects to help avoid confusion.
## Documentation / Examples
- [x] Make sure the linting passes
Closes: https://github.com/vercel/next.js/issues/27194
This PR adds `lazyBoundary` prop on Image Component.
This feature is to load the images earlier.
I'm not good at English. So, I couldn't explain enough in the documentation what `lazyBoundary` is.
Feature request: https://github.com/vercel/next.js/discussions/24552
## Feature
- [x] 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.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes
With the default Next.js template project, the .main and .container divs have `display: flex` style rule. However, as commented in [this issue](https://github.com/vercel/next.js/issues/18489#issuecomment-857146988), if may not display properly an <Image /> placed as direct child.
## Documentation / Examples
- [x] Make sure the linting passes
* Add extra explanation to next/image about positioning
In my experience, when using next/image, a lot of devs forget about the `position: relative` when using `layout: fill`. I think it's a small and effective change to implement this one line to make it more clear.
* Update docs/api-reference/next/image.md
* lint-fix
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This expands on https://github.com/vercel/next.js/pull/27211 and lists the full routes order used in Next.js to allow more exact matching when leveraging the different rewrite priorities.
## Documentation / Examples
- [x] Make sure the linting passes
This adds a note explaining that `beforeFiles` continue instead of checking the filesystem/dynamic routes immediately like they do in `afterFiles` and `fallback`.
## Documentation / Examples
- [x] Make sure the linting passes
Closes: https://github.com/vercel/next.js/issues/26795
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 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
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).
* 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>
- 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.
* 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
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.
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 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
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.
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
Added the fact that when `prefetch` is set to `false`, Next will prefetch the link when an `onMouseEnter` is triggered. Response to issue #11793
## 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
Closes: https://github.com/vercel/next.js/issues/23525
This is a follow-up to https://github.com/vercel/next.js/pull/23588 to update to use a regex lexer to gather the named regex groups instead of attempting to gather them through executing the regex since it can fail to gather the regex groups when they are using specific matching. This also ensures we don't pass the value as a segment when value is defined and it doesn't use a capture group. Additional tests are added to cover these cases and documentation updated to reflect this.
Closes: https://github.com/vercel/next.js/issues/23415
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
## Documentation / Examples
- [x] Make sure the linting passes
This updates the incremental migration doc to mention the new fallback rewrites over the previous no-op rewrite behavior. This also mentions the version the new rewrites modes were added to the rewrites doc.
## Documentation / Examples
- [x] Make sure the linting passes
This adds a note the `has` documentation mentioning the feature is still experimental as we currently show a warning when the feature is used stating the same.
## Documentation / Examples
- [x] Make sure the linting passes
Fixes#23687
## Bug
- [x] 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
This pull request **temporarily** removes ESLint, as it was not landed in accordance with our standard experimental policies. We are fully committed to landing this change again.
This is being reverted because:
- Next.js has very strict goals for its install size. This feature resulted in adding over 17MB, or a 43.6% increase.
- The feature was not first landed under the `experimental` key in `next.config.js`, rather, it was added under the stable namespace (top-level)
- Using the feature doesn't do a "guided setup" like TypeScript, it should ask you to "bring your own" dependencies for ESLint
- It uses a undesirable ESLint plugin name: `plugin:@next/next/recommended`. This should read out as strictly `next`, or as short as we can get it.
- Does not provide actionable warnings (missing link to resolve issue)
- Does not follow appropriate console output styling. We need to revisit how these are presented.
To re-land this, we need to ensure the following minimums are met:
- Very minor change in install size
- Fully experimental (i.e. flagged) with warnings
- Finalized package name and configuration shape, preferably so we can do ` { extends: 'next' } `.
## Documentation / Examples
- [x] Make sure the linting passes
`router.pathname` can be dynamic routes like `/posts/[slug]`, use `router.asPath` instead to detect anchor is active
This adds support for returning an object from `rewrites` in `next.config.js` with `beforeFiles`, `afterFiles`, and `fallback` to allow specifying rewrites at different stages of routing. The existing support for returning an array for rewrites is still supported and behaves the same way. The documentation has been updated to include information on these new stages that can be rewritten and removes the outdated note of rewrites not being able to override pages.
## 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`
- [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
This adds support for a `has` field to `rewrites`, `redirects`, and `headers` to allow matching against `header`, `cookie`, and `query` values. Documentation and additional tests for the feature is also added in this PR.
Closes: https://github.com/vercel/next.js/issues/22345
For #22228
This PR:
- Adds ESLint to toolchain
- Included by default for builds (`next build`)
- Can be enabled for development (`next dev`)
- Custom formatter built for output
- Adds appropriate tests
- Adds two documentation pages
- `scroll` - Optional boolean, controls scrolling to the top of the page after navigation. Defaults to `true` and
- `scroll`: Scroll to the top of the page after a navigation. Defaults to `true`
as options for router.push
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
Building off [this Slack conversation](https://vercel.slack.com/archives/CGD3XGSD7/p1597329727013900), this PR adds a top-level section to the documentation on authentication patterns.
Please provide any and all comments! A few open thoughts I have:
- ~Should this include code snippets from the related providers or stay very high-level? At what point do we delegate to the examples folder?~ Keep things high level and delegate to examples folder
- ~Should this include any related cards at the bottom?~ Added to the bottom
- ~Should other places in the documentation link back to here?~ Added link from routing
- Should it be a top-level route, or be underneath advanced?
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)
To clarify what I've noticed as a common source of confusion in discussions online. Fixes https://github.com/vercel/next.js/issues/19426
If you wish to know whether the code is running as part of a client-side page transition, in either `getInitialProps` or `getServerSideProps`, you can check to see if `context.req.url` starts with `/_next/data`.
- Updated some links in docs that don't have the `.md` extension. Not required for our live docs but useful for the GitHub view.
- Updated links that go to https://nextjs.org/docs to a relative path, that way they'll work for versioned docs
- Updated the `Regex Path Matching` example to be consistent with the paragraph above and with the official example in /examples.
