## Description
This PR ensures that the default prettier config is used for examples
and templates.
This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).
## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)
## Related
- Fixes#54402
- Closes#54409
### Reason for making this change
https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again.
In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited.
### Remaining work
I apologize for only modifying one template initially to initiate the discussion first.
If this change is agreed upon, it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change.
<!--
Thanks for opening a PR! Your contribution is much appreciated.
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:
-->
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
First of all thanks for this amazing project and all the help you
provide with these examples.
It seems there is code duplication in this example. After some tests
locally seem to _document.js is not necessary for `gtag` to work
properly.
9d97a1e34a/examples/with-google-analytics/pages/_app.js (L30-L34)9d97a1e34a/examples/with-google-analytics/pages/_document.js (L13-L17)
I am aware of https://github.com/vercel/next.js/pull/40645 and I would
like to ask @dave-hay, @SukkaW and @ijjk to consider this is still
necessary. If so why then not move all content of the scripts from _app
to _document?
In any case, I am open to adding here some comments explaining what is
the reason for this code duplication if necessary.
<hr/>
Changes that come from https://github.com/vercel/next.js/pull/43897
1. The `event` hashChangeComplete should be removed since `/home` and
`/home/#section` is not new pageview, but just reference to the same
page.
If we go from /home to /home/#section (with a button click or a link for
example) this shouldn't trigger a new page visit on `gtag`.
For this reason, I think we should revert the changes from
https://github.com/vercel/next.js/pull/36079. If there is a better
argument of why this should stay I am also open to creating comments to
clarify this on the example since I don't think should be the default
behavior and not useful in most cases.
2. The `id="gtag-init"` was added with no context to the example from
https://github.com/vercel/next.js/pull/29530
If there is a reason for this id in the script to existing I am open to
adding a comment that clarifies this since in my experience is not
necessary at all.
Edit: Batching with https://github.com/vercel/next.js/pull/43897 as
recommended by
https://github.com/vercel/next.js/pull/43897#issuecomment-1344635000
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This PR updates the minimum version of React used by examples from 17.0.2 to 18.2.0.
Fixes#41975
## Bug
- [x] Related issues linked using `fixes #41975`
- [ ] Integration tests added
- [ ] Errors have a 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 a helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Next.js-hydration now triggered after gtag is initialized. Fixed by adding _document.js and appropriate script elements.
---
## Documentation / Examples
- [X] Related issues linked using fixes#40410
- [X] Make sure the linting passes by running `pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Next.js-hydration now triggered after gtag is initialized.
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)
}
```
* 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
```
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
* 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>
* Repair advanced feature reference
The explanation of the custom document feature had been moved.
* Update README.md
Co-authored-by: Joe Haddad <timer150@gmail.com>
The with-google-analytics example had the "routeChangeComplete" event listener set up in components/Page.js, but that the event listener would only be set up if the user visited a page using that component. From the example, it's not clear if google analytics can be used without making every page use a component like components/Page.js. Someone following the example may make pages that don't use components/Page.js and fail to have page views reported, or feel compelled to force a shared component into their design unnecessarily, or might even make a mistake by making multiple different components like Page.js which each add a new "routeChangeComplete" event listener, causing page views to be over-reported when the user navigates between pages using the different components.
This PR moves the "routeChangeComplete" event listener into _app.js, where it's guaranteed to be executed for every page and is more obviously decoupled from page-layout-related components.
This PR also fixes a React warning about the lack of an onChange handler on an input tag, and removes the unnecessary implementation of `getInitialProps` in _document.js (the default implementation is inherited if not present, there's nothing this example needs to do with `getInitialProps` specifically, and the body of the method seems to have been based on an old version of next's internal implementation).
This PR also fixes the url being passed to google tag manager incorrectly. It looks like page_path should be used instead of page_location because the `url` value only has the path, not the full url with the domain name, etc. (https://developers.google.com/analytics/devguides/collection/gtagjs/pages)
I wrote a [script](https://github.com/j0lv3r4/dependency-version-updater) to update dependencies recursively in `package.json` files, e.g.:
```
$ node index.js --path="./examples" --dependencies="react=^16.7.0,react-dom=^16.7.0"
```
This PR contains the result against the examples folder.
