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)
}
```
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
**What's the problem this PR addresses?**
A decent amount of the examples don't have a `name` field in `package.json` that matches their folder name, meaning they either lack a name or the names are duplicated.
I was testing Yarn 2 workspaces using the entire examples directory and needed to get rid of the duplicates.
**How did you fix it?**
Updated the names to match the names of their folders
Again, related to [12964](https://github.com/zeit/next.js/issues/12964)
After checking all the other examples and the ongoing pull requests, I believe that with this PR being merged, all the examples should be free of redundant react imports.
Let me know if you want me to edit anything that you don't like.
Regards
with-typescript
with-atstroturf
with-atlaskit
with-styletron
with-styled-components-rtl
with-stylesheet
with-stomp
with-stitches-styled
with-stitches
with-slate
with-sentry-simple
with-sentry
with-segment-analytics
with-rematch
with-relay-modern
with-reflux
with-redux-wrapper
with-react-relay-network
with-react-native
with-react-multi-carousel
with-react-jss
with-react-helmet
with-react-ga
with-quill-js
with-prefetching
with-google-analytics-amp
with-google-analytics
with-framer-motion
with-flow
with-firebase-hosting
with-firebase-cloud-messaging
with-firebase-authentication
with-expo
with-dynamic-app-layout
with-draft-js
with-cxs
with-cerebral
with-ant-design-mobile
with-algolia-react-instantsearch
using-preact
progressive-render
* Remove micro example
* Remove page that uses getInitialProps
* Update with-docker example
* Update dynamic import example
* Update Fela example
* Update Flow example
* Update framer motion example
* Remove freactal example
* Remove with-higher-order-component
* Remove with-immutable-redux-wrapper as it shows avenues to performance issues
* Remove example that doesn't have usage
* Update with-kea
* Remove example that is not used
* Update next-page-transitions example
* Remove next-routes example as dynamic routes are supported by default
* Add link to documentation
* Update Overmind example
* Update pretty-url-routing example
* Remove update with low usage
* Update with-react-ga example
* Update React Helmet example
* Remove mobile-detect from carousel example
* Remove react-useragent as it shows a bad practice
* Remove react-uwp example as it has low usage
* Remove recompose example as it shows outdated practices
* Remove refnux example as it has low usage
* Remove example that can be created using api routes
* Update with-segment-analytics
* Update socket.io example
* Remove socket.io example as it's shows bad practices
* Update static export example
* Update universal configuration example
* 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>
* Run prettier over packages/**/*.js
* Run prettier over packages/**/*.ts
* Run prettier over examples
* Remove tslint
* Run prettier over examples
* Run prettier over all markdown files
* Run prettier over json files
* Simplified format function in with-redux (#6518)
* Update README.md (#6749)
- fix runtime configuration example to use `customKey`
- standardize warning callouts to use a block quote and bold "**Warning:**" text. Previously there were different ways a warning was mentioned on the docs page:
- A warning emoji. The warning emoji didn't render in the actual site.
<img width="770" alt="Screen Shot 2019-03-21 at 9 22 21 AM" src="https://user-images.githubusercontent.com/1103708/54759302-c655f380-4bbb-11e9-9116-b0fdc2467bc3.png">
- Italicized "Warning" text. Imo, does not stand out on the page.
<img width="663" alt="Screen Shot 2019-03-21 at 9 24 43 AM" src="https://user-images.githubusercontent.com/1103708/54759376-f604fb80-4bbb-11e9-85c6-6589b7738dee.png">
* Adde example on how to rendering muiltiple items carousel on server-side with nextjs
