Add safety check for `CoverImage` in `/components/post-preview.js` so as to prevent error occurring in the absence of cover image for on posts listed for preview - fixes#23742.
Clean up package.json files in the `examples` directory:
- Add `private: true`
- Remove `version` (because they are irrelevant for packages that are not meant to be published)
- Remove `name` (because they are optional for packages that are not meant to be published, and when someone clones an example, they often rename it and the property becomes stale)
- Remove `author`
- Remove `description`
- Remove `license`
Also remove `with-dynamic-app-layout` example completely, since it does the same as `layout-component` (https://github.com/vercel/next.js/pull/27121#discussion_r668178408).
## Documentation / Examples
- [x] Make sure the linting passes
- Simplifies setting up a Strapi project by using the following template: https://github.com/strapi/strapi-template-next-example
- Adds seed data
- Fixes a broken link on the cover image
- [x] Make sure the linting passes
I think the issue was due to ```nextjs-auth0``` package on version ```0.8.0```. Upgrading to latest version ```1.4.2``` resolve the issue.
## Bug
- [x] Related issues linked using `fixes` https://github.com/vercel/next.js/issues/19313
## 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
- [X] Related issues linked using `fixes #26713 `
## 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
## Screenshots
After this small change the warning disappears.
* Add link to live demo already hosted
To make it easier for people to simply see the live example without having to deploy a whole new project
* update link
Co-authored-by: JJ Kasper <jj@jjsweb.site>
## Documentation / Examples
- [X] Make sure the linting passes
This PR updates the with-loading example to follow the documentation of router events for next 11
## Documentation / Examples
- [x] Make sure the linting passes
Fixes#26436
As mention in #25854 `with-webassembly` example doesn't work anymore after switching to webpack 5.
This PR adds webpack experimental configuration.
## Documentation / Examples
- [x] Make sure the linting passes
Changes in readme.md:
The path to the example in ```create-next-app``` command was incorrectly specified as ```api-routes``` by the example author.
Fixed this value to ```api-routes-rate-limit``` as well as app name to ```api-routes-rate-limit-app``` make this consistent with other examples.
No other changes made to 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
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
npm i wasn't working because of outdated version of react-test-renderer.
## 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
[With next 11 requiring react 17](https://nextjs.org/blog/next-11#upgrade-guide), most of the examples
need to be updated, so the following snippet updated all the examples to
a compatible react version.
```bash
cd examples/
fd -g 'package.json' | xargs sed -r -i 's/"react": ".*"/"react": "^17.0.2"/
fd -g 'package.json' | xargs sed -r -i 's/"react-dom": ".*"/"react-dom": "^17.0.2"/'
# exclude experimental react version
git checkout with-reason-relay/package.json
```
## Documentation / Examples
When I create a new application using Next.js and use `jest` or `react-testing-library`, I get the following error.
```
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.
ReferenceError: document is not defined
```
This is because `jest-config` changed the default testing environment to node in 27.0.
> `jest-config@27.0.0` default to Node testing environment instead of browser (JSDOM) (#9874)
Raised the jest version of `with-typescript-eslint-jest` to 27.0 to make it pass the test.
- [x] 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).
Greetings.
As per the [documentation](https://nextjs.org/docs/basic-features/environment-variables), we should not treat process.env as a Javscript Object & cannot destructure variables out of it. This PR avoid destructuring of environment variables in the `with-mongodb` 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
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
## Documentation / Examples
- [x] Make sure the linting passes
Just updated `next-transpile-modules` across examples. We shipped a workaround in 7.2 for the one breaking change that scared people from updating from v4 to v5+, I tested the updated examples, so we should be good.
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
## 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
