rsnext/examples/with-context-api
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
..
components chore: Remove redundant imports in several examples (#13030) 2020-05-18 13:02:23 -04:00
pages Upgrade to Prettier 2 (#13061) 2020-05-18 15:24:37 -04:00
.gitignore Added .gitignore to examples that are deployed to vercel (#15127) 2020-07-16 10:52:23 -04:00
package.json Ensure all examples are MIT licensed (#16691) 2020-08-29 22:32:35 -04:00
README.md Fix deploy buttons URLs (#20834) 2021-01-07 01:40:29 +00:00

Hello World example

This example shows how to use react context api in our app.

It provides an example of using pages/_app.js to include the context api provider and then shows how both the pages/index.js and pages/about.js can both share the same data using the context api consumer.

We start of by creating two contexts. One that actually never changes (CounterDispatchContext) and one that changes more often (CounterStateContext).

The pages/index.js shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).

The pages/about.js shows how to pass an increment value from the about page into the context provider itself.

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-context-api with-context-api-app
# or
yarn create next-app --example with-context-api with-context-api-app

Deploy it to the cloud with Vercel (Documentation).