docs: add 'Open in StackBlitz' buttons to various examples (#25853)
This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either. Here's an example:  ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## 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 - [ ] Documentation added - [x] Examples updated - [ ] Telemetry added. In case of a feature if it's used or not. ## Documentation / Examples - [x] Make sure the linting passes
This commit is contained in:
Dominic Elm
GitHub
parent
3f2379a9ff
commit
d2caaeab64
154 changed files with 935 additions and 4 deletions
|
|
@ -124,12 +124,19 @@ When you add an example to the [examples](examples) directory, don’t forget to
|
|||
- To add additional installation instructions, please add it where appropriate.
|
||||
- To add additional notes, add `## Notes` section at the end.
|
||||
- Remove the `Deploy your own` section if your example can’t be immediately deployed to Vercel.
|
||||
- Remove the `Preview` section if the example doesn't work on [StackBlitz](http://stackblitz.com/) and file an issue [here](https://github.com/stackblitz/webcontainer-core).
|
||||
|
||||
````markdown
|
||||
# Example Name
|
||||
|
||||
Description
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/DIRECTORY_NAME)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
ReactRouter has a convenience property on the `Link` element to allow an author to set the _active_ className on a link. This example replicates that functionality using Next's own `Link`.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/active-class-name)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how to analyze the output bundles using [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/master/packages/next-bundle-analyzer)
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/analyze-bundles)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
@ -27,3 +33,11 @@ npm run analyze
|
|||
# or
|
||||
yarn analyze
|
||||
```
|
||||
|
||||
Once the build is completed, you can inspect the bundle by running:
|
||||
|
||||
```bash
|
||||
npm run serve
|
||||
# or
|
||||
yarn serve
|
||||
```
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"analyze": "cross-env ANALYZE=true yarn build"
|
||||
"analyze": "cross-env ANALYZE=true yarn build",
|
||||
"serve": "serve .next/analyze"
|
||||
},
|
||||
"dependencies": {
|
||||
"@next/bundle-analyzer": "^9.1.4",
|
||||
|
|
@ -15,5 +16,8 @@
|
|||
"react": "^16.8.0",
|
||||
"react-dom": "^16.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"serve": "^11.3.2"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
|
||||
In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client-auth)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
|
||||
In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Next.js ships with two forms of pre-rendering: [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) and [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering). This example shows how to perform Static Generation using a local [Apollo GraphQL](https://www.apollographql.com/docs/apollo-server/) schema within [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) and [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation). The end result is a Next.js application that uses one Apollo GraphQL schema to generate static pages at build time and also serve a GraphQL [API Route](https://nextjs.org/docs/api-routes/introduction) at runtime.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-apollo-server)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction)
|
|||
|
||||
This example shows how to create an `API` endpoint with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) headers, using the [cors](https://github.com/expressjs/cors) package.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-cors)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Next.js ships with [API routes](https://github.com/vercel/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows their usage alongside [apollo-server-micro](https://github.com/apollographql/apollo-server/tree/main/packages/apollo-server-micro) to provide simple GraphQL server consumed by Next.js app.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-graphql)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Next.js ships with [API routes](https://github.com/vercel/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows how to implement simple `middleware` to wrap around your `API` endpoints.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-middleware)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@ X-RateLimit-Limit: 10
|
|||
X-RateLimit-Remaining: 0
|
||||
```
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-rate-limit)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Next.js ships with [API routes](https://github.com/vercel/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows how it can be used to create your [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) `API`.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-rest)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction) which provides an easy solution to build your own `API`. This example shows how to create multiple `API` endpoints with serverless functions, which can execute independently.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Next.js has built-in support for [CSS Modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) allowing you to write scoped CSS by automatically creating a unique class name. CSS Module files can be imported anywhere in your application and you don't have to worry about collisions.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/basic-css)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows the most basic usage of `next export`. Without `exportPathMap`.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/basic-export)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@ The blog posts are stored in `/_posts` as Markdown files with front matter suppo
|
|||
|
||||
To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) and [`remark-html`](https://github.com/remarkjs/remark-html) to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by [`gray-matter`](https://github.com/jonschlinkert/gray-matter) and also sent in props to the page.
|
||||
|
||||
## How to use
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog-starter-typescript)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
|
|
@ -16,6 +20,8 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
|
|||
|
||||
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript&project-name=blog-starter-typescript&repository-name=blog-starter-typescript)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ The blog posts are stored in `/_posts` as Markdown files with front matter suppo
|
|||
|
||||
To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) and [`remark-html`](https://github.com/remarkjs/remark-html) to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by [`gray-matter`](https://github.com/jonschlinkert/gray-matter) and also sent in props to the page.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog-starter)
|
||||
|
||||
## Demo
|
||||
|
||||
[https://next-blog-starter.vercel.app/](https://next-blog-starter.vercel.app/)
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@ https://demo.vercel.blog
|
|||
1. Update the meta tags in `pages/_document.js`.
|
||||
1. Update the posts inside `pages/posts/*.md` with your own content.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -11,6 +11,12 @@ The catch all page is in `pages/post/[...slug]`, it matches any path after `/pos
|
|||
|
||||
You can use `next/link` as displayed in this example to route to these pages client side.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/catch-all-routes)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows the most basic example using Next.js' new custom routes featu
|
|||
|
||||
This approach is very helpful when you are trying to incrementally migrate your application to Next.js but still need to fallback to an existing application. You can add pages to your Next.js application one-by-one and then for non-migrated pages Next.js can proxy to the existing application until they are able to be migrated.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-routes-proxying)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ Most of the time the default Next.js server will be enough but there are times y
|
|||
|
||||
Because the Next.js server is a Node.js module you can combine it with any other part of the Node.js ecosystem. In this case we are using express.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-express?runScript=dev)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ Because the Next.js server is just a node.js module you can combine it with any
|
|||
|
||||
The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-fastify)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ Most of the time the default Next.js server will be enough but there are times y
|
|||
|
||||
Because the Next.js server is a Node.js module you can combine it with any other part of the node.js ecosystem. In this case we are using [Hapi](https://hapijs.com).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-hapi)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ Most of the time the default Next.js server will be enough but there are times y
|
|||
|
||||
Because the Next.js server is a Node.js module you can combine it with any other part of the Node.js ecosystem. In this case we are using [Koa](https://koajs.com/).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-koa)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ Most of the time the default Next.js server will be enough but there are times y
|
|||
|
||||
Because the Next.js server is a Node.js module you can combine it with any other part of the Node.js ecosystem. In this case we are using Polka.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-polka)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ The example shows how you can use [TypeScript](https://typescriptlang.com) on bo
|
|||
Server entry point is `server/index.ts` in development and `dist/index.js` in production.
|
||||
The second directory should be added to `.gitignore`.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-typescript)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ on the server and the client when necessary is so easy with Next.js.
|
|||
|
||||
By using `getStaticProps` Next.js will fetch data at build time from a page, and pre-render the page to static assets.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/data-fetch)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ This example shows how to do [dynamic routing](https://nextjs.org/docs/routing/d
|
|||
These routes are automatically matched by the server.
|
||||
You can use `next/link` as displayed in this example to route to these pages client side.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/dynamic-routing)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows how to use [environment variables in Next.js](https://nextjs.
|
|||
|
||||
The index page ([pages/index.js](pages/index.js)) will show you how to [access environment variables in the server](https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables), and how to [expose environment variables to the browser](https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/environment-variables)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ Next.js ships with [Fast Refresh](https://nextjs.org/docs/basic-features/fast-re
|
|||
|
||||
This demos shows how the state of an auto incrementing value and a classic counter is preserved after edits or if there are errors.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/fast-refresh-demo)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ For every page you can inject elements into the page head. This way you can add
|
|||
|
||||
This example shows in `pages/index.js` how to add a title and a couple of meta tags.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/head-elements)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows how to use [headers in Next.js](https://nextjs.org/docs/api-r
|
|||
|
||||
The index page ([`pages/index.js`](pages/index.js)) has a list of links to pages with custom headers set up in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/headers)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows the most basic idea behind Next. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities. The `day` directory shows that you can have subdirectories.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/hello-world)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows how to create internationalized pages using Next.js and the i
|
|||
|
||||
For further documentation on this feature see the documentation [here](https://nextjs.org/docs/advanced-features/i18n-routing)
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/i18n-routing)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows how to use the [Image Component in Next.js](https://nextjs.or
|
|||
|
||||
The index page ([`pages/index.js`](pages/index.js)) has a couple images, one internal image and one external image. In [`next.config.js`](next.config.js), the `domains` property is used to enable external images. The other pages demonstrate the different layouts. Run or deploy the app to see how it works!
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/image-component)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows a very common use case when building websites where you need to repeat some sort of layout for all your pages. Our pages are: `home`, `about` and `contact` and they all share the same `<head>` settings, the `<nav>` and the `<footer>`. Further more, the title (and potentially other head elements) can be sent as a prop to the layout component so that it's customizable in all pages.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/layout-component)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Taking advantage of the composable nature of React components we can modularize our apps in self-contained, meaningful components. This example has a page under `pages/index.js` that uses `components/paragraph.js` and `components/post.js` that can be styled and managed separately.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/nested-components)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@ This example features:
|
|||
- An app with a component that must only be rendered in the client
|
||||
- A loading component that will be displayed before rendering the client-only component
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/progressive-render)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows how to use [redirects in Next.js](https://nextjs.org/docs/api
|
|||
|
||||
The index page ([`pages/index.js`](pages/index.js)) has a list of links that match the redirects defined in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/redirects)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows how to use [rewrites in Next.js](https://nextjs.org/docs/api-
|
|||
|
||||
The index page ([`pages/index.js`](pages/index.js)) has a list of links that match the rewrites defined in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/rewrites)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@ Checkout the [demo](https://styled-jsx-with-csp.vercel.app/) and notice the foll
|
|||
- `meta` tag to pass on the `nonce` to styled-jsx for client-side rendering.
|
||||
- `style` tags with `nonce` attributes.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/styled-jsx-with-csp)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example uses a custom `.babelrc` to add support for importing `.svg` files and rendering them as React components. [babel-plugin-inline-react-svg](https://www.npmjs.com/package/babel-plugin-inline-react-svg) is used to handle transpiling the SVGs.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/svg-components)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example uses [Preact](https://github.com/preactjs/preact) instead of React. It's a React like UI framework which is fast and small.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/using-preact)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ This example features:
|
|||
- An app linking pages using `next/router` instead of `<Link>` component.
|
||||
- Access the pathname using `next/router` and render it in a component
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/using-router)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how to configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-absolute-imports)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how to use Next.js along with [Ant Design of React](https://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ant-design)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example features how to use a different styling solution than [styled-jsx](
|
|||
|
||||
For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-aphrodite)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Shows how to use \_app.js to implement a global layout for all pages.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-app-layout)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,7 +2,15 @@
|
|||
|
||||
This example shows how to use Next.js along with Atlaskit of React. This is intended to show the integration of this UI toolkit with the Framework.
|
||||
|
||||
Install it and run:
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-atlaskit)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example features how to configure and use [`babel-macros`](https://github.com/kentcdodds/babel-macros) which allows you to easily add babel plugins which export themselves as a macro without needing to configure them.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-babel-macros)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -34,6 +34,12 @@ function getUser() {
|
|||
}
|
||||
```
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-cerebral)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ Next.js and chakra-ui have built-in TypeScript declarations, so we'll get autoco
|
|||
|
||||
We are connecting the Next.js `_app.js` with `chakra-ui`'s Provider and theme so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra
|
|||
|
||||
We are connecting the Next.js `_app.js` with `chakra-ui`'s Theme and ColorMode containers so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-chakra-ui)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example features how to use [Compiled](https://github.com/atlassian-labs/compiled) as the build time CSS-in-JS styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-compiled-css)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ The `pages/index.js` shows how to, from the home page, increment and decrement t
|
|||
|
||||
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](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-context-api)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows how to use [cssed](https://github.com/okotoki/cssed), a CSS-i
|
|||
|
||||
We are creating `div` element with local scoped styles. The styles includes the use of pseudo-selector.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-cssed)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@ This example features:
|
|||
|
||||
> Most of the time, when writing a custom `.babelrc` file, you need to add `next/babel` as a preset.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-custom-babel-config)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows how to use a different styling solution than [styled-jsx](htt
|
|||
|
||||
For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-cxs)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ Have you ever wanted to have an editor like medium.com in your Next.js app? Draf
|
|||
|
||||
This example aims to provide a fully customizable example of the famous medium editor with DraftJS. The goal was to get it as customizable as possible, and fully working with Next.js without using the react-no-ssr package.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-draft-js)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Shows how to use `pages/_app.js` to implement _dynamic_ layouts for pages. This is achieved by attaching a static `Layout` property to each page that needs a different layout. In that way, once we use `pages/_app.js` to wrap our pages, we can get it from `Component.Layout` and render it accordingly.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-dynamic-app-layout)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This examples shows how to dynamically import modules via [`import()`](https://github.com/tc39/proposal-dynamic-import) API
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-dynamic-import)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ Extract and inline critical css with
|
|||
[@emotion/server](https://github.com/emotion-js/emotion/tree/master/packages/server),
|
||||
[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css)
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion-vanilla)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com):
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ Extract and inline critical css with
|
|||
[@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
|
||||
and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -12,6 +12,12 @@ app as `process.env.RESTURL_SPEAKERS`.
|
|||
|
||||
View the docs on [`next.config.js`](https://nextjs.org/docs/api-reference/next.config.js/introduction) for more information.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-env-from-next-config-js)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows a Next.js application using the built-in ESLint setup with th
|
|||
|
||||
Note: ESLint running during build (`next build`) is still experimental and needs to be enabled via an `{ experimental: eslint }` flag in `next.config.js`.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-eslint)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example features how to use a different styling solution than [styled-jsx](
|
|||
|
||||
For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-fela)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ This example showcase how to perform SSR & extract and inline critical css with
|
|||
|
||||
If you are running into any issues with this example, feel free to open-up an issue at https://github.com/kuldeepkeshwar/filbert-js/issues.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-filbert)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how you can use Flow, with the transform-flow-strip-types babel plugin stripping flow type annotations from your output code.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-flow)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ Framer [`Motion`](https://github.com/framer/motion) is a production-ready animat
|
|||
|
||||
When using Next's `<Link>` component, you will likely want to [disable the default scroll behavior](https://nextjs.org/docs/api-reference/next/link#disable-scrolling-to-the-top-of-the-page) for a more seamless navigation experience. Scrolling to the top of a page can be re-enabled by adding a `onExitComplete` callback on the `AnimatePresence` component.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-framer-motion)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@ Why is there a peanut emoji?
|
|||
|
||||
Goober initially started with a slogan as "a less than 1KB css-in-js library at the cost of _peanuts_". Goober also means a kind of peanut so, it fits!
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-goober)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example shows how to use the [Grommet UI library](https://grommet.io/) with
|
|||
|
||||
It works by extending the `<Document />` to enable server-side rendering of `styled-components`, which are used by Grommet, and extending `<App />` to provide a Grommet context (and optionally a theme) for all child pages and components.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-grommet)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example features how to use [GSAP](https://greensock.com/gsap/) as the animation library within a Next.js app.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-gsap)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how to use Next.js along with [HLS.js](https://github.com/video-dev/hls.js/) to playback HLS videos in all modern browsers.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-hls-js)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ This example uses [next-intl](https://github.com/amannn/next-intl), a minimal, b
|
|||
- 💡 A hooks-only API ensures that you can use the same API for `children` as well as for attributes which expect strings.
|
||||
- 🚀 Integrates with both static as well as server side rendering.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-i18n-next-intl)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example uses [rosetta](https://github.com/lukeed/rosetta), react hooks and
|
|||
|
||||
In `next.config.js` you can configure the fallback language.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-i18n-rosetta)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
Example app using Next.js with [Ionic](https://ionicframework.com/) and [TypeScript](https://www.typescriptlang.org/). You can learn more about Ionic in the [documentation](https://ionicframework.com/docs).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ionic-typescript)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -30,6 +30,12 @@ On the next-iron-session repository (https://github.com/vvo/next-iron-session) y
|
|||
- Express / Connect middlewares
|
||||
- Multiple encryption keys (passwords) to allow for seamless updates or just password rotation
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-iron-session)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example features how to use [linaria](https://linaria.dev/) as the styling
|
|||
|
||||
We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseudo-selector and CSS animations.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-linaria)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ It features:
|
|||
- Using `next/router` to identify different router events
|
||||
- Uses [nprogress](https://github.com/rstacruz/nprogress) as the loading indicator.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-loading)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how to use [MDBReact](https://mdbootstrap.com/docs/react) with Next.js.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mdbreact)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows using [MDX](https://github.com/mdx-js/mdx) as top level pages for your next.js app.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mdx)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example features an app with Mocha tests.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mocha)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
[Netlify CMS](https://www.netlifycms.org/) is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-netlify-cms)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example demonstrates how to use Next.js' built-in CSS imports and CSS modules support.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-css)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ The [`next-page-transitions`](https://github.com/illinois/next-page-transitions)
|
|||
|
||||
This example includes two pages with links between them. The "About" page demonstrates how `next-page-transitions` makes it easy to add a loading state when navigating to a page: it will wait for the page to "load" its content (in this examples, that's simulated with a timeout) and then hide the loading indicator and animate in the page when it's done.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-page-transitions)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example demonstrates how to use Next.js' built-in Global Sass/Scss imports and Component-Level Sass/Scss modules support.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-sass)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how you integrate [next-seo](https://github.com/garmeeh/next-seo), a plugin to help manage your SEO in Next.js.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-seo)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ This example uses [`next-sitemap`](https://github.com/iamvishnusankar/next-sitem
|
|||
|
||||
`next-sitemap` allows the generation of sitemaps along with `robots.txt` and provides the feature to split large sitemaps into multiple files. Checkout the [`next-sitemap` documentation](https://github.com/iamvishnusankar/next-sitemap) to learn more.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-sitemap)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This is an example of using [next-translate](https://github.com/vinissimus/next-translate) in a Next.js project.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-translate)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ For this purpose we are extending `<App />` of injected `<ThemeProvider/>`, and
|
|||
|
||||
This fork comes from [styled-components-example](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-orbit-components)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example uses [overmind](https://overmindjs.org/?view=react&typescript=false).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-overmind)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ Next.js and Paste have built-in TypeScript declarations, so you'll get autocompl
|
|||
|
||||
[`pages/_app.tsx`](pages/_app.tsx) is used to connect `Paste`'s Theme Provider so the pages can have app-wide styles.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-paste-typescript)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how to use Next.js with the [PatternFly 4](https://www.patternfly.org/v4/) design system.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-patternfly)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how to use [Next.js](https://github.com/vercel/next.js) along with [Plausible](https://plausible.io) via the [next-plausible](https://github.com/4lejandrito/next-plausible) package. A custom [\_app.js](https://nextjs.org/docs/advanced-features/custom-app) is used to wrap our app with the [`PlausibleProvider`](https://github.com/4lejandrito/next-plausible#plausibleprovider-props) to track page views and [custom events](https://github.com/4lejandrito/next-plausible#send-custom-events) are shown as well.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-plausible)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ If your own code or any external npm dependencies require features not supported
|
|||
|
||||
In this case, you should add a top-level import for the specific polyfill you need in your Custom `<App>` or the individual component.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-polyfills)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
An example of Server Side Rendered React [Portals](https://reactjs.org/docs/portals.html) with [`@jesstelford/react-portal-universal`](https://www.npmjs.com/package/@jesstelford/react-portal-universal) and Next.js.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-portals-ssr)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example show how to use the React [Portals](https://reactjs.org/docs/portals.html) feature with Next.js.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-portals)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ This example features an app with four simple pages:
|
|||
- About: Imperative API
|
||||
- Contact: Disable API
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-prefetching)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
|
||||
Quill does not suppport SSR, so it's only loaded and rendered in the browser.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-quill-js)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
This example shows how to use Next.js along with [react-bootstrap](https://react-bootstrap.github.io/).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-bootstrap)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue