This PR updates the `cms-contentful` example to use:
- App Router
- TypeScript
- Draft Mode (previously Preview Mode)
- ISR / Data Cache (revalidations through `revalidateTag`)
Further, it combines many separate files into more manageable single files, and tries to better bucket provider-specific logic into the `lib/` folder. I'm hoping this can be the foundation for re-writing the rest of the `cms-*` examples to use App Router.
Overall, the code is much easier to reason about IMO. Pretty happy with the change. I sprinkled some `any`'s throughout here, but if someone wants to make it better, go for it!
https://app-router-contentful.vercel.app/
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)
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order 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:
-->
This adds a new example under cms-dotcms/. Is a general-purpose example
that should allow developers to undestand how to use next.js with dotCMS
apis.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [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.md#adding-examples)
Co-authored-by: Daniel Esteves <estevesd8@gmail.com>
Co-authored-by: Will Ezell <will@dotcms.com>
Co-authored-by: Arcadio Quintero A <oidacra@gmail.com>
Co-authored-by: Rafael <rjvelazco21@gmail.com>
## 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)
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order 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:
-->
## Summary
- Added jsdoc typing for all examples using `next.config.js`
- Added jsdoc typing for all examples using `tailwind.config.js`
## Documentation / Examples
- [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.md#adding-examples)
## Changes
- Migrate class based `_document`s to functional documents
- Removed `_document.js` where default
- Removed `MyDocument.getInitialProps` where default
## Motivation
This removes some boilerplate and prepares examples for server components.
## Documentation / Examples
- [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.md#adding-examples)
## Feature
- [x] 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
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Changes
Added in on-demand revalidation for Contentful example. Specifically, added the revalidate api path, a new environment variable which will contain the secret, and some additions to the README.
Co-authored-by: JJ Kasper <22380829+ijjk@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)
}
```
Updates all CMS updates to use:
- Tailwind 3 (and the corresponding `tailwind.config.js` and PostCSS changes)
- `remark@14` and `remark-html@15` (and the corresponding ESM breaking changes)
- `date-fns` minor bump
Ensured all CMS examples were:
- Using `next/image`
- Not using `as` for `next/link` (no longer needed)
Hi! Dev Rel from Contentful here. We noticed that the Contentful example was giving a graphQL complexity error so adding in some validations to the content model that is imported to prevent the error from showing up.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
This PR accomplishes 2 things:
1. You can now add images to the rich text post of the example and see those images show up in the app. This is a good jumping off point for people who are learning how to customize the rich text renderers by adding custom components to the mapper.
2. Updating the README pictures to have a more up-to-date UI in the screenshots.
## Feature
- [x] Documentation added
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
* 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
```
If the example is cloned and ran with no further setup (no environment variables set up), it will error out because `extractPostEntries` will return `undefined` which can not be serialized by `getStaticProps `.
This PR basically ensures that we return an empty array instead of the `undefined` for a collection of posts, and a `null` instead of the `undefined` for a single post.
Now that all Contentful spaces support GraphQL, we are looking into switching the example from using a JS library to a simple fetch with GraphQL.
@stefanjudis ☝️
Hey guys, thanks for the amazing job you are doing 💜
This PR fixes a small error I faced when starting a project with Prismic + Next.js.
Since the version on the `cms-prismic` example was fixed to `9.2.3-canary.26` I was having the following error because the example uses the environment variables feature that is for Next.js 9.4+
<img width="1256" alt="Screen Shot 2020-06-16 at 12 13 38" src="https://user-images.githubusercontent.com/26466516/84793626-bc43c000-afcb-11ea-8823-b1dee30dbb00.png">
After updating to the latest version, I could run it successfully.
ps: I also realized that the `cms-contentful` example was also not using the `latest` version, so I decided to update it (I have not tested, but the error certainly will happen).
ps2: if you want to reproduce the error, just create a project using the example and add dummy data on the environment variables, then start the server and access `http://localhost:3000`.
* added graphcms
* Updated readme and environment variables
* Removed gitignore
* Updated tailwind config
* Some fixes in pages
* Updated api endpoints
* lint fix
* Updated readme
* Updated og image
* Updated cms examples to include this one
* Added example to docs
* Added preview demo link
* Updated step
Co-authored-by: Luis Alvarez <luis@vercel.com>
[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
