mirror of https://github.com/hanzoai/next.js.git synced 2026-09-24 17:00:51 +00:00

Files

T

Jam BalayaandGitHub 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

pages

chore(examples): use default prettier for examples/templates (#60530 )

2024-01-11 16:01:44 -07:00

.gitignore

examples: update gitignore files for parity for yarn recommendations (#71956 )

2024-12-17 01:24:53 +00:00

package.json

Update Examples to use React 18 (#42027 )

2022-10-28 17:43:20 +00:00

README.md

examples: add StackBlitz preview to README.md (#73546 )

2025-01-14 05:24:51 +00:00

README.md

Next.js example with `graphql-react`

graphql-react is a GraphQL client for React using modern context and hooks APIs that is lightweight (< 3 KB size limited) but powerful; the first Relay and Apollo alternative with server side rendering.

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

How to use

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

npx create-next-app --example with-graphql-react with-graphql-react-app

yarn create next-app --example with-graphql-react with-graphql-react-app

pnpm create next-app --example with-graphql-react with-graphql-react-app

Deploy it to the cloud with Vercel (Documentation).

Notes

In pages/_app.js a custom App component is decorated with the withGraphQLApp higher-order component from next-graphql-react, generating a graphql prop that populates the GraphQLProvider component from graphql-react.
In pages/index.js the useGraphQL React hook from graphql-react is used to query the GraphQL Pokémon API and show a picture of Pikachu.

README.md

Next.js example with graphql-react

Deploy your own

How to use

Notes

Next.js example with `graphql-react`