## What?
Update examples `.gitignore` files for parity with [Yarn's official
recommendations](https://v3.yarnpkg.com/getting-started/qa#which-files-should-be-gitignored),
accounting for Yarn's modern Plug-n-Play functionality.
## Why?
New projects initialized with `create-next-app` presently add various
extraneous files from the Yarn cache to the initial commit. This is most
notable in the case of the Next SWC binary, which may exceed 100M in
some environments (empirically, 64-bit Darwin and WSL2 Ubuntu, and very
probably other unix/linux environments), and prevent users from pushing
their new projects to free GitHub repositories without rewriting the
commit history to exclude the extraneous files, or unnecessarily setting
up Git LFS to include them.
## How?
I have errored on the side of exclusion to enable users to push their
CNA projects to GitHub as-is and for parity with other package managers,
while still providing the opportunity to opt in to additional
functionality provided by modern Yarn.
These changes follow the recommendations for
**non**-[Zero-Install](https://yarnpkg.com/features/caching#zero-installs)
configurations, as Zero-Install functionality is an extension on top of
the base package manager experience, and may necessitate additional
configuration and present additional complications for unsuspecting
users, so I think it's best left up to the user to opt-in. On account of
the majority of publicly available Next.js-based projects comprising
general consumer-facing websites, it is my belief that the majority of
Next projects would not benefit from Yarn's Zero-Install functionality,
and that explicitly facilitating it by default would break status quo
with all other non-Yarn CNA projects.
Contrary to the example `.gitignore`s provided by Yarn, I've excluded
the `.yarn/sdks` directory as it contains IDE-specific tooling; I feel
it would be presumptuous for an environmentally-agnostic tool to target
and provide package-manager-specific tooling for specific editors. This
too should be left to the user to opt-in to and provide for their
project if they deem necessary.
I have retained the current `.gitignore`'s exclusion of the `/.pnp`
directory for backwards compatibility with older versions of Yarn (the
files therein have since been reallocated to the `.yarn` directory
addressed by these changes, but I am not clear on when that delineation
occurred or the prevalence of Yarn installations which depend on the
former convention). Maintaining the exclusion here, in the worst case,
implies additional downloads (on an order of magnitude merely similar to
using npm from the outset) rather than failure.
CC: @samcx
### Adding or Updating Examples
- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
Co-authored-by: Sam Ko <sam@vercel.com>
## What?
This example used the legacy `~` operator which is no longer required in
latest webpack.
In case you land here trying Turbopack and running into the can't
resolve error this will be useful to know:
If you still need `~` it can be aliased using the `resolveAlias` option
in Turbopack:
```
module.exports = {
experimental: {
turbo: {
resolveAlias: {
'~*': '*',
},
},
},
}
```
<!-- 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(s) that you're making:
## For Contributors
### Improving Documentation
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating Examples
- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
### Fixing a bug
- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
### Adding a feature
- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
## For Maintainers
- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
Closes NEXT-2673
## 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.
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)
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
* add new example with-react-bootstrap
* use vanilla react-bootstrap components to implement index page
* clear unnecessary comments
* remove private property in package.json
* Updates
Co-authored-by: Luis Alvarez <luis@vercel.com>
Lee Robinson
