## 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)
They are added to `.gitignore` already. Follow-up on #39051
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] 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
- [ ] 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/examples/adding-examples.md)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
There were a few issues with the scripts in the Electron examples:
* `dist` and `pack-app` would fail without a `name` and `version` in `package.json`.
* `type-check` didn't work because there isn't a `tsconfig.json` at the root. It needs to look in the `electron-src` and `renderer` folders respectively.
`electron-builder` also needed to be updated in order to run on macOS 12.3+ (see https://github.com/electron-userland/electron-builder/issues/6606).
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
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)
}
```
Hello! I was using `npx create-next-app --ts` to quickly bootstrap a basic next.js project with Typescript. It bothered me that I got git diff just from running `npm run build` inside the project, because the new notice in the `next-env.d.ts` file.
So I went ahead and updated the `next-env.d.ts` file in [`packages/create-next-app/templates/typescript`](fb67ce9864/packages/create-next-app/templates/typescript/next-env.d.ts) to be exactly how the file looks after running once. (7417ecc09c)
Then I realized that I could probably do the same for all the `next-env.d.ts` that are spread out in the many examples, to make running those examples after cloning them feel a bit smoother. (fb67ce9864)
> However I skipped the [`with-typescript-graphql`](40f85f6d95/examples/with-typescript-graphql) example since that [`next-env.d.ts`](40f85f6d95/examples/with-typescript-graphql/next-env.d.ts (L4-L9)) actually has changes and I couldn't even run `yarn build` in that example, so I'm not sure what will happen with the `next-env.d.ts`. Someone who _gets_ that example will have to fix it I suppose.
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
```
remove `alwaysStrict: true` rule from tsconfig.json in with-typescript example, because the rule is included in `strict: true` has been already written in tsconfig.json and other included rules such as `noImplicitAny: true` have not been written.
[tsconfig documentation link](https://www.typescriptlang.org/tsconfig#alwaysStrict)
## Documentation / Examples
- [x] Make sure the linting passes
1. updates the `.gitignore` for this example to ignore the temporary output folders. ( similar to #15783 )
2. change yarn run script to npm run script ( I don't like use yarn currently. )
- Changed script `start` to `dev` and improved it #18934 adding commando to transpile electron code;
- Added some folders into `.gitignore`;
- Updated react to avoid issues as #18916Fixes#18934
**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
It seems like the error occurs with `next export` when building the current example.
```
$ cd examples/with-electron-typescript
$ yarn && yarn build
Error occurred prerendering page "/detail". Read more: https://err.sh/next.js/prerender-error
Error: Error for page /detail: pages with `getServerSideProps` can not be exported. See more info here: https://err.sh/next.js/gssp-export
Error: Export encountered errors on following paths:
/detail
at exportApp (/Users/kstg/src/github.com/zeit/next.js/examples/with-electron-typescript/node_modules/next/dist/export/index.js:22:1166)
error Command failed with exit code 1.
```
I changed routes to statically resolve pages generating from `pages/detail.tsx` and added `getStaticPaths` and `getStaticProps`. so then it will export as follows
```
yarn run v1.22.4
$ next build renderer && next export renderer
Creating an optimized production build...
Compiled successfully.
Automatically optimizing pages...
Page Size First Load JS
┌ ○ / 336 B 62.6 kB
├ ○ /404 2.54 kB 61.6 kB
├ ○ /about 338 B 62.6 kB
├ ● /detail/[id] 440 B 62.7 kB
├ ├ /detail/101
├ ├ /detail/102
├ ├ /detail/103
├ └ /detail/104
└ ● /initial-props 530 B 62.8 kB
+ First Load JS shared by all 59.1 kB
├ static/pages/_app.js 983 B
├ chunks/commons.9facbe.js 10.9 kB
├ chunks/framework.b76773.js 40.3 kB
├ runtime/main.800476.js 6.22 kB
└ runtime/webpack.c21266.js 746 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
> using build directory: /Users/kstg/src/github.com/zeit/next.js/examples/with-electron-typescript/renderer/.next
copying "static build" directory
> No "exportPathMap" found in "next.config.js". Generating map from "./pages"
launching 7 workers
Exporting (0/4)
Exporting (1/4)
Exporting (2/4)
Exporting (3/4)
Exporting (4/4)
Export successful
Done in 11.47s.
```
Related to [11014](https://github.com/vercel/next.js/issues/11014).
Removed getInitialProps in favor of getStaticProps and getServerSideProps. Refactored one of the components from class to functional. Removed redundant imports. Removed React.FC/FunctionComponent. Added two build files to gitignore.
Let me know if you want something to be changed.
* copy only compiled files into electron build for with-electron-typescript
* updated npm deps for with-electron-typescript
* copy only compiled files into electron build for with-electron
* updated npm deps for with-electron
Co-authored-by: JJ Kasper <jj@jjsweb.site>
