diff --git a/contributing.md b/contributing.md
index eb5c27aded797..03d2a06cec1af 100644
--- a/contributing.md
+++ b/contributing.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md
index 03d46cea4d39e..902d79e24b7fe 100644
--- a/examples/active-class-name/README.md
+++ b/examples/active-class-name/README.md
@@ -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/):
+
+[![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)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/analyze-bundles/README.md b/examples/analyze-bundles/README.md
index abea34df8353d..8aec1e56c79c4 100644
--- a/examples/analyze-bundles/README.md
+++ b/examples/analyze-bundles/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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
+```
diff --git a/examples/analyze-bundles/package.json b/examples/analyze-bundles/package.json
index a5caa9e790812..93a3d8d5dd020 100644
--- a/examples/analyze-bundles/package.json
+++ b/examples/analyze-bundles/package.json
@@ -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"
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/README.md b/examples/api-routes-apollo-server-and-client-auth/README.md
index 68ca3be46917e..6385acf21368a 100644
--- a/examples/api-routes-apollo-server-and-client-auth/README.md
+++ b/examples/api-routes-apollo-server-and-client-auth/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/api-routes-apollo-server-and-client/README.md b/examples/api-routes-apollo-server-and-client/README.md
index 193136027c813..96c454e0527c6 100644
--- a/examples/api-routes-apollo-server-and-client/README.md
+++ b/examples/api-routes-apollo-server-and-client/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/api-routes-apollo-server/README.md b/examples/api-routes-apollo-server/README.md
index 320060be87784..9b4209908adb2 100644
--- a/examples/api-routes-apollo-server/README.md
+++ b/examples/api-routes-apollo-server/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/api-routes-cors/README.md b/examples/api-routes-cors/README.md
index 5fdee8ab744b8..5ba1b348401fc 100644
--- a/examples/api-routes-cors/README.md
+++ b/examples/api-routes-cors/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/api-routes-graphql/README.md b/examples/api-routes-graphql/README.md
index 1a31922c94a90..1c51cf4d7e38b 100644
--- a/examples/api-routes-graphql/README.md
+++ b/examples/api-routes-graphql/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/api-routes-middleware/README.md b/examples/api-routes-middleware/README.md
index 7ed15b6ff90a5..44a12e118ddcb 100644
--- a/examples/api-routes-middleware/README.md
+++ b/examples/api-routes-middleware/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/api-routes-rate-limit/README.md b/examples/api-routes-rate-limit/README.md
index e3397b2a9fc4e..0b9f81c064166 100644
--- a/examples/api-routes-rate-limit/README.md
+++ b/examples/api-routes-rate-limit/README.md
@@ -16,6 +16,12 @@ X-RateLimit-Limit: 10
 X-RateLimit-Remaining: 0
 ```
 
+## 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/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):
diff --git a/examples/api-routes-rest/README.md b/examples/api-routes-rest/README.md
index 1136ed9d7efbb..c8f176bd5e2c1 100644
--- a/examples/api-routes-rest/README.md
+++ b/examples/api-routes-rest/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/api-routes/README.md b/examples/api-routes/README.md
index 334bf15feedb0..87e9fa6321f9d 100644
--- a/examples/api-routes/README.md
+++ b/examples/api-routes/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/basic-css/README.md b/examples/basic-css/README.md
index a7e56f8b5f0dc..0f6d8517a7b75 100644
--- a/examples/basic-css/README.md
+++ b/examples/basic-css/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/basic-export/README.md b/examples/basic-export/README.md
index 06f34a95483e2..e53128be24960 100644
--- a/examples/basic-export/README.md
+++ b/examples/basic-export/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/blog-starter-typescript/README.md b/examples/blog-starter-typescript/README.md
index c9156b6a3be42..b74a6e5ad721a 100644
--- a/examples/blog-starter-typescript/README.md
+++ b/examples/blog-starter-typescript/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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
 
 [![Deploy with Vercel](https://vercel.com/button)](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
diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md
index bcfee0c665a77..f4966f6d10aba 100644
--- a/examples/blog-starter/README.md
+++ b/examples/blog-starter/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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/)
diff --git a/examples/blog/README.md b/examples/blog/README.md
index fb4ec38394c84..2d6fd25087697 100644
--- a/examples/blog/README.md
+++ b/examples/blog/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/catch-all-routes/README.md b/examples/catch-all-routes/README.md
index 36e1968d58861..3b4cfcd3be24f 100644
--- a/examples/catch-all-routes/README.md
+++ b/examples/catch-all-routes/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/custom-routes-proxying/README.md b/examples/custom-routes-proxying/README.md
index b3bba7649f3e0..bd365fd402f5b 100644
--- a/examples/custom-routes-proxying/README.md
+++ b/examples/custom-routes-proxying/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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:
diff --git a/examples/custom-server-express/README.md b/examples/custom-server-express/README.md
index d00d8ea7d9af6..b23bfed40dfa5 100644
--- a/examples/custom-server-express/README.md
+++ b/examples/custom-server-express/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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:
diff --git a/examples/custom-server-fastify/README.md b/examples/custom-server-fastify/README.md
index 1a5ceeb5d5610..a166ffafa511d 100644
--- a/examples/custom-server-fastify/README.md
+++ b/examples/custom-server-fastify/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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:
diff --git a/examples/custom-server-hapi/README.md b/examples/custom-server-hapi/README.md
index 4dcab80721166..74b0658274732 100644
--- a/examples/custom-server-hapi/README.md
+++ b/examples/custom-server-hapi/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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:
diff --git a/examples/custom-server-koa/README.md b/examples/custom-server-koa/README.md
index 44371ea4bba28..f6ed873c4543a 100644
--- a/examples/custom-server-koa/README.md
+++ b/examples/custom-server-koa/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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:
diff --git a/examples/custom-server-polka/README.md b/examples/custom-server-polka/README.md
index e48e55244b2ba..d87dc4ad62f2d 100644
--- a/examples/custom-server-polka/README.md
+++ b/examples/custom-server-polka/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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:
diff --git a/examples/custom-server-typescript/README.md b/examples/custom-server-typescript/README.md
index ce15edb5d6ae5..f07b0f4685da2 100644
--- a/examples/custom-server-typescript/README.md
+++ b/examples/custom-server-typescript/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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:
diff --git a/examples/data-fetch/README.md b/examples/data-fetch/README.md
index e47745a3fe955..0c1d7ae8f644e 100644
--- a/examples/data-fetch/README.md
+++ b/examples/data-fetch/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/dynamic-routing/README.md b/examples/dynamic-routing/README.md
index aac91caf04318..9b1fbeb17066d 100644
--- a/examples/dynamic-routing/README.md
+++ b/examples/dynamic-routing/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/environment-variables/readme.md b/examples/environment-variables/readme.md
index 6a3b50bce7eed..bf4a59319c1dc 100644
--- a/examples/environment-variables/readme.md
+++ b/examples/environment-variables/readme.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/fast-refresh-demo/README.md b/examples/fast-refresh-demo/README.md
index c5bfb8ea0a71f..1bf24daecb8c1 100644
--- a/examples/fast-refresh-demo/README.md
+++ b/examples/fast-refresh-demo/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/head-elements/README.md b/examples/head-elements/README.md
index 61f9b53b76ee2..e133dbda310fb 100644
--- a/examples/head-elements/README.md
+++ b/examples/head-elements/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/headers/README.md b/examples/headers/README.md
index 168f3c0650ceb..d109b056a47c1 100644
--- a/examples/headers/README.md
+++ b/examples/headers/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/hello-world/README.md b/examples/hello-world/README.md
index 9008bdc23e71b..76c8d7020ba15 100644
--- a/examples/hello-world/README.md
+++ b/examples/hello-world/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/i18n-routing/README.md b/examples/i18n-routing/README.md
index 38bbe207de1a8..f9956e869d054 100644
--- a/examples/i18n-routing/README.md
+++ b/examples/i18n-routing/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/image-component/README.md b/examples/image-component/README.md
index c44c4b139ebad..1b9eaa816a751 100644
--- a/examples/image-component/README.md
+++ b/examples/image-component/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/layout-component/README.md b/examples/layout-component/README.md
index e9275efae9bf0..588348442c184 100644
--- a/examples/layout-component/README.md
+++ b/examples/layout-component/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/nested-components/README.md b/examples/nested-components/README.md
index 8aa90224ae367..8ac9a8885bee4 100644
--- a/examples/nested-components/README.md
+++ b/examples/nested-components/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md
index cec6253c342d3..af303c3ed4e56 100644
--- a/examples/progressive-render/README.md
+++ b/examples/progressive-render/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/redirects/README.md b/examples/redirects/README.md
index 88cbcfe10c7b8..4a946785b3821 100644
--- a/examples/redirects/README.md
+++ b/examples/redirects/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/rewrites/README.md b/examples/rewrites/README.md
index 5281816b25131..2bbf32b198d9f 100644
--- a/examples/rewrites/README.md
+++ b/examples/rewrites/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/styled-jsx-with-csp/README.md b/examples/styled-jsx-with-csp/README.md
index edc94955763f6..3c2272ebd260c 100644
--- a/examples/styled-jsx-with-csp/README.md
+++ b/examples/styled-jsx-with-csp/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/svg-components/README.md b/examples/svg-components/README.md
index bdb18158b40e2..d7517c14b6290 100644
--- a/examples/svg-components/README.md
+++ b/examples/svg-components/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/using-preact/README.md b/examples/using-preact/README.md
index c298b55d2721b..409926190a9b3 100644
--- a/examples/using-preact/README.md
+++ b/examples/using-preact/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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:
diff --git a/examples/using-router/README.md b/examples/using-router/README.md
index cc3ab1c3976a1..da0827e60a8d0 100644
--- a/examples/using-router/README.md
+++ b/examples/using-router/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-absolute-imports/README.md b/examples/with-absolute-imports/README.md
index c32e4eca78479..191941f7df44d 100644
--- a/examples/with-absolute-imports/README.md
+++ b/examples/with-absolute-imports/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-ant-design/README.md b/examples/with-ant-design/README.md
index 048316057ec35..c30248cc42072 100644
--- a/examples/with-ant-design/README.md
+++ b/examples/with-ant-design/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-aphrodite/README.md b/examples/with-aphrodite/README.md
index b847040e8cd06..c85ba767b0081 100644
--- a/examples/with-aphrodite/README.md
+++ b/examples/with-aphrodite/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-app-layout/README.md b/examples/with-app-layout/README.md
index 2e16bdd1f251e..f3efd43e67a0a 100644
--- a/examples/with-app-layout/README.md
+++ b/examples/with-app-layout/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-atlaskit/README.md b/examples/with-atlaskit/README.md
index e7ef42e6bb0fa..97c8df5cc19ff 100644
--- a/examples/with-atlaskit/README.md
+++ b/examples/with-atlaskit/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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
diff --git a/examples/with-babel-macros/README.md b/examples/with-babel-macros/README.md
index fee17d90277d5..70df67163b70d 100644
--- a/examples/with-babel-macros/README.md
+++ b/examples/with-babel-macros/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-cerebral/README.md b/examples/with-cerebral/README.md
index 42e068afeef18..3ad6f043f2648 100644
--- a/examples/with-cerebral/README.md
+++ b/examples/with-cerebral/README.md
@@ -34,6 +34,12 @@ function getUser() {
 }
 ```
 
+## 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/with-cerebral)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-chakra-ui-typescript/README.md b/examples/with-chakra-ui-typescript/README.md
index 1d2a9199b7966..921587d439b25 100644
--- a/examples/with-chakra-ui-typescript/README.md
+++ b/examples/with-chakra-ui-typescript/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-chakra-ui/README.md b/examples/with-chakra-ui/README.md
index 46a8d54135cb7..1c1cf612d6ac1 100644
--- a/examples/with-chakra-ui/README.md
+++ b/examples/with-chakra-ui/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-compiled-css/README.md b/examples/with-compiled-css/README.md
index 2d4fd0d1d6c52..a3f0696f57091 100644
--- a/examples/with-compiled-css/README.md
+++ b/examples/with-compiled-css/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-context-api/README.md b/examples/with-context-api/README.md
index 0307f1fadb59a..4404e672b947f 100644
--- a/examples/with-context-api/README.md
+++ b/examples/with-context-api/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-cssed/README.md b/examples/with-cssed/README.md
index 5e2dedfb9052d..ef73cfada6aef 100644
--- a/examples/with-cssed/README.md
+++ b/examples/with-cssed/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-custom-babel-config/README.md b/examples/with-custom-babel-config/README.md
index 01f05f36bc9df..4f46c83c6e631 100644
--- a/examples/with-custom-babel-config/README.md
+++ b/examples/with-custom-babel-config/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-cxs/README.md b/examples/with-cxs/README.md
index dda8a6151269b..7d0c534c5e1b3 100644
--- a/examples/with-cxs/README.md
+++ b/examples/with-cxs/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-draft-js/README.md b/examples/with-draft-js/README.md
index 815c914d37e34..b6dab73a8e131 100644
--- a/examples/with-draft-js/README.md
+++ b/examples/with-draft-js/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-dynamic-app-layout/README.md b/examples/with-dynamic-app-layout/README.md
index d23ec233c4f42..f36bbdd67943a 100644
--- a/examples/with-dynamic-app-layout/README.md
+++ b/examples/with-dynamic-app-layout/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-dynamic-import/README.md b/examples/with-dynamic-import/README.md
index 0360408bc002e..54c09017e5f33 100644
--- a/examples/with-dynamic-import/README.md
+++ b/examples/with-dynamic-import/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-emotion-vanilla/README.md b/examples/with-emotion-vanilla/README.md
index f43e633dfc36b..2566cddf31c1d 100644
--- a/examples/with-emotion-vanilla/README.md
+++ b/examples/with-emotion-vanilla/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion-vanilla)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com):
diff --git a/examples/with-emotion/README.md b/examples/with-emotion/README.md
index bb4ea630bafcc..12b4f677a8d04 100644
--- a/examples/with-emotion/README.md
+++ b/examples/with-emotion/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-env-from-next-config-js/README.md b/examples/with-env-from-next-config-js/README.md
index d511202a31bca..6c3172b0f55ff 100644
--- a/examples/with-env-from-next-config-js/README.md
+++ b/examples/with-env-from-next-config-js/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-eslint/README.md b/examples/with-eslint/README.md
index bad528f8dff33..0a0291defaaa8 100644
--- a/examples/with-eslint/README.md
+++ b/examples/with-eslint/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-fela/README.md b/examples/with-fela/README.md
index f42ee2e5754e5..82bb11567c222 100755
--- a/examples/with-fela/README.md
+++ b/examples/with-fela/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-filbert/README.md b/examples/with-filbert/README.md
index b98156888bdd2..3606eaa97526f 100644
--- a/examples/with-filbert/README.md
+++ b/examples/with-filbert/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-flow/README.md b/examples/with-flow/README.md
index dd8146e33b72f..f119f10bd9cdd 100644
--- a/examples/with-flow/README.md
+++ b/examples/with-flow/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-framer-motion/README.md b/examples/with-framer-motion/README.md
index d09cf489c7fd9..74f5fd3f8ef75 100644
--- a/examples/with-framer-motion/README.md
+++ b/examples/with-framer-motion/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-goober/README.md b/examples/with-goober/README.md
index 95f6c1d1fb1b3..13eb2ddde2608 100644
--- a/examples/with-goober/README.md
+++ b/examples/with-goober/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-grommet/README.md b/examples/with-grommet/README.md
index 28861444023d1..ba87603a8c9b4 100644
--- a/examples/with-grommet/README.md
+++ b/examples/with-grommet/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-gsap/README.md b/examples/with-gsap/README.md
index 3dbb4c5f67ee5..7ed8604ffbbd5 100644
--- a/examples/with-gsap/README.md
+++ b/examples/with-gsap/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-hls-js/README.md b/examples/with-hls-js/README.md
index 49740bd6bde74..da89f3ab92c85 100644
--- a/examples/with-hls-js/README.md
+++ b/examples/with-hls-js/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-i18n-next-intl/README.md b/examples/with-i18n-next-intl/README.md
index 02746e73ddb8f..7df35698b4888 100644
--- a/examples/with-i18n-next-intl/README.md
+++ b/examples/with-i18n-next-intl/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-i18n-rosetta/README.md b/examples/with-i18n-rosetta/README.md
index f5b387b4e0220..c551417283939 100644
--- a/examples/with-i18n-rosetta/README.md
+++ b/examples/with-i18n-rosetta/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-ionic-typescript/README.md b/examples/with-ionic-typescript/README.md
index a56e57f9a0321..b04b434bda444 100644
--- a/examples/with-ionic-typescript/README.md
+++ b/examples/with-ionic-typescript/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-iron-session/README.md b/examples/with-iron-session/README.md
index 39516159a632b..f87507ba62b49 100644
--- a/examples/with-iron-session/README.md
+++ b/examples/with-iron-session/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-linaria/README.md b/examples/with-linaria/README.md
index dd4d99ea78596..21449dd3d590b 100644
--- a/examples/with-linaria/README.md
+++ b/examples/with-linaria/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-loading/README.md b/examples/with-loading/README.md
index 5e3c0fd4d4dad..b04e344081a12 100644
--- a/examples/with-loading/README.md
+++ b/examples/with-loading/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-mdbreact/README.md b/examples/with-mdbreact/README.md
index 979ca6d954e6f..87e469e1caa1f 100644
--- a/examples/with-mdbreact/README.md
+++ b/examples/with-mdbreact/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-mdx/README.md b/examples/with-mdx/README.md
index 5544468ae2c3d..18174cc77f1b0 100644
--- a/examples/with-mdx/README.md
+++ b/examples/with-mdx/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-mocha/README.md b/examples/with-mocha/README.md
index e85661e69a725..4e2a154e6668b 100644
--- a/examples/with-mocha/README.md
+++ b/examples/with-mocha/README.md
@@ -2,6 +2,12 @@
 
 This example features an app with Mocha tests.
 
+## 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/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:
diff --git a/examples/with-netlify-cms/README.md b/examples/with-netlify-cms/README.md
index 992bc55df8070..f06e5531d1917 100644
--- a/examples/with-netlify-cms/README.md
+++ b/examples/with-netlify-cms/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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:
diff --git a/examples/with-next-css/README.md b/examples/with-next-css/README.md
index 03db91557a14d..d60a1e0c1fe82 100644
--- a/examples/with-next-css/README.md
+++ b/examples/with-next-css/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-next-page-transitions/README.md b/examples/with-next-page-transitions/README.md
index a17ca19523015..cd0d2cf7c76df 100644
--- a/examples/with-next-page-transitions/README.md
+++ b/examples/with-next-page-transitions/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-next-sass/README.md b/examples/with-next-sass/README.md
index d28ee63b95b75..4dcb7a3adffec 100644
--- a/examples/with-next-sass/README.md
+++ b/examples/with-next-sass/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-next-seo/README.md b/examples/with-next-seo/README.md
index ac45eb91f4f37..b997e82dafb04 100644
--- a/examples/with-next-seo/README.md
+++ b/examples/with-next-seo/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-next-sitemap/README.md b/examples/with-next-sitemap/README.md
index 89b3f18cd4978..45036ae4bdfe9 100644
--- a/examples/with-next-sitemap/README.md
+++ b/examples/with-next-sitemap/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-next-translate/README.md b/examples/with-next-translate/README.md
index 5d8a46fbcf5fa..18ed05588a628 100644
--- a/examples/with-next-translate/README.md
+++ b/examples/with-next-translate/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-orbit-components/README.md b/examples/with-orbit-components/README.md
index 4665b477b2689..97d4bf458a835 100644
--- a/examples/with-orbit-components/README.md
+++ b/examples/with-orbit-components/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-overmind/README.md b/examples/with-overmind/README.md
index 0c499897ed1b8..9139c340c6311 100644
--- a/examples/with-overmind/README.md
+++ b/examples/with-overmind/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-paste-typescript/README.md b/examples/with-paste-typescript/README.md
index 6e920e9a12af1..49ab0be54966c 100644
--- a/examples/with-paste-typescript/README.md
+++ b/examples/with-paste-typescript/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-patternfly/README.md b/examples/with-patternfly/README.md
index 0315a80073d43..4b495d768f875 100644
--- a/examples/with-patternfly/README.md
+++ b/examples/with-patternfly/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-plausible/README.md b/examples/with-plausible/README.md
index a92f3c0d5b28d..1fb0e0422fba3 100644
--- a/examples/with-plausible/README.md
+++ b/examples/with-plausible/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-polyfills/README.md b/examples/with-polyfills/README.md
index 24db2515b9cf9..eadd7f96df430 100644
--- a/examples/with-polyfills/README.md
+++ b/examples/with-polyfills/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-portals-ssr/README.md b/examples/with-portals-ssr/README.md
index 24797dfad0d82..f83bcf5224e32 100644
--- a/examples/with-portals-ssr/README.md
+++ b/examples/with-portals-ssr/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-portals/README.md b/examples/with-portals/README.md
index f77dc924fe77d..ba59ef9f9cb35 100644
--- a/examples/with-portals/README.md
+++ b/examples/with-portals/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-prefetching/README.md b/examples/with-prefetching/README.md
index 5a53f5879c2f6..7871a46f63b76 100644
--- a/examples/with-prefetching/README.md
+++ b/examples/with-prefetching/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-quill-js/README.md b/examples/with-quill-js/README.md
index cbacba13a1e49..ec8cb56b20963 100644
--- a/examples/with-quill-js/README.md
+++ b/examples/with-quill-js/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-react-bootstrap/README.md b/examples/with-react-bootstrap/README.md
index 1f0106cc1e509..400b680d80e68 100644
--- a/examples/with-react-bootstrap/README.md
+++ b/examples/with-react-bootstrap/README.md
@@ -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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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):
diff --git a/examples/with-react-helmet/README.md b/examples/with-react-helmet/README.md
index d18fca27cf42b..85a734f682cc3 100644
--- a/examples/with-react-helmet/README.md
+++ b/examples/with-react-helmet/README.md
@@ -5,6 +5,12 @@ The title of the page shall be changed to "Hello next.js!"
 If you go to the page `/about`, the title will be overridden to "About | Hello next.js!"
 The rest is all up to you.
 
+## 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/with-react-helmet)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-react-hook-form/README.md b/examples/with-react-hook-form/README.md
index 20ef12175a311..0615913aed795 100644
--- a/examples/with-react-hook-form/README.md
+++ b/examples/with-react-hook-form/README.md
@@ -4,6 +4,12 @@ This example shows how to integrate react-hook-form in Next.js
 
 Form handling doesn't have to be painful. React Hook Form will help you write less code while achieving better performance. For more information, see [react-hook-form](https://react-hook-form.com)
 
+## 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/with-react-hook-form)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com/now):
diff --git a/examples/with-react-jss/README.md b/examples/with-react-jss/README.md
index c071f5e4d93a2..249622c6e7828 100644
--- a/examples/with-react-jss/README.md
+++ b/examples/with-react-jss/README.md
@@ -4,6 +4,12 @@ This example shows how to integrate react-jss and jss in Next.js
 
 The critical styles will be injected into the head when server rendered.
 
+## 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/with-react-jss)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-react-md-typescript/README.md b/examples/with-react-md-typescript/README.md
index c9e157df96e95..b2b3e912aa155 100644
--- a/examples/with-react-md-typescript/README.md
+++ b/examples/with-react-md-typescript/README.md
@@ -17,6 +17,12 @@ the [main documentation](https://react-md.dev). You can also view the
 [documentation site's source code](https://github.com/mlaursen/react-md/tree/master/packages/documentation)
 for a more complex example of using ReactMD + Next.js.
 
+## 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/with-react-md-typescript)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-react-multi-carousel/README.md b/examples/with-react-multi-carousel/README.md
index 861b715e9665d..34746acf5ab7e 100644
--- a/examples/with-react-multi-carousel/README.md
+++ b/examples/with-react-multi-carousel/README.md
@@ -2,6 +2,12 @@
 
 [react-multi-carousel](https://www.npmjs.com/package/react-multi-carousel) is a React component that provides a Carousel that renders on the server-side that supports multiple items with no external dependency.
 
+## 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/with-react-multi-carousel)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-react-native-web/README.md b/examples/with-react-native-web/README.md
index dc0dcc31d0e77..31dbcdeeac1e5 100644
--- a/examples/with-react-native-web/README.md
+++ b/examples/with-react-native-web/README.md
@@ -6,6 +6,12 @@ This example features how to use [react-native-web](https://github.com/necolas/r
 >
 > **Write once, render anywhere**: React Native for Web interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.
 
+## 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/with-react-native-web)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-react-toolbox/README.md b/examples/with-react-toolbox/README.md
index 184b7d62adad9..7500baa352520 100644
--- a/examples/with-react-toolbox/README.md
+++ b/examples/with-react-toolbox/README.md
@@ -4,6 +4,12 @@ This is a simple example of getting react-toolbox up and running, using [react-t
 
 For actual use, you probably also want to add Roboto Font, and Material Design Icons. See <http://react-toolbox.io/#/install>
 
+## 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/with-react-toolbox)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-react-with-styles/README.md b/examples/with-react-with-styles/README.md
index 4b60c60c6f89a..b876578217eb4 100644
--- a/examples/with-react-with-styles/README.md
+++ b/examples/with-react-with-styles/README.md
@@ -8,6 +8,12 @@ For this purpose we are extending the `<Document />` and injecting the server si
 
 We are using `pages/_index.js` from this example [with-aphrodite](https://github.com/vercel/next.js/tree/master/examples/with-aphrodite).
 
+## 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/with-react-with-styles)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-reactstrap/README.md b/examples/with-reactstrap/README.md
index ef3a42ec9c0a0..d82b387a61b36 100644
--- a/examples/with-reactstrap/README.md
+++ b/examples/with-reactstrap/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to use Next.js with [reactstrap](https://reactstrap.github.io/).
 
+## 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/with-reactstrap)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-rebass/README.md b/examples/with-rebass/README.md
index 28aa0023cbefa..972aa1a1a1a0d 100644
--- a/examples/with-rebass/README.md
+++ b/examples/with-rebass/README.md
@@ -4,6 +4,12 @@ This example features how you use [Rebass](https://jxnblk.com/rebass/) functiona
 
 ![Screenshot](https://cloud.githubusercontent.com/assets/304265/22472564/b2e04ff0-e7de-11e6-921e-d0c9833ac805.png)
 
+## 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/with-rebass)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-recoil/README.md b/examples/with-recoil/README.md
index b28b85b9eb587..932a018a7983f 100644
--- a/examples/with-recoil/README.md
+++ b/examples/with-recoil/README.md
@@ -4,6 +4,12 @@ This example shows how to integrate Recoil in Next.js.
 
 [Recoil](https://recoiljs.org) is an experimental set of utilities for state management with React used by some teams at Facebook. This example takes the code from the redux examples and demonstrates how it would be implemented with Recoil.
 
+## 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/with-recoil)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-redux-code-splitting/README.md b/examples/with-redux-code-splitting/README.md
index c9cf1e10bf22e..62df76b78e018 100644
--- a/examples/with-redux-code-splitting/README.md
+++ b/examples/with-redux-code-splitting/README.md
@@ -4,6 +4,12 @@ Redux uses single store per application and usually it causes problems for code
 
 This example utilizes [fast-redux](https://github.com/dogada/fast-redux) to split Redux's actions and reducers across pages. In result each page's javascript bundle contains only code that is used on the page. When user navigates to a new page, its actions and reducers are connected to the single shared application store.
 
+## 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/with-redux-code-splitting)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-redux-observable/README.md b/examples/with-redux-observable/README.md
index 2518db031b8dd..4ac614d4bb6d5 100644
--- a/examples/with-redux-observable/README.md
+++ b/examples/with-redux-observable/README.md
@@ -6,7 +6,11 @@ a server.
 
 Example also uses `redux-logger` to log every action.
 
-![demo page](demo.png)
+## 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/with-redux-observable)
 
 ## Deploy your own
 
diff --git a/examples/with-redux-saga/README.md b/examples/with-redux-saga/README.md
index b72b990da8196..3450a62b3c835 100644
--- a/examples/with-redux-saga/README.md
+++ b/examples/with-redux-saga/README.md
@@ -4,6 +4,12 @@ Usually splitting your app state into `pages` feels natural, but sometimes you'l
 
 > This example and documentation is based on the [with-redux](https://github.com/vercel/next.js/tree/master/examples/with-redux) example.
 
+## 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/with-redux-saga)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-redux-thunk/README.md b/examples/with-redux-thunk/README.md
index 176eb86d1a598..11048ca3c5eb9 100644
--- a/examples/with-redux-thunk/README.md
+++ b/examples/with-redux-thunk/README.md
@@ -4,6 +4,12 @@ This example shows how to integrate Redux and Redux Thunk in Next.js.
 
 Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with Next.js's universal rendering approach.
 
+## 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/with-redux-thunk)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-redux/README.md b/examples/with-redux/README.md
index 36106fb648a59..c8416786c7f0a 100644
--- a/examples/with-redux/README.md
+++ b/examples/with-redux/README.md
@@ -14,6 +14,12 @@ All components have access to the Redux store using `useSelector`, `useDispatch`
 
 On the server side every request initializes a new store, because otherwise different user data can be mixed up. On the client side the same store is used, even between page changes.
 
+## 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/with-redux)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-reflexjs/README.md b/examples/with-reflexjs/README.md
index c25558dbf7180..cb25411b8d863 100644
--- a/examples/with-reflexjs/README.md
+++ b/examples/with-reflexjs/README.md
@@ -4,6 +4,12 @@ Reflexjs is a library for rapid UI development with style props, color modes, th
 
 This example shows how to use [Reflexjs](https://github.com/reflexjs/reflexjs) with Next.js.
 
+## 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/with-reflexjs)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-reflux/README.md b/examples/with-reflux/README.md
index ac077bdd010ce..0cdd09dd3260f 100644
--- a/examples/with-reflux/README.md
+++ b/examples/with-reflux/README.md
@@ -2,6 +2,12 @@
 
 Use [reflux](https://github.com/reflux/refluxjs) to manage an application store with unidirectional dataflow.
 
+## 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/with-reflux)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-rematch/README.md b/examples/with-rematch/README.md
index 9e526c1e2a5c7..dafa6cea2af18 100644
--- a/examples/with-rematch/README.md
+++ b/examples/with-rematch/README.md
@@ -4,6 +4,12 @@ This example has two pages. The first page has a counter which can be incremente
 
 Since rematch is utility which uses redux under the hood, some elements like `store.js` and `withRematch` are very similar to the `with-redux` example. Please go through the `with-redux` example [here](https://github.com/vercel/next.js/tree/master/examples/with-redux) before reading further if you are not familiar with how redux is integrated with nextjs. Rematch is just an extension for Redux so a lot of elements are the same.
 
+## 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/with-rematch)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-route-as-modal/README.md b/examples/with-route-as-modal/README.md
index b228d78adb7ee..b9a2402649383 100644
--- a/examples/with-route-as-modal/README.md
+++ b/examples/with-route-as-modal/README.md
@@ -4,6 +4,12 @@ On many popular social media, opening a post will update the URL but won't trigg
 
 This example shows how to conditionally display a modal based on a route.
 
+## 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/with-route-as-modal)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-segment-analytics/README.md b/examples/with-segment-analytics/README.md
index e731d4f003e1f..fbbdc260f68f7 100644
--- a/examples/with-segment-analytics/README.md
+++ b/examples/with-segment-analytics/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to use Next.js along with [Segment Analytics](https://segment.com). A custom document is used in inject the [Segment snippet](https://github.com/segmentio/snippet) into the `<head>`. Page views are tracked on both the server and client side and components fire ["track"](https://segment.com/docs/spec/track/) events based on user actions (see `contact.js` for example).
 
+## 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/with-segment-analytics)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-semantic-ui/README.md b/examples/with-semantic-ui/README.md
index 23edfa6b1e50a..0e88579b0edc7 100644
--- a/examples/with-semantic-ui/README.md
+++ b/examples/with-semantic-ui/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to use Next.js along with [Semantic UI React](https://react.semantic-ui.com) including handling of external styles and assets. This is intended to show the integration of this UI toolkit with the Framework.
 
+## 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/with-semantic-ui)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-sentry/README.md b/examples/with-sentry/README.md
index a08bb22be75c0..e67bb0b26437c 100644
--- a/examples/with-sentry/README.md
+++ b/examples/with-sentry/README.md
@@ -7,6 +7,12 @@ This is an example showing how to use [Sentry](https://sentry.io) to catch & rep
 - Each API route is handled with `withSentry`
 - `next.config.js` automatically configures the app to use Sentry through `withSentry`
 
+## 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/with-sentry)
+
 ## Deploy your own
 
 Once you have access to your [Sentry DSN](https://docs.sentry.io/product/sentry-basics/dsn-explainer/#where-to-find-your-dsn), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-shallow-routing/README.md b/examples/with-shallow-routing/README.md
index 4387a6ac64bed..6623a5e2a34f2 100644
--- a/examples/with-shallow-routing/README.md
+++ b/examples/with-shallow-routing/README.md
@@ -4,6 +4,12 @@ With [Shallow Routing](https://nextjs.org/docs/routing/shallow-routing), we can
 
 We do this by passing the `shallow: true` option to `Router.push` or `Router.replace`.
 
+## 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/with-shallow-routing)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-sitemap/README.md b/examples/with-sitemap/README.md
index 3e57d6207f6a4..e1bf76ea4d736 100644
--- a/examples/with-sitemap/README.md
+++ b/examples/with-sitemap/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to generate a `sitemap.xml` file based on the pages in your [Next.js](https://nextjs.org/) app. The sitemap will be generated and saved in the `public` directory after starting the development server or by making a build.
 
+## 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/with-sitemap)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-slate/README.md b/examples/with-slate/README.md
index c0eca0a04e53d..66c3f7653d28d 100644
--- a/examples/with-slate/README.md
+++ b/examples/with-slate/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to use Next.js along with [Slate.js](https://www.slatejs.org/).
 
+## 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/with-slate)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-static-export/README.md b/examples/with-static-export/README.md
index 8039eee9d713f..04c0b9ceb5903 100644
--- a/examples/with-static-export/README.md
+++ b/examples/with-static-export/README.md
@@ -4,6 +4,12 @@ This example show how to export to static HTML files your Next.js application fe
 
 When trying to run `npm start` it will build and export your pages into the `out` folder and serve them on `localhost:5000`.
 
+## 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/with-static-export)
+
 ## 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:
diff --git a/examples/with-stitches/README.md b/examples/with-stitches/README.md
index 364bb3c98e719..6c7d23a59b1e5 100644
--- a/examples/with-stitches/README.md
+++ b/examples/with-stitches/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to use the [Stitches CSS-in-JS Library](https://github.com/modulz/stitches).
 
+## 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/with-stitches)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-storybook-styled-jsx-scss/README.md b/examples/with-storybook-styled-jsx-scss/README.md
index 46432231b4cac..c163ed7dd4a7f 100644
--- a/examples/with-storybook-styled-jsx-scss/README.md
+++ b/examples/with-storybook-styled-jsx-scss/README.md
@@ -2,6 +2,12 @@
 
 This example shows Styled-jsx (with SCSS) working for components written in TypeScript rendered both inside and outside of Storybook.
 
+## 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/with-storybook-styled-jsx-scss)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-storybook/README.md b/examples/with-storybook/README.md
index 7f839e294b4c1..7720759c58935 100644
--- a/examples/with-storybook/README.md
+++ b/examples/with-storybook/README.md
@@ -6,6 +6,12 @@ This example shows a default set up of Storybook. Also included in the example i
 
 As of v6.0, Storybook has built-in TypeScript support, so no configuration is needed. If you want to customize the default configuration, refer to the [TypeScript docs](https://storybook.js.org/docs/react/configure/typescript).
 
+## 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/with-storybook)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-strict-csp/README.md b/examples/with-strict-csp/README.md
index 9b2ee4363a4bb..788c1c208a589 100644
--- a/examples/with-strict-csp/README.md
+++ b/examples/with-strict-csp/README.md
@@ -5,6 +5,12 @@ It defines the CSP by document `meta` tag.
 
 Note: There are still valid cases for using a nonce in case you need to inline scripts or styles for which calculating a hash is not feasible.
 
+## 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/with-strict-csp)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-styled-components-rtl/README.md b/examples/with-styled-components-rtl/README.md
index 7c42db9f2e369..710263b42d21b 100644
--- a/examples/with-styled-components-rtl/README.md
+++ b/examples/with-styled-components-rtl/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to use nextjs with right to left (RTL) styles using styled-components.
 
+## 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/with-styled-components-rtl)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md
index 7c585b998bb97..f01d2517d2a9b 100644
--- a/examples/with-styled-components/README.md
+++ b/examples/with-styled-components/README.md
@@ -4,6 +4,12 @@ This example features how you 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>`, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [`<App>`](https://nextjs.org/docs/advanced-features/custom-app) component.
 
+## 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/with-styled-components)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-styled-jsx-scss/README.md b/examples/with-styled-jsx-scss/README.md
index 4b6323170c9a8..4ebbfc395efe7 100644
--- a/examples/with-styled-jsx-scss/README.md
+++ b/examples/with-styled-jsx-scss/README.md
@@ -8,6 +8,12 @@ This example shows how to configure styled-jsx to use external plugins to modify
 
 More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)
 
+## 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/with-styled-jsx-scss)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-styled-jsx/README.md b/examples/with-styled-jsx/README.md
index f9e293bdb5451..75e64a6872887 100644
--- a/examples/with-styled-jsx/README.md
+++ b/examples/with-styled-jsx/README.md
@@ -2,6 +2,12 @@
 
 Next.js ships with [styled-jsx](https://github.com/vercel/styled-jsx) allowing you to write scoped styled components with full CSS support. This is important for the modularity and code size of your bundles and also for the learning curve of the framework. If you know CSS you can write `styled-jsx` right away.
 
+## 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/with-styled-jsx)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-styletron/README.md b/examples/with-styletron/README.md
index e42d60adca5ad..78f84e557a1e7 100644
--- a/examples/with-styletron/README.md
+++ b/examples/with-styletron/README.md
@@ -4,6 +4,12 @@ This example features how yo 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/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styletron)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md
index 75b92343ca601..a6f0f202a52dc 100644
--- a/examples/with-tailwindcss/README.md
+++ b/examples/with-tailwindcss/README.md
@@ -4,6 +4,12 @@ This example shows how to use [Tailwind CSS](https://tailwindcss.com/) (v2.1) wi
 
 It uses the new [`Just-in-Time Mode`](https://tailwindcss.com/docs/just-in-time-mode) for Tailwind CSS.
 
+## 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/with-tailwindcss)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-tesfy/README.md b/examples/with-tesfy/README.md
index bb55e121ce334..8fd9283d5d655 100644
--- a/examples/with-tesfy/README.md
+++ b/examples/with-tesfy/README.md
@@ -10,6 +10,12 @@ The `userId` must uniquely identify a user even if not logged in, for that reaso
 
 The `datafile` is just a `json` that defines the configuration of the experiments and features available. It must be fetched from Tesfy CDN or from your own servers at least everytime a request is performed, later on this configuration could also be fetched if wanted (e.g. during page transitions).
 
+## 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/with-tesfy)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-three-js/README.md b/examples/with-three-js/README.md
index e0e9b96946b49..57e72413a5361 100644
--- a/examples/with-three-js/README.md
+++ b/examples/with-three-js/README.md
@@ -6,6 +6,12 @@ This example uses:
 [`react-three-fiber`](https://github.com/pmndrs/react-three-fiber): A React renderer for Threejs on the web and react-native.
 [`drei`](https://github.com/pmndrs/drei): A growing collection of useful helpers and abstractions for react-three-fiber.
 
+## 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/with-three-js)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-typescript-eslint-jest/README.md b/examples/with-typescript-eslint-jest/README.md
index 9f84531ec4916..8a8b581f86955 100644
--- a/examples/with-typescript-eslint-jest/README.md
+++ b/examples/with-typescript-eslint-jest/README.md
@@ -8,6 +8,12 @@ Bootstrap a developer-friendly NextJS app configured with:
 - Linting, typechecking and formatting on by default using [`husky`](https://github.com/typicode/husky) for commit hooks
 - Testing with [Jest](https://jestjs.io/) and [`react-testing-library`](https://testing-library.com/docs/react-testing-library/intro)
 
+## 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/with-typescript-eslint-jest)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-typescript-styled-components/README.md b/examples/with-typescript-styled-components/README.md
index 55712e4e3593c..f51d9ecc2b188 100644
--- a/examples/with-typescript-styled-components/README.md
+++ b/examples/with-typescript-styled-components/README.md
@@ -2,6 +2,12 @@
 
 This is a really simple project that show the usage of Next.js with TypeScript and Styled Components.
 
+## 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/with-typescript-styled-components)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-typescript-types/README.md b/examples/with-typescript-types/README.md
index 23bc2638ebe65..0a0352426aad3 100644
--- a/examples/with-typescript-types/README.md
+++ b/examples/with-typescript-types/README.md
@@ -8,6 +8,12 @@ Attempted import error: 'TypeA' is not exported from './package-1'.
 
 error as raised in [vercel/next.js#7882](https://github.com/vercel/next.js/issues/7882).
 
+## 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/with-typescript-types)
+
 ## Useful links
 
 [Add import type and export type support to TypeScript](https://github.com/babel/babel/pull/11171)
diff --git a/examples/with-typescript/README.md b/examples/with-typescript/README.md
index 514bf1de55608..3cb3ae36fc759 100644
--- a/examples/with-typescript/README.md
+++ b/examples/with-typescript/README.md
@@ -2,6 +2,12 @@
 
 This is a really simple project that shows the usage of Next.js with TypeScript.
 
+## 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/with-typescript)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-typestyle/README.md b/examples/with-typestyle/README.md
index 5624d5c29796c..2e4de7c3b7462 100644
--- a/examples/with-typestyle/README.md
+++ b/examples/with-typestyle/README.md
@@ -4,6 +4,12 @@ This example features how you 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>`. Refer to [with-typescript](https://github.com/vercel/next.js/tree/master/examples/with-typescript) to use this with typescript.
 
+## 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/with-typestyle)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-unstated/README.md b/examples/with-unstated/README.md
index d1abf33f1e3a5..867daf7e2d77c 100644
--- a/examples/with-unstated/README.md
+++ b/examples/with-unstated/README.md
@@ -4,6 +4,12 @@ This example shows how to integrate [Unstated Next](https://github.com/jamiebuil
 
 There are two pages, `/` and `/about`, both render a counter and a timer, the state is saved for the current page and resetted when switching to a different page. To keep a shared state between pages you can add the state providers to `pages/_app.js` instead of using the page.
 
+## 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/with-unstated)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-vercel-fetch/README.md b/examples/with-vercel-fetch/README.md
index 101bd66f0c3a0..4cf71eba8a076 100644
--- a/examples/with-vercel-fetch/README.md
+++ b/examples/with-vercel-fetch/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to use [`@vercel/fetch`](https://www.npmjs.com/package/@vercel/fetch) in a Next.js application.
 
+## 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/with-vercel-fetch)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-web-worker/README.md b/examples/with-web-worker/README.md
index b5ba2dd2827ff..97a9b7fa892d2 100644
--- a/examples/with-web-worker/README.md
+++ b/examples/with-web-worker/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to run code in WebWorkers by utilizing [webpack 5](https://nextjs.org/docs/messages/webpack5).
 
+## 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/with-web-worker)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com/):
diff --git a/examples/with-webassembly/README.md b/examples/with-webassembly/README.md
index 85df11ab64294..4d43210a1fea9 100644
--- a/examples/with-webassembly/README.md
+++ b/examples/with-webassembly/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to import WebAssembly files (`.wasm`) and use them inside of a React component that is server rendered. So the WebAssembly code is executed on the server too. In the case of this example we're showing Rust compiled to WebAssembly.
 
+## 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/with-webassembly)
+
 ## 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:
diff --git a/examples/with-webpack-bundle-size-analyzer/README.md b/examples/with-webpack-bundle-size-analyzer/README.md
index e8e6420527d5c..5090527955457 100644
--- a/examples/with-webpack-bundle-size-analyzer/README.md
+++ b/examples/with-webpack-bundle-size-analyzer/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to analyze the output bundles using [webpack-bundle-size-analyzer](https://www.npmjs.com/package/webpack-bundle-size-analyzer)
 
+## 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/with-webpack-bundle-size-analyzer)
+
 ## 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:
diff --git a/examples/with-why-did-you-render/README.md b/examples/with-why-did-you-render/README.md
index d6d70121a427a..99e3a8199006a 100644
--- a/examples/with-why-did-you-render/README.md
+++ b/examples/with-why-did-you-render/README.md
@@ -57,6 +57,12 @@ module.exports = function (api) {
 }
 ```
 
+## 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/with-why-did-you-render)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-xstate/README.md b/examples/with-xstate/README.md
index 319d34a689b1c..7c8ab9ffbe93e 100644
--- a/examples/with-xstate/README.md
+++ b/examples/with-xstate/README.md
@@ -2,6 +2,12 @@
 
 This example shows how to integrate XState in Next.js. For more info about XState you can visit [here](https://xstate.js.org/).
 
+## 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/with-xstate)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-yarn-workspaces/README.md b/examples/with-yarn-workspaces/README.md
index 1e8c72c20a960..8e9445ae2c908 100644
--- a/examples/with-yarn-workspaces/README.md
+++ b/examples/with-yarn-workspaces/README.md
@@ -8,6 +8,12 @@ In this example we have three workspaces:
 - **foo**: A normal node module
 - **bar**: A react component, that gets compiled by Next.js (see [packages/web-app/next.config.js](./packages/web-app/next.config.js) for more info)
 
+## 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/with-yarn-workspaces)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/with-zones/README.md b/examples/with-zones/README.md
index fc4a83e021fe1..faf89a1b1d609 100644
--- a/examples/with-zones/README.md
+++ b/examples/with-zones/README.md
@@ -42,6 +42,12 @@ yarn && yarn dev
 
 The `blog` app should be up and running in [http://localhost:4000](http://localhost:4000)!
 
+## 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/with-zones)
+
 ### Deploy on Vercel
 
 You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-zustand/README.md b/examples/with-zustand/README.md
index 83aff9f87c174..87c67779e7818 100644
--- a/examples/with-zustand/README.md
+++ b/examples/with-zustand/README.md
@@ -14,6 +14,12 @@ All components have access to the Zustand store using `useStore()` returned from
 
 On the server side every request initializes a new store, because otherwise different user data can be mixed up. On the client side the same store is used, even between page changes.
 
+## 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/with-zustand)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):