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)
}
```
Updating @react-three/drei from 4.x to 7.x
I was having problems using this example and realized that it was caused by the "old" version of the lib.
Also updating @react-three/fiber and next to latest.
## Documentation / Examples
- [x] Make sure the linting passes
* 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
```
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
## 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
## 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
If the three dependency is upgraded to version 0.125.0 and upwards, the following errors occur:
- Compilation error: Attempted import error: 'Geometry' is not exported from 'three'.
- ReferenceError: Blob is not defined.
Solution:
Upgrade drei to `2.2.21`.
This is a change to add the project name as in the other examples.
When we run with the current create command, we are asked for the project name.
As follows:
```
$ npx create-next-app --example with-three-js
? What is your project named? › my-app
```
Hi, we received some issues on the `react-three-fiber` and `drei` repos, mentioning broken ssr because of some examples where we import three's examples - like to implement loaders or controls.
This PR adds a next.config suggested by many that transpiles everything in three, drei and postprocessing.
I also added some code from `drei` that shows how controls and effects can be easily added.
The existing example gives an error on every hot reload, perhaps because of the way that an initial `useEffect` hook imports the `GLTFLoader` and it doesn't redo that on hot reload?
Putting the component using the `useLoader` hook in a dynamic import seems to fix this.
Open to better suggestions, this is kind of awkward to use still...
This issue is related to [12694](https://github.com/zeit/next.js/issues/12964). I covered the following examples
- with-zeit-fetch
- with-yarn-workspaces
- with-why-did-your-render
- with-video-js
- with-universal-configuration-runtime
- with-typestyle
- with-three-js
If you have a suggestion or change I'd appreciate it
* Find/Replace "Deploy it to the cloud..."
* Find/Replace "Deploy it to the cloud..." (no colon)
* Find/Replace "Deploy it to the cloud..." for firebase
* Convert remaining ones
* Storybook deployment
* Update with-stripe-typescript
* Update contributing.md
* Remove `now`
* Update examples/with-stripe-typescript/README.md
Co-Authored-By: Luis Alvarez D. <luis@zeit.co>
* With threejs example
* static folder replaced with public folder - linting issues resolved
* CR- gitignore removed- readmea updated- css files and package removed
* used plain css file insteaded of styled component
* built in css added
Co-authored-by: welcomebackfda <54882055+welcomebackfda@users.noreply.github.com>
