From b83fd6785bdd213e5f2afc68da8169d770abf841 Mon Sep 17 00:00:00 2001 From: Dominic Elm Date: Tue, 8 Jun 2021 22:45:02 +0200 Subject: [PATCH] docs: add 'Open in StackBlitz' buttons to various examples (#25853) This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either. Here's an example: ![image](https://user-images.githubusercontent.com/12571019/121027783-88971280-c7a7-11eb-851a-0ad30cf74b42.png) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [x] Examples updated - [ ] Telemetry added. In case of a feature if it's used or not. ## Documentation / Examples - [x] Make sure the linting passes --- contributing.md | 7 +++++++ examples/active-class-name/README.md | 6 ++++++ examples/analyze-bundles/README.md | 14 ++++++++++++++ examples/analyze-bundles/package.json | 6 +++++- .../README.md | 6 ++++++ .../api-routes-apollo-server-and-client/README.md | 6 ++++++ examples/api-routes-apollo-server/README.md | 6 ++++++ examples/api-routes-cors/README.md | 6 ++++++ examples/api-routes-graphql/README.md | 6 ++++++ examples/api-routes-middleware/README.md | 6 ++++++ examples/api-routes-rate-limit/README.md | 6 ++++++ examples/api-routes-rest/README.md | 6 ++++++ examples/api-routes/README.md | 6 ++++++ examples/basic-css/README.md | 6 ++++++ examples/basic-export/README.md | 6 ++++++ examples/blog-starter-typescript/README.md | 8 +++++++- examples/blog-starter/README.md | 6 ++++++ examples/blog/README.md | 6 ++++++ examples/catch-all-routes/README.md | 6 ++++++ examples/custom-routes-proxying/README.md | 6 ++++++ examples/custom-server-express/README.md | 6 ++++++ examples/custom-server-fastify/README.md | 6 ++++++ examples/custom-server-hapi/README.md | 6 ++++++ examples/custom-server-koa/README.md | 6 ++++++ examples/custom-server-polka/README.md | 6 ++++++ examples/custom-server-typescript/README.md | 6 ++++++ examples/data-fetch/README.md | 6 ++++++ examples/dynamic-routing/README.md | 6 ++++++ examples/environment-variables/readme.md | 6 ++++++ examples/fast-refresh-demo/README.md | 6 ++++++ examples/head-elements/README.md | 6 ++++++ examples/headers/README.md | 6 ++++++ examples/hello-world/README.md | 6 ++++++ examples/i18n-routing/README.md | 6 ++++++ examples/image-component/README.md | 6 ++++++ examples/layout-component/README.md | 6 ++++++ examples/nested-components/README.md | 6 ++++++ examples/progressive-render/README.md | 6 ++++++ examples/redirects/README.md | 6 ++++++ examples/rewrites/README.md | 6 ++++++ examples/styled-jsx-with-csp/README.md | 6 ++++++ examples/svg-components/README.md | 6 ++++++ examples/using-preact/README.md | 6 ++++++ examples/using-router/README.md | 6 ++++++ examples/with-absolute-imports/README.md | 6 ++++++ examples/with-ant-design/README.md | 6 ++++++ examples/with-aphrodite/README.md | 6 ++++++ examples/with-app-layout/README.md | 6 ++++++ examples/with-atlaskit/README.md | 10 +++++++++- examples/with-babel-macros/README.md | 6 ++++++ examples/with-cerebral/README.md | 6 ++++++ examples/with-chakra-ui-typescript/README.md | 6 ++++++ examples/with-chakra-ui/README.md | 6 ++++++ examples/with-compiled-css/README.md | 6 ++++++ examples/with-context-api/README.md | 6 ++++++ examples/with-cssed/README.md | 6 ++++++ examples/with-custom-babel-config/README.md | 6 ++++++ examples/with-cxs/README.md | 6 ++++++ examples/with-draft-js/README.md | 6 ++++++ examples/with-dynamic-app-layout/README.md | 6 ++++++ examples/with-dynamic-import/README.md | 6 ++++++ examples/with-emotion-vanilla/README.md | 6 ++++++ examples/with-emotion/README.md | 6 ++++++ examples/with-env-from-next-config-js/README.md | 6 ++++++ examples/with-eslint/README.md | 6 ++++++ examples/with-fela/README.md | 6 ++++++ examples/with-filbert/README.md | 6 ++++++ examples/with-flow/README.md | 6 ++++++ examples/with-framer-motion/README.md | 6 ++++++ examples/with-goober/README.md | 6 ++++++ examples/with-grommet/README.md | 6 ++++++ examples/with-gsap/README.md | 6 ++++++ examples/with-hls-js/README.md | 6 ++++++ examples/with-i18n-next-intl/README.md | 6 ++++++ examples/with-i18n-rosetta/README.md | 6 ++++++ examples/with-ionic-typescript/README.md | 6 ++++++ examples/with-iron-session/README.md | 6 ++++++ examples/with-linaria/README.md | 6 ++++++ examples/with-loading/README.md | 6 ++++++ examples/with-mdbreact/README.md | 6 ++++++ examples/with-mdx/README.md | 6 ++++++ examples/with-mocha/README.md | 6 ++++++ examples/with-netlify-cms/README.md | 6 ++++++ examples/with-next-css/README.md | 6 ++++++ examples/with-next-page-transitions/README.md | 6 ++++++ examples/with-next-sass/README.md | 6 ++++++ examples/with-next-seo/README.md | 6 ++++++ examples/with-next-sitemap/README.md | 6 ++++++ examples/with-next-translate/README.md | 6 ++++++ examples/with-orbit-components/README.md | 6 ++++++ examples/with-overmind/README.md | 6 ++++++ examples/with-paste-typescript/README.md | 6 ++++++ examples/with-patternfly/README.md | 6 ++++++ examples/with-plausible/README.md | 6 ++++++ examples/with-polyfills/README.md | 6 ++++++ examples/with-portals-ssr/README.md | 6 ++++++ examples/with-portals/README.md | 6 ++++++ examples/with-prefetching/README.md | 6 ++++++ examples/with-quill-js/README.md | 6 ++++++ examples/with-react-bootstrap/README.md | 6 ++++++ examples/with-react-helmet/README.md | 6 ++++++ examples/with-react-hook-form/README.md | 6 ++++++ examples/with-react-jss/README.md | 6 ++++++ examples/with-react-md-typescript/README.md | 6 ++++++ examples/with-react-multi-carousel/README.md | 6 ++++++ examples/with-react-native-web/README.md | 6 ++++++ examples/with-react-toolbox/README.md | 6 ++++++ examples/with-react-with-styles/README.md | 6 ++++++ examples/with-reactstrap/README.md | 6 ++++++ examples/with-rebass/README.md | 6 ++++++ examples/with-recoil/README.md | 6 ++++++ examples/with-redux-code-splitting/README.md | 6 ++++++ examples/with-redux-observable/README.md | 6 +++++- examples/with-redux-saga/README.md | 6 ++++++ examples/with-redux-thunk/README.md | 6 ++++++ examples/with-redux/README.md | 6 ++++++ examples/with-reflexjs/README.md | 6 ++++++ examples/with-reflux/README.md | 6 ++++++ examples/with-rematch/README.md | 6 ++++++ examples/with-route-as-modal/README.md | 6 ++++++ examples/with-segment-analytics/README.md | 6 ++++++ examples/with-semantic-ui/README.md | 6 ++++++ examples/with-sentry/README.md | 6 ++++++ examples/with-shallow-routing/README.md | 6 ++++++ examples/with-sitemap/README.md | 6 ++++++ examples/with-slate/README.md | 6 ++++++ examples/with-static-export/README.md | 6 ++++++ examples/with-stitches/README.md | 6 ++++++ examples/with-storybook-styled-jsx-scss/README.md | 6 ++++++ examples/with-storybook/README.md | 6 ++++++ examples/with-strict-csp/README.md | 6 ++++++ examples/with-styled-components-rtl/README.md | 6 ++++++ examples/with-styled-components/README.md | 6 ++++++ examples/with-styled-jsx-scss/README.md | 6 ++++++ examples/with-styled-jsx/README.md | 6 ++++++ examples/with-styletron/README.md | 6 ++++++ examples/with-tailwindcss/README.md | 6 ++++++ examples/with-tesfy/README.md | 6 ++++++ examples/with-three-js/README.md | 6 ++++++ examples/with-typescript-eslint-jest/README.md | 6 ++++++ .../with-typescript-styled-components/README.md | 6 ++++++ examples/with-typescript-types/README.md | 6 ++++++ examples/with-typescript/README.md | 6 ++++++ examples/with-typestyle/README.md | 6 ++++++ examples/with-unstated/README.md | 6 ++++++ examples/with-vercel-fetch/README.md | 6 ++++++ examples/with-web-worker/README.md | 6 ++++++ examples/with-webassembly/README.md | 6 ++++++ .../with-webpack-bundle-size-analyzer/README.md | 6 ++++++ examples/with-why-did-you-render/README.md | 6 ++++++ examples/with-xstate/README.md | 6 ++++++ examples/with-yarn-workspaces/README.md | 6 ++++++ examples/with-zones/README.md | 6 ++++++ examples/with-zustand/README.md | 6 ++++++ 154 files changed, 935 insertions(+), 4 deletions(-) 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 `` settings, the `