Commit Graph

32 Commits

Author SHA1 Message Date
Jam Balaya d45fc5ad95 examples: fix typos (#82506)
## Summary

Fix typos in code, styles, and documentation across multiple example
projects

Chores:
- Correct variable name typo in the with-slate example
(edtorState→editorState)
- Fix CSS/SASS class name misspellings (populer→popular, Serach→Search,
serachSelector→searchSelector)
- Update example documentation and comments to fix English typos (Data
SOUCE→SOURCE, accessiblity→accessibility, exchanges, doesn't, deploying,
validates, quickly)

### 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: Joseph <joseph.chamochumbi@vercel.com>
2025-11-24 14:04:41 +01:00
Roman A 2ecfdb8bf3 Fix a couple typos (#80080) 2025-06-11 14:43:59 +02:00
Lee Robinson 4a97643664 examples: fix readmes (#78483) 2025-04-23 20:48:58 -05:00
Jam Balaya 36dce2fe7e examples: add StackBlitz preview to README.md (#73546)
### Description

Follow up #35349.

1. Update the [example
template](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
with [StackBlitz](https://stackblitz.com/) preview
2. Add `preview live with StackBlitz` to the examples
3. Remove the below old StackBlitz preview section from the examples

```md
## Preview

Preview the example live on [StackBlitz](http://stackblitz.com/):

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/active-class-name)
```

CC: @samcx 

### Improving Documentation

- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### 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
2025-01-14 05:24:51 +00:00
Jam Balaya 9d371bfa82 examples: unify related CMS examples in README (#73247)
## What?

Add missing related CMS examples and sort them.

## Why are
[cms-keystonejs-embedded](https://github.com/vercel/next.js/tree/canary/examples/cms-keystonejs-embedded)
and
[cms-strapi](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi)
lacking?

Because these have only README.md file.

## How?

Update with the following text.

```md
- [AgilityCMS](/examples/cms-agilitycms)
- [Builder.io](/examples/cms-builder-io)
- [ButterCMS](/examples/cms-buttercms)
- [Contentful](/examples/cms-contentful)
- [Cosmic](/examples/cms-cosmic)
- [DatoCMS](/examples/cms-datocms)
- [DotCMS](/examples/cms-dotcms)
- [Drupal](/examples/cms-drupal)
- [Enterspeed](/examples/cms-enterspeed)
- [Ghost](/examples/cms-ghost)
- [GraphCMS](/examples/cms-graphcms)
- [Kontent.ai](/examples/cms-kontent-ai)
- [MakeSwift](/examples/cms-makeswift)
- [Payload](/examples/cms-payload)
- [Plasmic](/examples/cms-plasmic)
- [Prepr](/examples/cms-prepr)
- [Prismic](/examples/cms-prismic)
- [Sanity](/examples/cms-sanity)
- [Sitecore XM Cloud](/examples/cms-sitecore-xmcloud)
- [Sitefinity](/examples/cms-sitefinity)
- [Storyblok](/examples/cms-storyblok)
- [TakeShape](/examples/cms-takeshape)
- [Tina](/examples/cms-tina)
- [Umbraco](/examples/cms-umbraco)
- [Umbraco heartcore](/examples/cms-umbraco-heartcore)
- [Webiny](/examples/cms-webiny)
- [WordPress](/examples/cms-wordpress)
- [Blog Starter](/examples/blog-starter)
```

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>
2024-12-10 06:22:34 +00:00
Bjørn Nyborg 1207df686d examples: Updating WordPress example to Next 14 (#62447)
Updating the WordPress example, to a more modern example.

**Key features:**
- `robots.ts`: This automatically gets the robots.txt of the API route
and serves it on the `/robots.txt` route.
- `sitemap.ts`: This automatically gets all paths from the API and
generates a sitemap to serve on the `/sitemap.xml` route.
- `middleware.ts`: This contains a middleware function that checks the
users path for stored redirects, and redirects the user if a match is
found.
- `[[...slug]]`: This is the catch-all route that is used to render all
pages. It is important that this route is not removed, as it is used to
render all pages. It fetches the ContentType and renders the
corresponding
- `not-found.tsx`: This page is used for dynamic 404 handling - adjust
the database id to match your decired WordPress page, and make sure the
WordPress slug is "not-found", your 404 page will then be editable from
your CMS.
- `codegen.ts`: Automatic type generation for your WordPress
installation
- `Draft Mode`: Seamless Preview / Draft Preview support, using
authentication through WPGraphQL JWT Authentication and Next.js Draft
Mode
- `On Demand Cache Revalidation`: Including a bare minimum WordPress
theme that implements cache revalidation, WordPress link rewrites and
other utils for integrating with Next.js

 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

---------

Co-authored-by: Sam Ko <sam@vercel.com>
2024-08-28 16:09:13 -07:00
Tim fa88095f44 examples: Update Example Prepr CMS (#49224)
Co-authored-by: Kevintjuhz <kevin@kqcreations.com>
Co-authored-by: Kevintjuhz <k.quaedvlieg@outlook.com>
Co-authored-by: Lee Robinson <me@leerob.io>
2023-08-14 07:13:50 -05:00
JTaylor0196 f7baa56792 update example Deploy button URLs (#48842)
### What?
Updates Deploy button URLs for all listed examples here:
https://github.com/vercel/next.js/tree/canary/examples

### Why?
The Deploy URLs are currently broken and result in a failed clone
attempt on Vercel.

### How?
The URLs have been changed from https://vercel.com/new/git/external?… to
-> https://vercel.com/new/clone?…
(Last updated
[here](https://github.com/vercel/next.js/commit/8eaabe2fb0fb3a1d9f4931a332e608395813a3b9)
in 2021)
2023-04-26 13:31:44 -04:00
Freddy Montes 15cc88909c chore(examples): Add dotCMS example (#38214)
<!--
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>
2022-10-01 15:26:13 +02:00
Anthony Shew 60c8e5c29e Fix: broken TypeScript in WordPress example. (#39402)
* chore: add typescript and update deps

* style: add tsconfig

* chore: add g.avatar.com domain

* fix: images domain api url to match with hostname

* style: convert files to typescript

* refactor(Avatar): const name for readable purpose

* refactor: change regex to extract www from url

* Update next-image domains.

* Update a few types.

* Update readme.

* typo

Co-authored-by: Chaiwat Trisuwan <chaiwattsw@gmail.com>
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Anthony Shew <anthony@inthezone.dev>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-08-08 14:18:26 -05:00
Marcos Bérgamo c3e5caf110 docs(examples): improve DX while copying command to create new project (#38410)
* docs(examples): improve DX while copy command to create new project

* chore: apply code review

Co-authored-by: Marcos Bérgamo <Marcos.Bergamo@refinitiv.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-07-26 21:57:48 -05:00
Steven 57dcc9d329 Update pnpm create next-app for latest pnpm 6 and 7 (#37254)
This command changed in pnpm [6.32.13](https://github.com/pnpm/pnpm/releases/tag/v6.32.13) and [7.1.1](https://github.com/pnpm/pnpm/releases/tag/v7.1.1) so lets update it since its been a few weeks and we can expect pnpm users to update more regularly than npm users.

- Fixes https://github.com/vercel/next.js/pull/37240 
- Fixes https://github.com/vercel/next.js/pull/37045
- Fixes https://github.com/vercel/next.js/pull/37032
- Fixes https://github.com/vercel/next.js/pull/36602
- Fixes https://github.com/vercel/next.js/pull/36496
2022-05-27 21:21:40 +00:00
Tom 3e178bb801 add pnpm link to docs (#37221)
## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)


Co-authored-by: Steven <steven@ceriously.com>
2022-05-27 15:46:38 -04:00
Steven 9f9214abe5 Updated create-next-app docs to include pnpm usage (#35755)
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)
}
```
2022-03-30 21:03:21 +00:00
Aziz Abbas de54ad895c [examples] Add a statically generated blog example using Next.js and Builder.io (#22094)
A statically generated blog example using Next.js and [Builder.io](https://builder.io), demo on [https://cms-builder-io.vercel.app/](https://cms-builder-blog.vercel.app/)
2022-01-12 21:58:43 +00:00
André 057d338db4 Update cms-wordpress readme file (#27234)
## Documentation / Examples

- [x] Make sure the linting passes

- Removed references to [WPGraphiQL](https://github.com/wp-graphql/wp-graphiql) as it is now part of [WPGraphQL](https://github.com/wp-graphql/wp-graphql) plugin.
2021-07-16 15:17:27 +00:00
Lee Robinson 279e105279 Update .now.sh to .vercel.app. (#22359) 2021-04-14 09:46:06 -05:00
Joost Jansky e69a4d7a23 [examples] Added blog-starter example using Ghost CMS (#19990) 2021-02-07 12:27:47 -06:00
Luc Leray b442acbe1c Replace zeit/next.js with vercel/next.js (#20849) 2021-01-07 08:41:04 -05:00
Luc Leray 8eaabe2fb0 Fix deploy buttons URLs (#20834)
Fix all deploy button URLs in the Next.js repo to follow the following format:
```
https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME>
```

The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button.

Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs.

---

For example, for the `hello-world` example:

The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world

And the deploy button looks like this:
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world)

---

For reference, I used the following regexes to search for the incorrect URLs

```
\(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*)\)
\(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&]*)(.*)\)
\(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*)\)
https://vercel.com/import/git
https://vercel.com/import/select-scope
https://vercel.com/import
https://vercel.com/new/project
```
2021-01-07 01:40:29 +00:00
NorbertLuszkiewicz c03d4931de Simplify example usage instructions (#16678)
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
2020-08-29 22:22:02 -04:00
Ondřej Chrastina a856097402 Add Kontent example (#16034)
Hello everyone!

I would like to add the example using [Kentico Kontent](https://kontent.ai) as a data source for your example.
I have tried to be consistent with the other examples and showcase the preview as well.

I have tried to keep up with [Contribution guidelines](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples).

Thank you.
2020-08-24 22:58:53 +00:00
Shu Uesugi a841d10954 Add c=1 to deploy buttons on CMS Examples (#14293)
Fixes #14291
2020-06-17 23:25:11 +00:00
Jesse d3704a66f8 added graphcms (#14026)
* 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>
2020-06-15 12:03:34 -05:00
Shu Uesugi e781c44682 Use envLink for deploy buttons (#14110)
This is a quick fix for https://github.com/vercel/next.js/pull/14053 - the deploy buttons on CMS examples should be using `envLink` for the links.

## Before

<img width="565" alt="Screen Shot 2020-06-11 at 7 23 58 PM" src="https://user-images.githubusercontent.com/992008/84458119-21d52c80-ac19-11ea-9659-df6830fc7584.png">

## After

<img width="570" alt="Screen Shot 2020-06-11 at 7 23 33 PM" src="https://user-images.githubusercontent.com/992008/84458089-1255e380-ac19-11ea-81ff-bc2b58af3ea4.png">
2020-06-12 02:51:19 +00:00
Luis Alvarez D 2cd691050a Add new import flow to CMS examples (#14053)
[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
2020-06-11 23:44:23 +00:00
Shu Uesugi 30f30af320 Storyblok CMS Example (#13993)
[ch2842]

- Demo: https://next-blog-storyblok.now.sh/
- Preview Mode: https://next-blog-storyblok.now.sh/api/preview?secret=5nnybHTKlbzkOa6r&slug=draft-post-test
2020-06-10 22:23:28 +00:00
Shu Uesugi dea4c2cbf4 ButterCMS Example (#13908)
[ch2580]

**Demo:** https://next-blog-buttercms.now.sh/
**Preview Mode:** https://next-blog-buttercms.now.sh/api/preview?secret=CdEAKMRT4tAwzqiD&slug=draft-post-test
2020-06-10 17:13:10 +00:00
Shu Uesugi 1935196e5e Prefer docs site for documentation links in CMS examples (#13826)
[ch579]

Some README files in `examples/cms-*` were linking to a documentation markdown file inside the repo (e.g. `/docs/basic-features/pages.md`) instead of the documentation website. We should always link to the documentation website from an example README file because (1) the website has better UX and (2) as we’re creating the examples pages on `next-site` (https://github.com/vercel/next-site/pull/672), we’d like to avoid extra processing of markdown content.
2020-06-06 00:23:20 +00:00
Jazib Sawar 6ce7a0378e CMS Cosmic Example (#13499)
* Add Cosmic CMS Example

* with native .env support, this file isn't needed anymore

* FIX use path alias

* Add cosmicjs package

* Fix alias import in pages/api/preview

* Added: react-imgix & lazysizes package

* Load lazysizes in layout

* Used imgix image with lazyloading

* Added avatar imgix optimizations

* EDITED: steps to install content, preview

* EDITED: demo link

* EDITED: Install step

* EDITED: preview link steps

* Edited: demo link

* FIXED: object_slug

* Screenshots

* Fixed object_slug link

* Update README.md

* Fix: formatting issue

* Updated readme and renamed .env to env.local

* Sanity checks

* Handle fallback data when expected

* Added link to the example in other examples

* Updated demo deployment

* Added example to docs

* minor lint fix

* Remove manual download step

* use vercel.json

Co-authored-by: Tony Spiro <tspiro@tonyspiro.com>
Co-authored-by: Luis Alvarez <luis@vercel.com>
2020-06-04 15:18:11 -05:00
Luis Alvarez D ef22a8b7c5 [Examples] Add missing cms links (#13683)
This was a change that I forgot to push into the Agility CMS example PR, adding it now.
2020-06-02 17:36:12 +00:00
Luis Alvarez D ad24a0c855 [Examples] Add WordPress Blog (#13194)
* Added most of the stuff

* Updated pages

* Removed unrequired deps

* API fixes

* Fixes fixes and updated readme

* Updated og image

* Added demo and links to example

* Updated packages

* update name. bump dependencies

* Renamed .env.example to .env.local.example

* Added node_modules to .gitignore

* use recommended config

* enable absolute import/alias support

* remove jsconfig.json

* allow HTML entities in post titles

* add underline to content links

* add basic ul & ol styles

* add code block styles

* add basic text alignment

* add basic image alignment styles

* adjust pre font-size and figcaption

* indent ul,ol lists to line up with grid

* add basic button styles

* add basic file styles

* add basic blockquote style

* add basic audio styles

* add h4 and enhance blockquote styles

* add basic cover block styles

* add basic verse styles

* add basic two-column block styles

* add tags

* add categories

* Only ignore .vercel

The rest is injected by create-next-app

* now → vercel

* npm init → npx

* Wordsmith

* Wordsmith

* Wordsmith

* Wordsmith

* Improve issue link

* Wordsmith

Co-authored-by: Greg Rickaby <greg@gregrickaby.com>
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
Co-authored-by: Shu Uesugi <shu@chibicode.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2020-06-01 17:17:20 -05:00