I added ` *.tsbuildinfo` to gitignores of examples that use typescript and don't already have it. By use typescript I mean have `tsconfig` somewhere in their directory tree.
I used the following script to update the files:
```bash
#!/bin/bash
set -eou pipefail
cd examples
examples=`git ls-files . | grep tsconfig | xargs dirname | grep -v "/"`
for example in $examples; do
if ! grep -q tsbuildinfo $example/.gitignore; then
gitignore="$example/.gitignore"
echo $gitignore
tail -c1 $gitignore | read -r _ || echo >> $gitignore
echo -e "\n# typescript\n*.tsbuildinfo" >> $gitignore
fi
done
```
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)
}
```
I imported a bunch of old markdown posts to the blog-starter example but some of the post metadata was not returned by the API in the example code.
For example, having `published: false` in post metadata was not returned in the item fields.
The problem was in check:
```
if (data[field]) {
items[field] = data[field]
}
```
This rejects all falsy values in addition to fields that are not set. Checking only for `undefined` should fix this issue.
I didn't find existing integration tests for the blog example nor an issue describing this problem.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
* 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>
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
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
This example currently fails to build with the error:
```
-> % yarn build
yarn run v1.22.10
$ next build
warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://nextjs.org/docs/messages/react-version
info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
Failed to compile.
./components/alert.tsx:2:16
Type error: Could not find a declaration file for module 'classnames'. '/Users/mike/workspace/blog/node_modules/classnames/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/classnames` if it exists or add a new declaration (.d.ts) file containing `declare module 'classnames';`
1 | import Container from './container'
> 2 | import cn from 'classnames'
| ^
3 | import { EXAMPLE_PATH } from '../lib/constants'
4 |
5 | type Props = {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
As of [`v2.3.1`](https://github.com/JedWatson/classnames/blob/master/HISTORY.md#v230--2021-04-01), the `classnames` package started providing its own types, so the `@types/classnames` package [became a stub](https://unpkg.com/browse/@types/classnames@2.3.1/). We get the error because the `classnames` version is pinned to the old, type-less version, while `@types/classnames` picked up the new stubbed version.
Removing `@types/classnames` and updating `classnames` to the latest version fixes the build error.
## Documentation / Examples
- [x] Make sure the linting passes
I realized while looking over this that the `autoprefixer` plugin isn't being used by postcss because it's not included in the `postcss.config.js`. Additionally, since `postcss-preset-env` doesn't support PostCSS 8 yet, and it includes PostCSS 7 as a dependency, I've removed that package.
There is an open issue to add PostCSS 8 support to `postcss-preset-env` [here](https://github.com/csstools/postcss-preset-env/issues/191). @kripod's comments on my other PR #20956 are what prompted me to check this out.
On a side note, it looks like all the CMS examples use Tailwind CSS v1 still, so that's something someone (possibly myself) could tackle later.
[ch2502]
- Added new import flow to every CMS example, using the deploy button, and removed `vercel.json`
- Replaced `dotenv` with the new env support in outdated examples
