mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
53f2d88566
…aces (home and about pages). This makes it the example more clear and why someone might want to use _app.js in the first place. Also, added a button on the about page that allows for passing and arbitrary value from the about page to the context provider. I disagree with the naming convention of calling the class CounterProvider. It includes both a Provider and Consumer so it should have some name that covers both. Maybe it should be called CounterContext but I did not change that. I've seen other examples of the same naming conversion so figure I'm the odd duck here (still think it's wrong no matter how many people do it). |
||
|---|---|---|
| .. | ||
| components | ||
| pages | ||
| package.json | ||
| README.md | ||
Hello World example
How to use
Using create-next-app
Execute create-next-app with Yarn or npx 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
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-context-api
cd with-context-api
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with now (download)
now
The idea behind the example*
This example shows how to use react context api in our app.
It provides an example of using pages/_app.js to include 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.
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, from the about page, how to pass an increment value from the about page into the context provider itself.
*Based on WesBos example.