The [correct](https://www.grammarly.com/blog/et-cetera-etc/) way to use et cetera is to put a period right after and a comma behind it if it's being used as a list. I updated the occurrences in the docs and examples that didn't match these rules.
* Adding steps to build the app with docker in existing projects (without the need to create the app with the with-docker example)
* Update examples/with-docker/README.md
Fix uppercase
Co-authored-by: Balázs Orbán <info@balazsorban.com>
* lint-fix
Co-authored-by: JJ Kasper <jj@jjsweb.site>
## 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 by running `yarn lint`
## Description
According to `Next.js` useRouter documentation:
- `asPath`: The path (including the query) shown in the browser without the configured basePath or locale.
- `pathname`: Current route. That is the path of the page in /pages, the configured basePath or locale is not included.
`asPath` should not be used as the props of components. There are many cases that `asPath` not working as expected. For example:
- `asPath` is different on server-side and client-side.
- `asPath` can contains `id` and `query`.
## Suggestion
- Warning the use of `asPath` can lead to the conflict of client and server-side.
- Update `useRouter` document.
## Bug
- [x] Related issues linked using `fixes #number`
Fixes: https://github.com/vercel/next.js/issues/34144
Fixes: https://github.com/vercel/next.js/issues/34016
Fixes: https://github.com/vercel/next.js/issues/34197
## Description
This year we implemented the new Apollo config using this example. We recently moved to `getServerSideProps` as well, however, this was giving us some cache problems. The issue was that the cache was older than the actual data that was coming from the server side query.
Because the `merge` of the cache in `apolloClient.js` is merging the existingCache in the initialState it will overwrite the "fresh" initialState with properties that already exists. This means that if you have something in your cache from previous client render, for example `user` with the value `null`, and you go to a new page and do a new query on the server which returns a value for the `user` field, it will still return `null` because of that `merge` function.
Since this was weird in our opinion, we've changed this in our own environment by always overwriting the existing cache with the new initialState, so that the initialState that is coming from a fresh server side query is overwriting. We thought it was a good idea to reflect this also in this example, because we couldn't think of a reason why the existing cache should overwrite fresh queries.
I've added a reproduction that shows what this is exactly about. I hope my description makes sense, let me know what you think!
## Reproduction of old scenario
Created a reproduction branch here: https://github.com/glenngijsberts/with-apollo-example. Using a different API than in the example, because of https://github.com/vercel/next.js/issues/32731.
1. checkout the example
2. yarn
3. yarn dev
4. visit http://localhost:3000/client-only
5. Hit "Update name". This will run a mutation that will update the cache automatically. Because I use a mocked API, the actual value on the API won't be updated, but this is actually the perfect scenario for the problem because in reality data can already change in the meantime when you're doing a new request.
6. Go to the SSR page
7. This will display two values: one is coming from the server side request (which is the latest data, because no cache is used in `getServerSideProps`) and the other is using the cache, which is outdated at that point, yet it's still returned because the old way of merging the cache was picking the existing cache over the initialState that was coming from the fresh server side query.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
## 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 by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
- Partially fixes#25854
- Badly specified package dependency version (`graphql-let`). The new major version required manual migration. As specified [here](https://github.com/piglovesyou/graphql-let/releases/tag/v0.18.0).
- In `lib/resolvers.ts`
```Module '"*.graphqls"' has no exported member 'MutationResolvers'. Did you mean to use 'import MutationResolvers from "*.graphqls"' instead?ts(2614)```
## Fixes
- Migrate as described in migration guide for `graphql-let` above.
- Update some npm packages along the way.
- use the nextv12 example from the storybook-addon-next repo as the with-storybook example found here: 6583c20803/examples/nextv12
- update the readme for the example to include details on what the example includes
- tweak the example from the `storybook-addon-next` repo to work with type checking and linting
Resolves#33889
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
## Context
This was kindly requested by @leerob in [this issue](https://github.com/RyanClementsHax/storybook-addon-next/issues/3) on the `storybook-addon-next` repo.
P.S. thanks to @leerob for making [this video](https://www.youtube.com/watch?v=cuoNzXFLitc&t=1502s). I found it very helpful for getting me up to speed with how to contribute. I hope I did everything right for y'all. Lmk if there was something I could have done better.
adding {Head, Html, Main, NextScript} from 'next/document'
setting lang="en"
I find it very useful for loading external scripts, fonts or whatever you may need for a starter package
## 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
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This fixes the comment about disabling telemetry. For now it doesn't disable telemetry for `next build` if you uncomment it.
## 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 ambiguous flags in Dockerfile example
At least with Docker xx this Dockerfile fails to both `adduser` and `addgroup` commands due to ambiguous flags. The error message for example for `addgroup` is:
```
#5 0.292 Option g is ambiguous (gecos, gid, group)
#5 0.292 Option s is ambiguous (shell, system)
```
This PR switches both commands to use the long-format flags. I think they are also more understandable for the readers of the Dockerfile.
* Apply suggestions from code review
Co-authored-by: Balázs Orbán <info@balazsorban.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Balázs Orbán <info@balazsorban.com>
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
---
## Context
Having 3 environments:
- Development: for doing testing
- Staging: for doing UAT testing
- Production: for users
In each environment, the Next.js application makes API calls to the corresponding API gateway:
- Development: https://api-development.com
- Staging: https://api-staging.com
- Production: https://api-production.com
Using `NEXT_PUBLIC_API_URL` for the `baseUrl` of [axios](https://axios-http.com/docs/intro).
Since the `NEXT_PUBLIC_API_URL` is replaced during _build time_, we have to manage to provide the corresponding `.env.production` files for Docker at _build time_ for each environment.
## Solution
Since we are using CI services for dockerization, we could setup the CI to inject the correct `.env.production` file into the cloned source code, (this is actually what we did). Doing that would require us to touch the CI settings.
Another way is using multiple Dockerfile (the former only need to use one Dockerfile), and the trick is copying the corresponding `env*.sample` and rename it to `.env.production` then putting it into the Docker context. Doing this way, everything is managed in the source code.
```
> Dockerfile
# Development environment
COPY .env.development.sample .env.production
# Staging environment
COPY .env.staging.sample .env.production
# Production environment
COPY .env.production.sample .env.production
```
Testing these images locally is also simple, by issuing the corresponding Makefile commands we can simulate exactly how the image will be built in the CI environment.
## How to use
For development environment:
```
make build-development
make start-development
```
For staging environment:
```
make build-staging
make start-staging
```
For production environment:
```
make build-production
make start-production
```
## Conclusion
This example shows one way to solve the three-environment model in software development when building a Next.js application. There might be another better way and I would love to know about them as well.
I'm making this example because I can't find any example about this kind of problem.
Co-authored-by: Tú Nguyễn <93700515+tunguyen-ct@users.noreply.github.com>
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
---
I'm getting this warning when running `yarn lint` on the local:
After a quick check, it is caused by the `tailwindConfig` option in the `prettier.config.js` file, added in PR #33614
I guess the reason is because the workspace does not install that plugin.
We can safely remove that option in the example, because it's already [the default location](https://github.com/tailwindlabs/prettier-plugin-tailwindcss):
> By default the plugin will look for this file in the same directory as your Prettier configuration file. However, if your Tailwind configuration is somewhere else, you can specify this using the tailwindConfig option in your Prettier configuration.
The warning is gone after removing that option.
Updates all CMS updates to use:
- Tailwind 3 (and the corresponding `tailwind.config.js` and PostCSS changes)
- `remark@14` and `remark-html@15` (and the corresponding ESM breaking changes)
- `date-fns` minor bump
Ensured all CMS examples were:
- Using `next/image`
- Not using `as` for `next/link` (no longer needed)
Hi! Dev Rel from Contentful here. We noticed that the Contentful example was giving a graphQL complexity error so adding in some validations to the content model that is imported to prevent the error from showing up.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## 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 by running `yarn lint`
This PR removes the duplicate overview link for data fetching, and fixes the corresponding links
## 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 by running `yarn lint`
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Hi team!
I found in the `with-stripe-typescript` example that I need to update these things.
- `use-shopping-cart` is launched a new major version
- Stripe launched a new useful payment element named Stripe Payment Element
So I've updated the example app to support these updates.
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
## How to test it
Please check the README.md of the example.
https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/README.md
Thanks!
## 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
- [v] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Fixed `dockerfile` in `with-docker` example
## Bug
- error when executing `docker build -t nextjs-docker .` - `yarn.lock` file is missing
## Documentation / Examples
- edited to not fail when `package-lock.json` or `yarn.lock` are not found
- example: use `with-docker` example
- [x] Make sure the linting passes by running yarn lint
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## 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
- [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
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Recently I started to build this library that uses `styled-jsx` under the hood and provide a utility first API to create your own components.
> https://github.com/skynexui/components/
Actually I run the lib docs over vercel
## 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 by running `yarn lint`
Update version of supertokens-auth-react SDK for this demo. It has a few UI enhancements for our pre built UI + a new passwordless auth recipe.
Co-authored-by: kant01ne <5072452+kant01ne@users.noreply.github.com>
Co-authored-by: Bhumil Sarvaiya <21988812+bhumilsarvaiya@users.noreply.github.com>
Co-authored-by: Joel Coutinho <6310783+jscyo@users.noreply.github.com>
Updating dependencies for examples/with-supabase-auth-realtime-db so npm install does not encounter dependency errors on install.
## 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 by running `yarn lint`
Upgrade remark-html dependency to resolve the critical vulnerability.
Newer versions like 15.0.1 do not work with this example but version 13.0.2 fixes the security issue and still works.
```
=== npm audit security report ===
# Run npm install remark-html@15.0.1 to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Critical │ Unsafe defaults in `remark-html` │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ remark-html │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ remark-html │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ remark-html │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://github.com/advisories/GHSA-9q5w-79cv-947m │
└───────────────┴──────────────────────────────────────────────────────────────┘
```
<!--
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
- [ ] 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 by running `yarn lint`
This PR accomplishes 2 things:
1. You can now add images to the rich text post of the example and see those images show up in the app. This is a good jumping off point for people who are learning how to customize the rich text renderers by adding custom components to the mapper.
2. Updating the README pictures to have a more up-to-date UI in the screenshots.
## Feature
- [x] Documentation added
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
## `with-next-translate` Example Refactor
- [x] Linting passes
## Purpose for changes
- The existing locals folder is using a redundant string structure which continuously repeats "Change language to " in separate instances in separate languages alongside separate language translations.
- This PR is a simple refactor to extract "change language to" to it's own string, and references already existing strings defining the language translation.
## Why they might be helpful
- A user looking to implement this pattern should consider reducing redundancies as early as possible to scale an app, thus I believe it would be helpful for this example.
Notes:
- these original translations were done via google translate
- verified that these strings still make sense and translate properly in every locale / language
- these strings are meant to be examples, translations have not been verified with a translation agency.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## 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 by running `yarn lint`
