Just a small change to recently merged PR; for some reason `import couchbase from 'couchbase'` is not working correctly when I use create-next-app to bootstrap with the `with-couchbase` example, despite initially working within my local next.js directory. The wildcard import fixes that issue. Thanks!
## Documentation / Examples
- [x] Make sure the linting passes
## 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
- [x] Make sure the linting passes
This adds a simple `with-couchbase` example app complete with a check for successful connection (in `index.js`).
**Note:** To check the connection, this application runs a simple KV GET operation with a key that does not exist and expects a response of `document not found`. Any other response indicates a failure to connect.
Thank you!
* Add ci script to check examples
* Install moreutils for `sponge` command.
It's not very pretty, but I'm not sure how to replace sponge in a good way in the shell script
* Prettier names in the workflow
* Move "check-examples" into build_test_deploy workflow
* Start breaking the jq script into multiple lines
* Add checks for cleanups in vercel/next.js#27121
* Run the `check-examples.sh` script to cleanup all remaining examples.
* Add licences to all example/package.json that lack them
* Revert "Add licences to all example/package.json that lack them"
This reverts commit 5d4e25012f7334772b8ef5924bc355277e827cba.
* Update check-examples to remove `license` field from examples
* Remove `license` from all examples.
This was mentioned in vercel/next.js#27121 but it looks like it didn't end up being in the merge?
Co-authored-by: JJ Kasper <jj@jjsweb.site>
## Documentation / Examples
- [X] Make sure the linting passes
This adds an example using Jotai with Next.js. It uses the new hook `useHydrateAtoms` to hydrate atoms with values from the server.
* Only copy .gitignores to examples that are actual packages.
`custom-server` is just a `.md` redirecting users to the documentation.
* Add .gitignores to examples that lack them
Hello! I was using `npx create-next-app --ts` to quickly bootstrap a basic next.js project with Typescript. It bothered me that I got git diff just from running `npm run build` inside the project, because the new notice in the `next-env.d.ts` file.
So I went ahead and updated the `next-env.d.ts` file in [`packages/create-next-app/templates/typescript`](fb67ce9864/packages/create-next-app/templates/typescript/next-env.d.ts) to be exactly how the file looks after running once. (7417ecc09c)
Then I realized that I could probably do the same for all the `next-env.d.ts` that are spread out in the many examples, to make running those examples after cloning them feel a bit smoother. (fb67ce9864)
> However I skipped the [`with-typescript-graphql`](40f85f6d95/examples/with-typescript-graphql) example since that [`next-env.d.ts`](40f85f6d95/examples/with-typescript-graphql/next-env.d.ts (L4-L9)) actually has changes and I couldn't even run `yarn build` in that example, so I'm not sure what will happen with the `next-env.d.ts`. Someone who _gets_ that example will have to fix it I suppose.
Update the `check-exampels.sh` script to also ensure all examples has `private: true` (763d9979f7)
Update exampels (1) that did not have `private: true` (bcdc4a3ae0)
This PR adds a with-cypress example to match the examples in upcoming docs.
## Documentation / Examples
- [ ] Make sure the linting passes
**Note:** This PR does not pass linting because ESLint needs to have the [eslint-plugin-cypress](https://github.com/cypress-io/eslint-plugin-cypress) installed globally to ignore the Cypress methods.
## Documentation / Examples
- [x] Make sure the linting passes
This PR updates our current with-jest example to match the examples in upcoming docs, add module alias configuration and be more consistent with Jest conventions.
## 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
- fix `with-fauna` example to populate client secret properly when auto-deploy on changes happens
- improve security by avoiding usage of the `FAUNA_ADMIN_KEY` in the application, now it's used in the setup script only
* Add joi and next-joi example
* Add more README information
* Update examples/with-joi/package.json
Co-authored-by: Lee Robinson <me@leerob.io>
* Update all dependencies to latest
Co-authored-by: Lee Robinson <me@leerob.io>
Based on https://github.com/vercel/next.js/pull/26708
- Renames FaunaDB -> Fauna
- Moves to Tailwind instead of bespoke styling
- Use SWR instead of hand-rolled fetch wrapper
- List/Create API for Guestbook
- Preps for setting correct environment variables from Vercel integration
`getAllPostsWithSlug` was missing an `await` on `fetchAPI`, resulting
in `data?.allPosts` always returning `undefined`. This meant SSG wasn't
aware of the paths it needed to generate.
I was trying to run the demo locally and found out that the create user function was missing, so I added it!
## Documentation / Examples
- [ ✔ ] Make sure the linting passes
`react-is` dependency was [dropped](8165cbe994) as part of `styled-components@v5`.
(I don't know which checkbox to check)
## 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
* add locale switcher to dynamic GSP page in i18n-routing example
* Apply suggestions from code review
Co-authored-by: JJ Kasper <jj@jjsweb.site>
* Add switcher to other pages as well
Co-authored-by: JJ Kasper <jj@jjsweb.site>
* Fixed typo and error when using Auth0 service;
`Allowed Web Origin` on Auth0 is now required to be set to `http://localhost:3000`
* lint-fix
Co-authored-by: JJ Kasper <jj@jjsweb.site>
## Bug
- [x] Related issues linked using `fixes #number` fixes https://github.com/vercel/next.js/issues/27290
- [ ] 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
- [x] Make sure the linting passes
## Documentation / Examples
- [x] Make sure the linting passes
In line with the PR #27297 which solved issue #27252, this updates the example to also use named functions in order to pass ESLint
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
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`
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
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
Hey guys!
Some time ago I used the `with-grommet` example to start a project and I ran into some issues because of the styled-components version. I tried to use some new features and it didn't work as I expected, then I noticed the styled-component version was the `v4`. When I bumped the version it started to work. I am bumping all the styled-components versions on examples because some people may run into the same issue.
## 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
remove `alwaysStrict: true` rule from tsconfig.json in with-typescript example, because the rule is included in `strict: true` has been already written in tsconfig.json and other included rules such as `noImplicitAny: true` have not been written.
[tsconfig documentation link](https://www.typescriptlang.org/tsconfig#alwaysStrict)
## Documentation / Examples
- [x] Make sure the linting passes
- Fixed the missing prop `components` to `<MDXRemote/>`.
- Added a `defaultComponents` and `source` mdx to provide more clarity on the example.
## Documentation / Examples
- [x] Make sure the linting passes
## Changes
- Removes `mockServiceWorker.js` file and ignores it from Git. New versions of `msw` generate the worker script automatically at the location specified in `packageJson.msw.workerDirectory`. This keeps the worker script up-to-date with the currently installed version of `msw`.
- Updates `msw` package to the latest version for new features and stability improvements.
## 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
## Documentation / Examples
Kontent CMS went through the UI redesign - <http://new-ui.kontent.ai/>.
* I am updating the example screenshots.
* \+ one fix of the URL in README.
- example was submitted by me in #16034
- [x] Make sure the linting passes
This change fixes the issues with the PatternFly example showing how to
use PatternFly 4 in conjunction with Next.js:
1. next-transpile-modules has been updated to 7.2.0, which adds support
for Global CSS imports used by PatternFly 4. This eliminates the
custom Webpack modification that were necessary previously.
2. All dependencies have been updated to the latest version.
3. Documentation has been updated to include troubleshooting steps.
Addresses #20916
It's a change to the package.json file to update the supertokens-auth-react version. The changes in this version are:
- How supertokens session works in the context of an iframe
- Dependencies of supertokens-auth-react now use a `^`
--------
One more change is to do with how the redirection works in the demo app in case of session expiry or if a user clicks on signout.
## Changes
- Update dependencies
- Use new `useAnimations` hook
- Remove next-transpile-modules in favour of drei
- Refactor Components
- Remove dynamic import
- Enable webpack5 (by removing `next.config.js`)
- Removed missing key warning
## 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
This example currently fails to build with the error:
```
-> % yarn build
yarn run v1.22.10
$ next build
warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://nextjs.org/docs/messages/react-version
info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
Failed to compile.
./components/alert.tsx:2:16
Type error: Could not find a declaration file for module 'classnames'. '/Users/mike/workspace/blog/node_modules/classnames/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/classnames` if it exists or add a new declaration (.d.ts) file containing `declare module 'classnames';`
1 | import Container from './container'
> 2 | import cn from 'classnames'
| ^
3 | import { EXAMPLE_PATH } from '../lib/constants'
4 |
5 | type Props = {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
As of [`v2.3.1`](https://github.com/JedWatson/classnames/blob/master/HISTORY.md#v230--2021-04-01), the `classnames` package started providing its own types, so the `@types/classnames` package [became a stub](https://unpkg.com/browse/@types/classnames@2.3.1/). We get the error because the `classnames` version is pinned to the old, type-less version, while `@types/classnames` picked up the new stubbed version.
Removing `@types/classnames` and updating `classnames` to the latest version fixes the build error.
## 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
The [official Sentry Next.js SDK](https://docs.sentry.io/platforms/javascript/guides/nextjs/) is now the recommended choice to use with Next.js, instead of the previous workarounds. This PR updates the example, which now uses the SDK.
..to use new zustand/context module from zustand 3.5.0. Also fixed code for merging states on client-side navigation.
## Documentation / Examples
- [x] Make sure the linting passes
Unfortunately I couldn't push up changes for that branch as maintainers access was disabled.
Closes#18775
## 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 PR re-includes ESLint with some notable changes, namely a guided setup similar to how TypeScript is instantiated in a Next.js application.
To add ESLint to a project, developers will have to create an `.eslintrc` file in the root of their project or add an empty `eslintConfig` object to their `package.json` file.
```js
touch .eslintrc
```
Then running `next build` will show instructions to install the required packages needed:
<img width="862" alt="Screen Shot 2021-04-19 at 7 38 27 PM" src="https://user-images.githubusercontent.com/12476932/115316182-dfd51b00-a146-11eb-830c-90bad20ed151.png">
Once installed and `next build` is run again, `.eslintrc` will be automatically configured to include the default config:
```json
{
"extends": "next"
}
```
In addition to this change:
- The feature is now under the experimental flag and requires opt-in. After testing and feedback, it will be switched to the top-level namespace and turned on by default.
- A new ESLint shareable configuration package is included that can be extended in any application with `{ extends: 'next' }`
- This default config extends recommended rule sets from [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react), [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), and [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next)
- All rules in [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next) have been modified to include actionable links that show more information to help resolve each issue
fixes#24401
Simply bumping `swr` to the latest version seems to fix the issue. 🥂
Couldn't find a consistent pattern across the examples, but most examples are flexible with swr version and use the semver caret.
Very standard use of the useSWR hook is there in the example with nothing obviously version specific.
Hi folks I know many people that use that example and it could be using the new version of React to be according with the NextJS v11
## Documentation / Examples
- [ ] Make sure the linting passes
- [ ] Make sure that the bumped up versions are okay
According to the official Next.js documentation on [Environmental Variables](https://nextjs.org/docs/basic-features/environment-variables):
> `process.env` is not a standard JavaScript object, so you’re not able to use object destructuring. Environment variables must be referenced as e.g. `process.env.NEXT_PUBLIC_PUBLISHABLE_KEY`, not `const { NEXT_PUBLIC_PUBLISHABLE_KEY } = process.env`.
<!--
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:
-->
## 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
- Update the Readme to use the latest Amplify CLI versions' prompts
- Update the example to use the [SSR features of AWS Amplify ](https://aws.amazon.com/blogs/mobile/ssr-support-for-aws-amplify-javascript-libraries/)
- Update to use Next version `10` instead of `9`
- Correctly use the types produced by the Amplify CLI in `API.ts`
- Add `amplify auth` and auth rules to the GraphQL model as suggested by the Amplify CLI.
## 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
The predev npm script assumes that vercel cli is installed. It's better for the example to run without it.
## 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
- 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
This PR adds an example for using Next.js with [Reflexjs](https://reflexjs.org).
Thank You
## Documentation / Examples
- [x] Make sure the linting passes
1. Logout is better called in a POST request (avoids caching in most situations + avoids weird CSRF "logout attacks", i.e. can't be logged out by clicking on an email link)
2. We should wait for logout to complete before mutating the user, otherwise some weird race conditions might prevent swr to catch the right logged out state
Remove clock and notes features to be consistent with `with-redux-toolkit` example, add unit test with Jest
## 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 - No, I get hundreds of unrelated errors like:
```
build/babel/plugins/next-page-config.ts(8,28): error TS2307: Cannot find module 'next/types'.
build/entries.ts(11,32): error TS2307: Cannot find module '@next/env'.
build/index.ts(1,31): error TS2307: Cannot find module '@next/env'.
build/index.ts(9,10): error TS2305: Module '"next/dist/compiled/nanoid/index.cjs"' has no exported member 'nanoid'.
```
Re: https://github.com/Automattic/mongoose/issues/9987, the current Mongoose example doesn't do a good job of persisting state between hot reloads. Not sure why Lambda doesn't keep the same `import mongoose` between reloads, but it doesn't seem to. This approach lines up more closely with [Mongoose's Lambda docs](https://mongoosejs.com/docs/lambda.html) and the existing `with-mongodb` example.
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?
The with-rebass example was using an outdate version of rebass(v1) which was throwing all sorts of deprecated warnings in the terminal, I've bumped up the version to the latest(v4) and made necessary changes to index.js page to keep it working.
If there is any issue, or some additional work needed, I am absolutely open to help.
Love the next.js framework and work you guys are doing ✌.
## Bug
Fixes#23293.
Problem was that `styled-jsx-plugin-sass` was used instead of `@styled-jsx/plugin-sass` so it didn't work.
You can refer to the issue that is linked for more info.
## 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
- [x] Make sure the linting passes
This PR updates `example/with-electron`:
- Updates electron to version [12 (latest stable)](https://www.electronjs.org/releases/stable#12.0.2)
- Introduces the new `contextBridge` to increase security ([docs](https://www.electronjs.org/docs/api/context-bridge))
## 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
Within the "with-reason-relay" example:
- Redirect from NextJS-routed root route to reason-compiled home
## Bug
- [x] Related issues linked using `fixes #23607 `
- [ ] 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.
- [x] Related issues linked using `fixes #23607 `
- [ ] 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
I don't believe NodeJS code should receive Bash syntax highlighting :).
## 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
- [ ] Make sure the linting passes
## Documentation / Examples
- [x] Make sure the linting passes
***
Related to #23607
We should use `NEXT_PUBLIC_` as [stated here](https://nextjs.org/docs/basic-features/environment-variables) to expose environment variables to the browser.
The code was already using the correct variables name.
## 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
- [ ] Make sure the linting passes
The `with-glamor` package has been unmaintained for 4 years now.
This updates to use the new `fallback` rewrites support instead of the previous no-op rewrite workaround.
## Documentation / Examples
- [x] Make sure the linting passes
The underlying package [style-sheet](https://github.com/giuseppeg/style-sheet) has been archived, and the example doesn't currently work, so I think it's better deleted. Closes part of issue #23607
## Documentation / Examples
- [x] Make sure the linting passes
The package `next-plugin-preact` [already contains](38cfb182dd/packages/next-plugin-preact/package.json (L25)) the dependency `@prefresh/next` so it shouldn't be explicitly installed.
## Documentation / Examples
- [x] Make sure the linting passes
## 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
- [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
- [x] Make sure the linting passes
Hey 👋
I realise neither I or you want to keep reviewing and merging these "Update Stitches" PRs
So I'm setting it to the `latest`.
Thanks (and sorry)
## Documentation / Examples
- [x] Make sure the linting passes
Hello this PR is in order to update xstate to the lastest version and use the `createMachine` method instead of `Machine`.
I also added the inspect mode in order to show how we could use into a next.js app.
## Documentation / Examples
- [x] Make sure the linting passes
This pull request add typescript to the current redux-toolkit example on next.js. @markerikson suggested this nice idea to add a ts example: https://twitter.com/acemarke/status/1370877104527712259?s=20
This example is with the previous redux-toolkit example which was more complex. An example with the current example is available here: https://github.com/vercel/next.js/pull/23249
## 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 Pull Request makes [`@tailwindcss/jit`](https://github.com/tailwindlabs/tailwindcss-jit) the default engine for Tailwind CSS.
It has the following advantages:
- Lightning-fast build times because the CSS is generated on demand.
- Every variant is enabled out of the box.
- Generate arbitrary styles without writing custom CSS.
- Better performance in browser dev-tools.
I have added a new section to the `with-redux-toolkit` example on setting up Typescript with Redux Toolkit and React-Redux.
It links the redux toolkit documentation and Next.js documentation on adding Typescript to a Next.js project.
I have simplified the `with-redux-toolkit` example and changed the directory structure to "feature folders". I have removed the `notes` page and API route as it wasn't directly related to the redux toolkit. This example is also identical to the official [cra redux template](https://github.com/reduxjs/cra-template-redux). All the dependencies have also been updated.
