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.
Add `Open in StackBlitz` button to `examples/with-redux-persist` and `examples/with-videojs`.
#### with-redux-persist
At first we though the example didn't work correctly in WebContainer because it shows the following message
> redux-persist failed to create sync storage. falling back to noop storage.
After investigating this, we saw the same message on local as well and is probably intended behaviour because of SSR. The example works, but it makes sense that it can't get the local storage on the server side and that's what causing the message.
#### with-videojs
The video's couldn't be played in the preview frame before. I fixed it on our end and thus also added the StackBlitz button.
## 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
- [x] Example(s) updated
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
Previously, we had an arbitrary delay of 1500ms but instead we can wait until decoding is complete.
Co-authored-by: Kristóf Poduszló <kripod@protonmail.com>
There are strict conditions for using `placeholder=blur` documented in #25949 but this will give the user a better understanding during `next dev` and links to the error.
- Error when `placeholder=blur` and no `blurDataURL`
- The Error for small images with `placeholder=blur` has been changed to a warning
- Added support for blurring a webp image
- Added error page linking to relevant docs
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
## Documentation / Examples
- [x] Make sure the linting passes
As mentioned in #25854 `with-urql` doesn't work. After investigation, I've found that Pokémon GraphQL server located at `https://graphql-pokemon.vercel.app` is down.
After some research I came across its repository and this [pull request](https://github.com/lucasbento/graphql-pokemon/pull/14). That pull request provides new URL `https://graphql-pokemon2.vercel.app` which seems to work.
I don't know the status of this server, maybe @leerob can confirm this PR is ok.
Some fairly minor changes to the image-component example app. Switches all instances of images from `/public` over to use static images and adds a page with an example image with blurry placeholder enabled.
* Updated Readme
Split the copying instruction into separate code sections as any one of the command is used and Its easier to copy individual commands .
* lint-fix
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
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] 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>
Add `Open in StackBlitz` button to `examples/with-mobx-state-tree-typescript` now that it was fixed in #25589.
## 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
- [x] Example(s) updated
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
* Add delay to placeholder removal
* Increase jest timeout for image tests
* Use check instead of immediately expecting the result
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Fixes one of the items that was mentioned in #25854.
It fixes the warning in `with-next-page-transitions` by moving the viewport tag to `_app.js` from `_document.js`
Previously we were accepting a `s=1` query string parameter for static imports, but this is not necessary.
Instead, this PR looks at the file path to determine if the header should be `immutable`.
The nice thing here is we don't need to worry about someone trying `s=1` with an external image or 3rd party loader. In that case, we use the upstream `Cache-Control` header as usual.
This change also ensures we don't add the `immutable` header for `next dev`.
Related to PR #24993
This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either.
Here's an example:
## 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
- [x] Examples updated
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
fixes [#21606](https://github.com/vercel/next.js/issues/21606)
### Description
When using shallow routing and wanting to scroll to top by setting the `scroll` option to `true` it didn't work. This PR fixes this issue.
This updates the with-iron-session example with:
- updated way to mutate + fetch (re: https://github.com/vvo/next-iron-session/issues/329)
- updated readme to include TypeScript example link
Requirements:
- [x] Make sure the linting passes
If you give a Static Image to the Image component, TypeScript will throw a type error. This Pull Request fixes it.
## Bug
- ~~Related issues linked using `fixes #number`~~
- [x] 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~~
---
follow-up #24993
cc @atcastle
