Let's open the deploy link in a new window so the link isn't blocked
when running an an iframe, such as Stackblitz.
Previously, this would print the following error:
> Refused to display 'https://vercel.com/' in a frame because it set
'X-Frame-Options' to 'deny'
## 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 `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## 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 updates the docs and examples for `create-next-app` to include pnpm usage.
The following script was used to update every example README:
```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')
for (let example of examples) {
const filename = `./examples/${example}/README.md`
const markdown = fs.readFileSync(filename, 'utf8')
const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
const output = markdown.replace(regex, (yarn, group) => {
const pnpm = `pnpm create next-app -- --example ${group}`
return `${yarn}\n# or\n${pnpm}`
})
fs.writeFileSync(filename, output)
}
```
* Update to use the latest MongoDB best practices.
* lint-fix
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: jj@jjsweb.site <jj@jjsweb.site>
* 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>
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
[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
```
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
* Update with-mongodb to be TypeScript-friendly
I slightly modified the approach so TypeScript can correctly infer types without actually having to type anything but the global:
**index.d.ts**
```ts
import { Db, MongoClient } from "mongodb";
declare global {
namespace NodeJS {
interface Global {
mongoCache: {
conn: {
client: MongoClient | null;
db: Db | null;
}
promise: Promise<MongoClient> | null;
};
}
}
}
```
* lint
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
I've looked at the example code and saw some consistent issues related to code style. The changes applied to this PR fixes the following points:
- Differences of line breaks styles between multiple files
- Differences of if statements styles
- Unnecessary comment
- A typo on a JSDocs
---
There were line breaks between statements on `pages/index.js`
````
export async function getServerSideProps(context) {
const { client } = await connectToDatabase()
const isConnected = await client.isConnected()
return {
props: { isConnected },
}
}
````
And this wasn't being applied to the MongoDB utility:
````
export async function connectToDatabase() {
if (cached.conn) return cached.conn
if (!cached.promise) {
const conn = {}
const opts = {
useNewUrlParser: true,
useUnifiedTopology: true,
}
{...}
````
And also, as shown in the snippet above, there are different styles of if statements being used.
With that being said, the reason I made this PR is because I think that this kind of inconsistent arises questions when a contributor looks to the codebase, even if this is a simple example.
This PR fixes 2 issues with the mongodb example:
### 1. Fallable Caching Strategy
Calling `connectToDatabase()` multiple times before it's cached results in multiple connections being created. The latest one created was becoming the "cached" one and the others dissappear into the background.
This is now fixed by using **promise sharing** so that only one connection can ever be created.
### 2. Problematic Hot Reload
During development you can monitor your database connections and see that it continues to create more and more connections over time. Some users have reported their [databases reaching maximum connection limits](https://github.com/vercel/next.js/discussions/12229).
This is resolved by using `global` to store the cached connection. It's not ideal but it is necessary.
* MongoDB Example
* Apply suggestions from code review
* Add changes based on feedback.
* clean up code with more descriptive props
* Use MongoDB in ServerSideProps instead of separate API route
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
