f52955ec94
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 |
||
|---|---|---|
| .. | ||
| components | ||
| pages | ||
| .gitignore | ||
| package.json | ||
| README.md | ||
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 off 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.
Preview
Preview the example live on StackBlitz:
Deploy your own
Deploy the example using 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).