From 33aa51ab267481df24f1099d9a81bca974157f5b Mon Sep 17 00:00:00 2001 From: Hassan El Mghari Date: Wed, 16 Mar 2022 17:39:26 -0400 Subject: [PATCH] Change README structure in examples (#35349) Changed the README structure in all examples to take out the Stackblitz button and include it as a link instead using a [bash script](https://gist.github.com/Nutlope/a8f3556a5a401e32a8c6278b782ebf8a/revisions). I also added the Vercel deploy button to 15 READMEs that didn't have it. --- examples/active-class-name/README.md | 8 +------- examples/analyze-bundles/README.md | 8 +------- .../api-routes-apollo-server-and-client-auth/README.md | 8 +------- examples/api-routes-apollo-server-and-client/README.md | 8 +------- examples/api-routes-apollo-server/README.md | 8 +------- examples/api-routes-cors/README.md | 8 +------- examples/api-routes-graphql/README.md | 8 +------- examples/api-routes-middleware/README.md | 8 +------- examples/api-routes-rate-limit/README.md | 8 +------- examples/api-routes-rest/README.md | 8 +------- examples/api-routes/README.md | 8 +------- examples/basic-css/README.md | 8 +------- examples/basic-export/README.md | 8 +------- examples/blog-starter-typescript/README.md | 8 +------- examples/blog-starter/README.md | 8 +------- examples/blog/README.md | 8 +------- examples/catch-all-routes/README.md | 8 +------- examples/custom-routes-proxying/README.md | 8 +++----- 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 | 7 +++---- examples/custom-server-polka/README.md | 6 +++--- examples/custom-server-typescript/README.md | 6 +++--- examples/data-fetch/README.md | 8 +------- examples/dynamic-routing/README.md | 8 +------- examples/environment-variables/readme.md | 8 +------- examples/fast-refresh-demo/README.md | 8 +------- examples/head-elements/README.md | 8 +------- examples/headers/README.md | 8 +------- examples/hello-world/README.md | 8 +------- examples/i18n-routing/README.md | 8 +------- examples/image-component/README.md | 8 +------- examples/layout-component/README.md | 8 +------- examples/nested-components/README.md | 8 +------- examples/next-forms/README.md | 8 +------- examples/progressive-render/README.md | 8 +------- examples/react-remove-properties/README.md | 8 +------- examples/redirects/README.md | 8 +------- examples/remove-console/README.md | 8 +------- examples/rewrites/README.md | 8 +------- examples/script-component/README.md | 8 +------- examples/ssr-caching/README.md | 8 +------- examples/styled-jsx-with-csp/README.md | 8 +------- examples/svg-components/README.md | 8 +------- examples/using-preact/README.md | 6 +++--- examples/using-router/README.md | 8 +------- examples/with-absolute-imports/README.md | 8 +------- examples/with-ant-design/README.md | 8 +------- examples/with-aphrodite/README.md | 8 +------- examples/with-app-layout/README.md | 8 +------- examples/with-atlaskit/README.md | 6 +++--- examples/with-babel-macros/README.md | 8 +------- examples/with-cerebral/README.md | 8 +------- examples/with-chakra-ui-typescript/README.md | 8 +------- examples/with-chakra-ui/README.md | 8 +------- examples/with-compiled-css/README.md | 8 +------- examples/with-context-api/README.md | 8 +------- examples/with-couchbase/README.md | 8 +------- examples/with-cssed/README.md | 8 +------- examples/with-custom-babel-config/README.md | 8 +------- examples/with-cxs/README.md | 8 +------- examples/with-cypress/README.md | 8 +------- examples/with-draft-js/README.md | 8 +------- examples/with-dynamic-import/README.md | 8 +------- examples/with-emotion-vanilla/README.md | 8 +------- examples/with-emotion/README.md | 8 +------- examples/with-env-from-next-config-js/README.md | 8 +------- examples/with-eslint/README.md | 8 +------- examples/with-fela/README.md | 8 +------- examples/with-filbert/README.md | 8 +------- examples/with-flow/README.md | 8 +------- examples/with-framer-motion/README.md | 8 +------- examples/with-goober/README.md | 8 +------- examples/with-grommet/README.md | 8 +------- examples/with-gsap/README.md | 8 +------- examples/with-hls-js/README.md | 8 +------- examples/with-i18n-next-intl/README.md | 8 +------- examples/with-i18n-rosetta/README.md | 8 +------- examples/with-ionic-typescript/README.md | 8 +------- examples/with-iron-session/README.md | 8 +------- examples/with-jotai/README.md | 8 +------- examples/with-kea/README.md | 8 +------- examples/with-linaria/README.md | 8 +------- examples/with-lingui/README.md | 8 +------- examples/with-loading/README.md | 8 +------- examples/with-mdbreact/README.md | 8 +------- examples/with-mdx/README.md | 8 +------- examples/with-mobx-react-lite/README.md | 8 +------- examples/with-mobx-state-tree-typescript/README.md | 8 +------- examples/with-mobx-state-tree/README.md | 8 +------- examples/with-mobx/README.md | 8 +------- examples/with-mocha/README.md | 6 +++--- examples/with-netlify-cms/README.md | 6 +++--- examples/with-next-css/README.md | 8 +------- examples/with-next-page-transitions/README.md | 8 +------- examples/with-next-sass/README.md | 8 +------- examples/with-next-seo/README.md | 8 +------- examples/with-next-sitemap/README.md | 8 +------- examples/with-next-translate/README.md | 8 +------- examples/with-orbit-components/README.md | 8 +------- examples/with-overmind/README.md | 8 +------- examples/with-paste-typescript/README.md | 8 +------- examples/with-patternfly/README.md | 8 +------- examples/with-plausible/README.md | 8 +------- examples/with-playwright/README.md | 8 +------- examples/with-polyfills/README.md | 8 +------- examples/with-portals-ssr/README.md | 8 +------- examples/with-portals/README.md | 8 +------- examples/with-prefetching/README.md | 8 +------- examples/with-quill-js/README.md | 8 +------- examples/with-rbx-bulma-pro/README.md | 8 +------- examples/with-react-bootstrap/README.md | 8 +------- examples/with-react-helmet/README.md | 8 +------- examples/with-react-hook-form/README.md | 8 +------- examples/with-react-jss/README.md | 8 +------- examples/with-react-md-typescript/README.md | 8 +------- examples/with-react-md/README.md | 8 +------- examples/with-react-multi-carousel/README.md | 8 +------- examples/with-react-native-web/README.md | 8 +------- examples/with-react-toolbox/README.md | 8 +------- examples/with-react-with-styles/README.md | 8 +------- examples/with-reactstrap/README.md | 8 +------- examples/with-rebass/README.md | 8 +------- examples/with-recoil/README.md | 8 +------- examples/with-redux-observable/README.md | 8 +------- examples/with-redux-persist/README.md | 8 +------- examples/with-redux-saga/README.md | 8 +------- examples/with-redux-thunk/README.md | 8 +------- examples/with-reflexjs/README.md | 8 +------- examples/with-reflux/README.md | 8 +------- examples/with-rematch/README.md | 8 +------- examples/with-route-as-modal/README.md | 8 +------- examples/with-segment-analytics/README.md | 8 +------- examples/with-semantic-ui/README.md | 8 +------- examples/with-shallow-routing/README.md | 8 +------- examples/with-sitemap/README.md | 8 +------- examples/with-skynexui-components/README.md | 8 +------- examples/with-slate/README.md | 8 +------- examples/with-static-export/README.md | 6 +++--- examples/with-stitches/README.md | 8 +------- examples/with-storybook-styled-jsx-scss/README.md | 8 +------- examples/with-storybook/README.md | 8 +------- examples/with-strict-csp/README.md | 8 +------- examples/with-styled-components-rtl/README.md | 8 +------- examples/with-styled-components/README.md | 8 +------- examples/with-styled-jsx-scss/README.md | 8 +------- examples/with-styled-jsx/README.md | 8 +------- examples/with-styletron/README.md | 8 +------- examples/with-tailwindcss/README.md | 8 +------- examples/with-tesfy/README.md | 8 +------- examples/with-three-js/README.md | 8 +------- examples/with-typescript-graphql/README.md | 8 +------- examples/with-typescript-styled-components/README.md | 8 +------- examples/with-typescript-types/README.md | 8 +++++--- examples/with-typescript/README.md | 8 +------- examples/with-typestyle/README.md | 8 +------- examples/with-unstated/README.md | 8 +------- examples/with-urql/README.md | 8 +------- examples/with-vercel-fetch/README.md | 8 +------- examples/with-videojs/README.md | 8 +------- examples/with-web-worker/README.md | 8 +------- examples/with-webassembly/README.md | 2 -- examples/with-why-did-you-render/README.md | 8 +------- examples/with-xstate/README.md | 8 +------- examples/with-yarn-workspaces/README.md | 8 +------- examples/with-zustand/README.md | 8 +------- 167 files changed, 194 insertions(+), 1115 deletions(-) diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md index 902d79e24b7f..2beeba3e3cad 100644 --- a/examples/active-class-name/README.md +++ b/examples/active-class-name/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/active-class-name) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/active-class-name&project-name=active-class-name&repository-name=active-class-name) diff --git a/examples/analyze-bundles/README.md b/examples/analyze-bundles/README.md index 02e1673ccd3b..02481f057930 100644 --- a/examples/analyze-bundles/README.md +++ b/examples/analyze-bundles/README.md @@ -2,15 +2,9 @@ This example shows how to analyze the output bundles using [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/canary/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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/analyze-bundles) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/analyze-bundles&project-name=analyze-bundles&repository-name=analyze-bundles) 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 6385acf21368..18c549291094 100644 --- a/examples/api-routes-apollo-server-and-client-auth/README.md +++ b/examples/api-routes-apollo-server-and-client-auth/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client-auth) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client-auth&project-name=api-routes-apollo-server-and-client-auth&repository-name=api-routes-apollo-server-and-client-auth) diff --git a/examples/api-routes-apollo-server-and-client/README.md b/examples/api-routes-apollo-server-and-client/README.md index 96c454e0527c..0929222aba86 100644 --- a/examples/api-routes-apollo-server-and-client/README.md +++ b/examples/api-routes-apollo-server-and-client/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client&project-name=api-routes-apollo-server-and-client&repository-name=api-routes-apollo-server-and-client) diff --git a/examples/api-routes-apollo-server/README.md b/examples/api-routes-apollo-server/README.md index 5d1066048ddc..775647bd007e 100644 --- a/examples/api-routes-apollo-server/README.md +++ b/examples/api-routes-apollo-server/README.md @@ -2,15 +2,9 @@ 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/get-static-props) and [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths.md). 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-apollo-server) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server&project-name=api-routes-apollo-server&repository-name=api-routes-apollo-server) diff --git a/examples/api-routes-cors/README.md b/examples/api-routes-cors/README.md index 5ba1b348401f..c7985f9e72ca 100644 --- a/examples/api-routes-cors/README.md +++ b/examples/api-routes-cors/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-cors) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors&project-name=api-routes-cors&repository-name=api-routes-cors) diff --git a/examples/api-routes-graphql/README.md b/examples/api-routes-graphql/README.md index fe53eb534cb4..26429515510c 100644 --- a/examples/api-routes-graphql/README.md +++ b/examples/api-routes-graphql/README.md @@ -2,15 +2,9 @@ Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction), 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-graphql) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql&project-name=api-routes-graphql&repository-name=api-routes-graphql) diff --git a/examples/api-routes-middleware/README.md b/examples/api-routes-middleware/README.md index 44a12e118ddc..4da0802bcc86 100644 --- a/examples/api-routes-middleware/README.md +++ b/examples/api-routes-middleware/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-middleware) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-middleware&project-name=api-routes-middleware&repository-name=api-routes-middleware) diff --git a/examples/api-routes-rate-limit/README.md b/examples/api-routes-rate-limit/README.md index 9328d2584636..65f0d38c1f70 100644 --- a/examples/api-routes-rate-limit/README.md +++ b/examples/api-routes-rate-limit/README.md @@ -16,15 +16,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-rate-limit) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-rate-limit&project-name=api-routes-rate-limit&repository-name=api-routes-rate-limit) diff --git a/examples/api-routes-rest/README.md b/examples/api-routes-rest/README.md index c8f176bd5e2c..643168e1ab27 100644 --- a/examples/api-routes-rest/README.md +++ b/examples/api-routes-rest/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-rest) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-rest&project-name=api-routes-rest&repository-name=api-routes-rest) diff --git a/examples/api-routes/README.md b/examples/api-routes/README.md index 87e9fa6321f9..325c7ac6630a 100644 --- a/examples/api-routes/README.md +++ b/examples/api-routes/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes&project-name=api-routes&repository-name=api-routes) diff --git a/examples/basic-css/README.md b/examples/basic-css/README.md index 0f6d8517a7b7..dd7b15ec2564 100644 --- a/examples/basic-css/README.md +++ b/examples/basic-css/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/basic-css) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/basic-css&project-name=basic-css&repository-name=basic-css) diff --git a/examples/basic-export/README.md b/examples/basic-export/README.md index e53128be2496..9f991ed18f02 100644 --- a/examples/basic-export/README.md +++ b/examples/basic-export/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/basic-export) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/basic-export&project-name=basic-export&repository-name=basic-export) diff --git a/examples/blog-starter-typescript/README.md b/examples/blog-starter-typescript/README.md index 15856d06a494..d0762fc48731 100644 --- a/examples/blog-starter-typescript/README.md +++ b/examples/blog-starter-typescript/README.md @@ -8,15 +8,9 @@ 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-typescript) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog-starter-typescript) [![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) diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md index 6a7a956f4e89..4ed711c3557c 100644 --- a/examples/blog-starter/README.md +++ b/examples/blog-starter/README.md @@ -6,19 +6,13 @@ 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/) ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog-starter) [![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&project-name=blog-starter&repository-name=blog-starter) diff --git a/examples/blog/README.md b/examples/blog/README.md index 2d6fd2508769..f9c07a6b0e24 100644 --- a/examples/blog/README.md +++ b/examples/blog/README.md @@ -17,15 +17,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog) [![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&project-name=portfolio&repository-name=portfolio) diff --git a/examples/catch-all-routes/README.md b/examples/catch-all-routes/README.md index 3b4cfcd3be24..4172669d9f7e 100644 --- a/examples/catch-all-routes/README.md +++ b/examples/catch-all-routes/README.md @@ -11,15 +11,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/catch-all-routes) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/catch-all-routes&project-name=catch-all-routes&repository-name=catch-all-routes) diff --git a/examples/custom-routes-proxying/README.md b/examples/custom-routes-proxying/README.md index bd365fd402f5..31b72c02b891 100644 --- a/examples/custom-routes-proxying/README.md +++ b/examples/custom-routes-proxying/README.md @@ -4,11 +4,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-routes-proxying) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/custom-routes-proxying) ## How to use @@ -25,9 +25,7 @@ yarn create next-app --example custom-routes-proxying custom-routes-proxying-app ```bash npm install npm run dev - # or - yarn install yarn dev ``` diff --git a/examples/custom-server-express/README.md b/examples/custom-server-express/README.md index b23bfed40dfa..063fa028096f 100644 --- a/examples/custom-server-express/README.md +++ b/examples/custom-server-express/README.md @@ -4,11 +4,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-express?runScript=dev) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/custom-server-express) ## How to use diff --git a/examples/custom-server-fastify/README.md b/examples/custom-server-fastify/README.md index a166ffafa511..de26fbb96023 100644 --- a/examples/custom-server-fastify/README.md +++ b/examples/custom-server-fastify/README.md @@ -6,11 +6,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-fastify) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/custom-server-fastify) ## How to use diff --git a/examples/custom-server-hapi/README.md b/examples/custom-server-hapi/README.md index 74b065827473..63d9c3ed1225 100644 --- a/examples/custom-server-hapi/README.md +++ b/examples/custom-server-hapi/README.md @@ -4,11 +4,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-hapi) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/custom-server-hapi) ## How to use diff --git a/examples/custom-server-koa/README.md b/examples/custom-server-koa/README.md index f6ed873c4543..278579c7d1bc 100644 --- a/examples/custom-server-koa/README.md +++ b/examples/custom-server-koa/README.md @@ -4,11 +4,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-koa) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/custom-server-koa) ## How to use @@ -30,6 +30,5 @@ If you need to enable the gzip compression, the most simple way to do so is by w ```javascript const compression = require('compression') const koaConnect = require('koa-connect') - server.use(koaConnect(compression())) ``` diff --git a/examples/custom-server-polka/README.md b/examples/custom-server-polka/README.md index d87dc4ad62f2..d91a6b9407e3 100644 --- a/examples/custom-server-polka/README.md +++ b/examples/custom-server-polka/README.md @@ -4,11 +4,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-polka) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/custom-server-polka) ## How to use diff --git a/examples/custom-server-typescript/README.md b/examples/custom-server-typescript/README.md index f07b0f4685da..f100433b8d58 100644 --- a/examples/custom-server-typescript/README.md +++ b/examples/custom-server-typescript/README.md @@ -5,11 +5,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-typescript) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/custom-server-typescript) ## How to use diff --git a/examples/data-fetch/README.md b/examples/data-fetch/README.md index 0c1d7ae8f644..fd43c255d234 100644 --- a/examples/data-fetch/README.md +++ b/examples/data-fetch/README.md @@ -5,15 +5,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/data-fetch) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/data-fetch&project-name=data-fetch&repository-name=data-fetch) diff --git a/examples/dynamic-routing/README.md b/examples/dynamic-routing/README.md index 9b1fbeb17066..1944e28e70ac 100644 --- a/examples/dynamic-routing/README.md +++ b/examples/dynamic-routing/README.md @@ -10,15 +10,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/dynamic-routing) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing&project-name=dynamic-routing&repository-name=dynamic-routing) diff --git a/examples/environment-variables/readme.md b/examples/environment-variables/readme.md index bf4a59319c1d..d6ffcfcce64c 100644 --- a/examples/environment-variables/readme.md +++ b/examples/environment-variables/readme.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/environment-variables) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/environment-variables&project-name=environment-variables&repository-name=environment-variables) diff --git a/examples/fast-refresh-demo/README.md b/examples/fast-refresh-demo/README.md index 1bf24daecb8c..7fbb3b73f6d4 100644 --- a/examples/fast-refresh-demo/README.md +++ b/examples/fast-refresh-demo/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/fast-refresh-demo) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/fast-refresh-demo&project-name=fast-refresh-demo&repository-name=fast-refresh-demo) diff --git a/examples/head-elements/README.md b/examples/head-elements/README.md index e133dbda310f..3304aff0aab2 100644 --- a/examples/head-elements/README.md +++ b/examples/head-elements/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/head-elements) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/head-elements&project-name=head-elements&repository-name=head-elements) diff --git a/examples/headers/README.md b/examples/headers/README.md index d109b056a47c..eca28d362568 100644 --- a/examples/headers/README.md +++ b/examples/headers/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/headers) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/headers&project-name=headers&repository-name=headers) diff --git a/examples/hello-world/README.md b/examples/hello-world/README.md index 76c8d7020ba1..ff2c2da16660 100644 --- a/examples/hello-world/README.md +++ b/examples/hello-world/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/hello-world) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) diff --git a/examples/i18n-routing/README.md b/examples/i18n-routing/README.md index be097c1aedd5..e4bc986d74f3 100644 --- a/examples/i18n-routing/README.md +++ b/examples/i18n-routing/README.md @@ -4,15 +4,9 @@ This example shows how to create internationalized pages using Next.js and the i For further documentation on this feature see the [Internationalized Routing docs](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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/i18n-routing) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/i18n-routing&project-name=i18n-routing&repository-name=i18n-routing) diff --git a/examples/image-component/README.md b/examples/image-component/README.md index 00f44a0a1a50..0a028aa05f50 100644 --- a/examples/image-component/README.md +++ b/examples/image-component/README.md @@ -8,15 +8,9 @@ The index page ([`pages/index.js`](pages/index.js)) has a couple images, one int [https://image-component.nextjs.gallery/](https://image-component.nextjs.gallery/) -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/image-component) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/image-component&project-name=image-component&repository-name=image-component) diff --git a/examples/layout-component/README.md b/examples/layout-component/README.md index 384d4103471a..414a482de752 100644 --- a/examples/layout-component/README.md +++ b/examples/layout-component/README.md @@ -2,15 +2,9 @@ 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 layout and sidebar. -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/layout-component) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/layout-component&project-name=layout-component&repository-name=layout-component) diff --git a/examples/nested-components/README.md b/examples/nested-components/README.md index 8ac9a8885bee..76262f379f1f 100644 --- a/examples/nested-components/README.md +++ b/examples/nested-components/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/nested-components) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/nested-components&project-name=nested-components&repository-name=nested-components) diff --git a/examples/next-forms/README.md b/examples/next-forms/README.md index 2d04b96993d8..21ce3b9e6a61 100644 --- a/examples/next-forms/README.md +++ b/examples/next-forms/README.md @@ -2,15 +2,9 @@ This example shows how you can build forms 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/next-forms) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/next-forms) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/next-forms&project-name=next-forms&repository-name=next-forms) diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md index af303c3ed4e5..6f653bd634a7 100644 --- a/examples/progressive-render/README.md +++ b/examples/progressive-render/README.md @@ -16,15 +16,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/progressive-render) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/progressive-render&project-name=progressive-render&repository-name=progressive-render) diff --git a/examples/react-remove-properties/README.md b/examples/react-remove-properties/README.md index 116fd6ecf32c..20a58dcd3105 100644 --- a/examples/react-remove-properties/README.md +++ b/examples/react-remove-properties/README.md @@ -2,15 +2,9 @@ This example shows how to use the `reactRemoveProperties` config option to remove React properties. -## 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/react-remove-properties) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/react-remove-properties) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/react-remove-properties&project-name=react-remove-properties&repository-name=react-remove-properties) diff --git a/examples/redirects/README.md b/examples/redirects/README.md index 4a946785b382..07e8e10e4f30 100644 --- a/examples/redirects/README.md +++ b/examples/redirects/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/redirects) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/redirects&project-name=redirects&repository-name=redirects) diff --git a/examples/remove-console/README.md b/examples/remove-console/README.md index aeb9c98a281f..cb24cb06c242 100644 --- a/examples/remove-console/README.md +++ b/examples/remove-console/README.md @@ -2,15 +2,9 @@ This example shows how to use the `removeConsole` config option to remove all `console.*` calls. -## 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/remove-console) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/remove-console) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/remove-console&project-name=remove-console&repository-name=remove-console) diff --git a/examples/rewrites/README.md b/examples/rewrites/README.md index 2bbf32b198d9..5d16b71fa220 100644 --- a/examples/rewrites/README.md +++ b/examples/rewrites/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/rewrites) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/rewrites&project-name=rewrites&repository-name=rewrites) diff --git a/examples/script-component/README.md b/examples/script-component/README.md index 2fe22d477e90..dc2e9d31338d 100644 --- a/examples/script-component/README.md +++ b/examples/script-component/README.md @@ -8,15 +8,9 @@ This example shows different strategies that can be used for the [`next/script` - [Inline scripts](./pages/inline.js) - [Forwarding attributes](./pages/attributes.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/script-component) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/script-component) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/script-component&project-name=script-component&repository-name=script-component) diff --git a/examples/ssr-caching/README.md b/examples/ssr-caching/README.md index e8d436039939..5972762cb1be 100644 --- a/examples/ssr-caching/README.md +++ b/examples/ssr-caching/README.md @@ -8,15 +8,9 @@ This example uses [`stale-while-revalidate`](https://web.dev/stale-while-revalid In the background, a revalidation request will be made to populate the cache with a fresh value. If you refresh the page, you will see the new value shown. -## 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/ssr-caching) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/ssr-caching) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/ssr-caching&project-name=ssr-caching&repository-name=ssr-caching) diff --git a/examples/styled-jsx-with-csp/README.md b/examples/styled-jsx-with-csp/README.md index 3c2272ebd260..752466cf1d06 100644 --- a/examples/styled-jsx-with-csp/README.md +++ b/examples/styled-jsx-with-csp/README.md @@ -8,15 +8,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/styled-jsx-with-csp) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/styled-jsx-with-csp&project-name=styled-jsx-with-csp&repository-name=styled-jsx-with-csp) diff --git a/examples/svg-components/README.md b/examples/svg-components/README.md index d7517c14b629..b63c3a405fb8 100644 --- a/examples/svg-components/README.md +++ b/examples/svg-components/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/svg-components) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/svg-components&project-name=svg-components&repository-name=svg-components) diff --git a/examples/using-preact/README.md b/examples/using-preact/README.md index f8a4119258fd..817b7a564b6d 100644 --- a/examples/using-preact/README.md +++ b/examples/using-preact/README.md @@ -2,11 +2,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](https://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/using-preact) -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/using-preact) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/using-preact) ## How to use diff --git a/examples/using-router/README.md b/examples/using-router/README.md index da0827e60a8d..5f303be433f6 100644 --- a/examples/using-router/README.md +++ b/examples/using-router/README.md @@ -5,15 +5,9 @@ This example features: - An app linking pages using `next/router` instead of `` 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/using-router) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/using-router&project-name=using-router&repository-name=using-router) diff --git a/examples/with-absolute-imports/README.md b/examples/with-absolute-imports/README.md index 191941f7df44..e84ea80288ef 100644 --- a/examples/with-absolute-imports/README.md +++ b/examples/with-absolute-imports/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-absolute-imports) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports&project-name=with-absolute-imports&repository-name=with-absolute-imports) diff --git a/examples/with-ant-design/README.md b/examples/with-ant-design/README.md index c30248cc4207..9419ed92695b 100644 --- a/examples/with-ant-design/README.md +++ b/examples/with-ant-design/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ant-design) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-ant-design&project-name=with-ant-design&repository-name=with-ant-design) diff --git a/examples/with-aphrodite/README.md b/examples/with-aphrodite/README.md index 1196c79a4ce8..622d5257e4fa 100644 --- a/examples/with-aphrodite/README.md +++ b/examples/with-aphrodite/README.md @@ -4,15 +4,9 @@ This example features how to use a different styling solution than [styled-jsx]( For this purpose we are extending the `` and injecting the server side rendered styles into the ``. -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-aphrodite) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite&project-name=with-aphrodite&repository-name=with-aphrodite) diff --git a/examples/with-app-layout/README.md b/examples/with-app-layout/README.md index f3efd43e67a0..dbaeefafe235 100644 --- a/examples/with-app-layout/README.md +++ b/examples/with-app-layout/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-app-layout) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-app-layout&project-name=with-app-layout&repository-name=with-app-layout) diff --git a/examples/with-atlaskit/README.md b/examples/with-atlaskit/README.md index 97c8df5cc19f..aff52200ee81 100644 --- a/examples/with-atlaskit/README.md +++ b/examples/with-atlaskit/README.md @@ -2,11 +2,11 @@ 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. -## Preview +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-atlaskit) -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-atlaskit) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-atlaskit) ## How to use diff --git a/examples/with-babel-macros/README.md b/examples/with-babel-macros/README.md index 70df67163b70..7d56310b5bc3 100644 --- a/examples/with-babel-macros/README.md +++ b/examples/with-babel-macros/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-babel-macros) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-babel-macros&project-name=with-babel-macros&repository-name=with-babel-macros) diff --git a/examples/with-cerebral/README.md b/examples/with-cerebral/README.md index 3ad6f043f264..964f16c643f1 100644 --- a/examples/with-cerebral/README.md +++ b/examples/with-cerebral/README.md @@ -34,15 +34,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-cerebral) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-cerebral&project-name=with-cerebral&repository-name=with-cerebral) diff --git a/examples/with-chakra-ui-typescript/README.md b/examples/with-chakra-ui-typescript/README.md index d5d207cb1eea..b0d6e19fce5d 100644 --- a/examples/with-chakra-ui-typescript/README.md +++ b/examples/with-chakra-ui-typescript/README.md @@ -6,15 +6,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript&project-name=with-chakra-ui-typescript&repository-name=with-chakra-ui-typescript) diff --git a/examples/with-chakra-ui/README.md b/examples/with-chakra-ui/README.md index 1c1cf612d6ac..1a0076e85fef 100644 --- a/examples/with-chakra-ui/README.md +++ b/examples/with-chakra-ui/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-chakra-ui) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui&project-name=with-chakra-ui&repository-name=with-chakra-ui) diff --git a/examples/with-compiled-css/README.md b/examples/with-compiled-css/README.md index 9aaf62b49cfe..b6e2d8aed5c7 100644 --- a/examples/with-compiled-css/README.md +++ b/examples/with-compiled-css/README.md @@ -2,15 +2,9 @@ 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/vercel/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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-compiled-css) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-compiled-css&project-name=with-compiled-css&repository-name=with-compiled-css) diff --git a/examples/with-context-api/README.md b/examples/with-context-api/README.md index 4404e672b947..facda900d514 100644 --- a/examples/with-context-api/README.md +++ b/examples/with-context-api/README.md @@ -10,15 +10,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-context-api) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-context-api&project-name=with-context-api&repository-name=with-context-api) diff --git a/examples/with-couchbase/README.md b/examples/with-couchbase/README.md index 383a329d8e91..3f4d7e84be74 100644 --- a/examples/with-couchbase/README.md +++ b/examples/with-couchbase/README.md @@ -8,15 +8,9 @@ If you want to learn more about Couchbase, visit the following pages: - [Couchbase Developer Portal](https://developer.couchbase.com/) - [Couchbase Cloud](https://cloud.couchbase.com/sign-up) -## 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-couchbase) - ## Deploy your own -Once you have access to the environment variables you'll need, deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) once you have access to the environment variables you'll need or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-couchbase) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-couchbase&project-name=with-couchbase&repository-name=with-couchbase&env=COUCHBASE_USER,COUCHBASE_PASSWORD,COUCHBASE_ENDPOINT,COUCHBASE_BUCKET,IS_CLOUD_INSTANCE&envDescription=Required%20to%20connect%20the%20app%20with%20Couchbase) diff --git a/examples/with-cssed/README.md b/examples/with-cssed/README.md index ef73cfada6ae..49f442215764 100644 --- a/examples/with-cssed/README.md +++ b/examples/with-cssed/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-cssed) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-cssed&project-name=with-cssed&repository-name=with-cssed) diff --git a/examples/with-custom-babel-config/README.md b/examples/with-custom-babel-config/README.md index 4f46c83c6e63..64db98626e6f 100644 --- a/examples/with-custom-babel-config/README.md +++ b/examples/with-custom-babel-config/README.md @@ -8,15 +8,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-custom-babel-config) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config&project-name=with-custom-babel-config&repository-name=with-custom-babel-config) diff --git a/examples/with-cxs/README.md b/examples/with-cxs/README.md index 0275ad7a83c9..08ebafc68721 100644 --- a/examples/with-cxs/README.md +++ b/examples/with-cxs/README.md @@ -4,15 +4,9 @@ This example shows how to use a different styling solution than [styled-jsx](htt For this purpose we are extending the `` and injecting the server side rendered styles into the ``. -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-cxs) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-cxs&project-name=with-cxs&repository-name=with-cxs) diff --git a/examples/with-cypress/README.md b/examples/with-cypress/README.md index e8fe010feae3..f705bcecbc14 100644 --- a/examples/with-cypress/README.md +++ b/examples/with-cypress/README.md @@ -2,15 +2,9 @@ This example shows how to configure Cypress to work 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-cypress) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-cypress) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-cypress&project-name=with-cypress&repository-name=with-cypress) diff --git a/examples/with-draft-js/README.md b/examples/with-draft-js/README.md index b6dab73a8e13..bef341b7385b 100644 --- a/examples/with-draft-js/README.md +++ b/examples/with-draft-js/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-draft-js) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-draft-js&project-name=with-draft-js&repository-name=with-draft-js) diff --git a/examples/with-dynamic-import/README.md b/examples/with-dynamic-import/README.md index 54c09017e5f3..034604c6b975 100644 --- a/examples/with-dynamic-import/README.md +++ b/examples/with-dynamic-import/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-dynamic-import) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-import&project-name=with-dynamic-import&repository-name=with-dynamic-import) diff --git a/examples/with-emotion-vanilla/README.md b/examples/with-emotion-vanilla/README.md index 2566cddf31c1..03a861a69598 100644 --- a/examples/with-emotion-vanilla/README.md +++ b/examples/with-emotion-vanilla/README.md @@ -5,15 +5,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion-vanilla) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-emotion-vanilla) diff --git a/examples/with-emotion/README.md b/examples/with-emotion/README.md index 12b4f677a8d0..c50a3d18707f 100644 --- a/examples/with-emotion/README.md +++ b/examples/with-emotion/README.md @@ -6,15 +6,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-emotion&project-name=with-emotion&repository-name=with-emotion) diff --git a/examples/with-env-from-next-config-js/README.md b/examples/with-env-from-next-config-js/README.md index 21c8b82a3377..941cc53e126e 100644 --- a/examples/with-env-from-next-config-js/README.md +++ b/examples/with-env-from-next-config-js/README.md @@ -12,15 +12,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-env-from-next-config-js) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-env-from-next-config-js&project-name=with-env-from-next-config-js&repository-name=with-env-from-next-config-js) diff --git a/examples/with-eslint/README.md b/examples/with-eslint/README.md index e5be81bf4774..76fbeda87e6b 100644 --- a/examples/with-eslint/README.md +++ b/examples/with-eslint/README.md @@ -4,15 +4,9 @@ This example shows a Next.js application using the built-in ESLint setup with th Learn more about the integrated ESLint configuration [in the docs](https://nextjs.org/docs/basic-features/eslint). -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-eslint) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-eslint&project-name=with-eslint&repository-name=with-eslint) diff --git a/examples/with-fela/README.md b/examples/with-fela/README.md index a61461ff9075..e46002f87516 100755 --- a/examples/with-fela/README.md +++ b/examples/with-fela/README.md @@ -4,15 +4,9 @@ This example features how to use a different styling solution than [styled-jsx]( For this purpose we are extending the `` and injecting the server side rendered styles into the ``. -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-fela) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-fela&project-name=with-fela&repository-name=with-fela) diff --git a/examples/with-filbert/README.md b/examples/with-filbert/README.md index 3606eaa97526..63a1bf0293f5 100644 --- a/examples/with-filbert/README.md +++ b/examples/with-filbert/README.md @@ -6,15 +6,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-filbert) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-filbert&project-name=with-filbert&repository-name=with-filbert) diff --git a/examples/with-flow/README.md b/examples/with-flow/README.md index f119f10bd9cd..ac7ecb11aa16 100644 --- a/examples/with-flow/README.md +++ b/examples/with-flow/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-flow) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-flow&project-name=with-flow&repository-name=with-flow) diff --git a/examples/with-framer-motion/README.md b/examples/with-framer-motion/README.md index 74f5fd3f8ef7..9c17d58434b1 100644 --- a/examples/with-framer-motion/README.md +++ b/examples/with-framer-motion/README.md @@ -4,15 +4,9 @@ Framer [`Motion`](https://github.com/framer/motion) is a production-ready animat When using Next's `` 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-framer-motion) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-framer-motion&project-name=with-framer-motion&repository-name=with-framer-motion) diff --git a/examples/with-goober/README.md b/examples/with-goober/README.md index 13eb2ddde260..d5d43b85963f 100644 --- a/examples/with-goober/README.md +++ b/examples/with-goober/README.md @@ -8,15 +8,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-goober) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-goober&project-name=with-goober&repository-name=with-goober) diff --git a/examples/with-grommet/README.md b/examples/with-grommet/README.md index ba87603a8c9b..a6d7c8e9ed1b 100644 --- a/examples/with-grommet/README.md +++ b/examples/with-grommet/README.md @@ -4,15 +4,9 @@ This example shows how to use the [Grommet UI library](https://grommet.io/) with It works by extending the `` to enable server-side rendering of `styled-components`, which are used by Grommet, and extending `` 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-grommet) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-grommet&project-name=with-grommet&repository-name=with-grommet) diff --git a/examples/with-gsap/README.md b/examples/with-gsap/README.md index 7ed8604ffbbd..e2b3d7111517 100644 --- a/examples/with-gsap/README.md +++ b/examples/with-gsap/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-gsap) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-gsap&project-name=with-gsap&repository-name=with-gsap) diff --git a/examples/with-hls-js/README.md b/examples/with-hls-js/README.md index da89f3ab92c8..5a788f1f10e8 100644 --- a/examples/with-hls-js/README.md +++ b/examples/with-hls-js/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-hls-js) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-hls-js&project-name=with-hls-js&repository-name=with-hls-js) diff --git a/examples/with-i18n-next-intl/README.md b/examples/with-i18n-next-intl/README.md index 7df35698b488..9d9096f756dd 100644 --- a/examples/with-i18n-next-intl/README.md +++ b/examples/with-i18n-next-intl/README.md @@ -10,15 +10,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-i18n-next-intl) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-i18n-next-intl) diff --git a/examples/with-i18n-rosetta/README.md b/examples/with-i18n-rosetta/README.md index c55141728393..42305d0c5e2a 100644 --- a/examples/with-i18n-rosetta/README.md +++ b/examples/with-i18n-rosetta/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-i18n-rosetta) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-i18n-rosetta&project-name=with-i18n-rosetta&repository-name=with-i18n-rosetta) diff --git a/examples/with-ionic-typescript/README.md b/examples/with-ionic-typescript/README.md index b04b434bda44..89eb811be784 100644 --- a/examples/with-ionic-typescript/README.md +++ b/examples/with-ionic-typescript/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ionic-typescript) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-ionic-typescript&project-name=with-ionic-typescript&repository-name=with-ionic-typescript) diff --git a/examples/with-iron-session/README.md b/examples/with-iron-session/README.md index 23cabcd09572..736dab0735d8 100644 --- a/examples/with-iron-session/README.md +++ b/examples/with-iron-session/README.md @@ -21,15 +21,9 @@ It uses current best practices for authentication in the Next.js ecosystem and r - Multiple encryption keys (passwords) to allow for seamless updates or just password rotation. - Full TypeScript support, including session data. -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-iron-session) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-iron-session&project-name=with-iron-session&repository-name=with-iron-session) diff --git a/examples/with-jotai/README.md b/examples/with-jotai/README.md index cae5e90be627..35591ce36785 100644 --- a/examples/with-jotai/README.md +++ b/examples/with-jotai/README.md @@ -6,15 +6,9 @@ This example shows how to integrate [Jotai](https://github.com/pmndrs/jotai) in - Jotai is TypeScript oriented and aims to expose a minimalistic API for dealing with state in a data-flow graph way. - Jotai uses the `useHydrateAtoms` hook to hydrate the value of an atom, for values that come from the server. -## 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-jotai) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-jotai) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-jotai&project-name=with-jotai&repository-name=with-jotai) diff --git a/examples/with-kea/README.md b/examples/with-kea/README.md index 27e74880caaa..09fcacaca00f 100644 --- a/examples/with-kea/README.md +++ b/examples/with-kea/README.md @@ -2,15 +2,9 @@ This example uses [kea](https://github.com/keajs/kea). -## 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-kea) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-kea) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-kea&project-name=with-kea&repository-name=with-kea) diff --git a/examples/with-linaria/README.md b/examples/with-linaria/README.md index 21449dd3d590..c22f9acf39df 100644 --- a/examples/with-linaria/README.md +++ b/examples/with-linaria/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-linaria) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-linaria&project-name=with-linaria&repository-name=with-linaria) diff --git a/examples/with-lingui/README.md b/examples/with-lingui/README.md index 39d2ad631ec7..86b1b4bb0635 100644 --- a/examples/with-lingui/README.md +++ b/examples/with-lingui/README.md @@ -6,15 +6,9 @@ It adds a webpack loader for the messages to avoid having to manually compile wh The example also uses a Higher order Component which can be added to all pages which will be translated and that checks for a `?lang` query string switch the language. Next.js will dynamically load in the messages for the locale when navigating using a Next.js `` 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-lingui) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-lingui) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-lingui&project-name=with-lingui&repository-name=with-lingui) diff --git a/examples/with-loading/README.md b/examples/with-loading/README.md index b04e344081a1..6083df2b7c69 100644 --- a/examples/with-loading/README.md +++ b/examples/with-loading/README.md @@ -10,15 +10,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-loading) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-loading&project-name=with-loading&repository-name=with-loading) diff --git a/examples/with-mdbreact/README.md b/examples/with-mdbreact/README.md index 87e469e1caa1..e20ab1301bbe 100644 --- a/examples/with-mdbreact/README.md +++ b/examples/with-mdbreact/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mdbreact) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mdbreact&project-name=with-mdbreact&repository-name=with-mdbreact) diff --git a/examples/with-mdx/README.md b/examples/with-mdx/README.md index 18174cc77f1b..875d737c37c9 100644 --- a/examples/with-mdx/README.md +++ b/examples/with-mdx/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mdx) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mdx&project-name=with-mdx&repository-name=with-mdx) diff --git a/examples/with-mobx-react-lite/README.md b/examples/with-mobx-react-lite/README.md index becd04bf4300..53ef87536840 100644 --- a/examples/with-mobx-react-lite/README.md +++ b/examples/with-mobx-react-lite/README.md @@ -16,15 +16,9 @@ StoreProvider.js component is used to instantiate the `Store` both on the server Both components are using a custom hook `useStore` to pull in the `Store` from the provider. -## 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-mobx-react-lite) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-react-lite) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-react-lite&project-name=with-mobx-react-lite&repository-name=with-mobx-react-lite) diff --git a/examples/with-mobx-state-tree-typescript/README.md b/examples/with-mobx-state-tree-typescript/README.md index 328bb5799cfe..190d8bda662b 100644 --- a/examples/with-mobx-state-tree-typescript/README.md +++ b/examples/with-mobx-state-tree-typescript/README.md @@ -10,15 +10,9 @@ The trick here for supporting universal mobx is to separate the cases for the cl The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. -## 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-mobx-state-tree-typescript) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript&project-name=with-mobx-state-tree-typescript&repository-name=with-mobx-state-tree-typescript) diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md index f6b4edf79b86..6dd278a6d9c0 100644 --- a/examples/with-mobx-state-tree/README.md +++ b/examples/with-mobx-state-tree/README.md @@ -10,15 +10,9 @@ The trick here for supporting universal mobx is to separate the cases for the cl The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. -## 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-mobx-state-tree) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree&project-name=with-mobx-state-tree&repository-name=with-mobx-state-tree) diff --git a/examples/with-mobx/README.md b/examples/with-mobx/README.md index 334358ccd4f5..d6fa366398e3 100644 --- a/examples/with-mobx/README.md +++ b/examples/with-mobx/README.md @@ -10,15 +10,9 @@ The trick here for supporting universal mobx is to separate the cases for the cl The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. -## 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-mobx) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx&project-name=with-mobx&repository-name=with-mobx) diff --git a/examples/with-mocha/README.md b/examples/with-mocha/README.md index 4e2a154e6668..666e9e9e9145 100644 --- a/examples/with-mocha/README.md +++ b/examples/with-mocha/README.md @@ -2,11 +2,11 @@ This example features an app with Mocha tests. -## Preview +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mocha) -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mocha) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mocha) ## How to use diff --git a/examples/with-netlify-cms/README.md b/examples/with-netlify-cms/README.md index f06e5531d191..84ad44c143aa 100644 --- a/examples/with-netlify-cms/README.md +++ b/examples/with-netlify-cms/README.md @@ -2,11 +2,11 @@ [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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-netlify-cms) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-netlify-cms) ## How to use diff --git a/examples/with-next-css/README.md b/examples/with-next-css/README.md index d60a1e0c1fe8..1fa6387c7a99 100644 --- a/examples/with-next-css/README.md +++ b/examples/with-next-css/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-css) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-next-css&project-name=with-next-css&repository-name=with-next-css) diff --git a/examples/with-next-page-transitions/README.md b/examples/with-next-page-transitions/README.md index cd0d2cf7c76d..aa1c65309250 100644 --- a/examples/with-next-page-transitions/README.md +++ b/examples/with-next-page-transitions/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-page-transitions) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions&project-name=with-next-page-transitions&repository-name=with-next-page-transitions) diff --git a/examples/with-next-sass/README.md b/examples/with-next-sass/README.md index 4dcb7a3adffe..1d690c2f1170 100644 --- a/examples/with-next-sass/README.md +++ b/examples/with-next-sass/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-sass) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-next-sass&project-name=with-next-sass&repository-name=with-next-sass) diff --git a/examples/with-next-seo/README.md b/examples/with-next-seo/README.md index b997e82dafb0..1e7749bfe952 100644 --- a/examples/with-next-seo/README.md +++ b/examples/with-next-seo/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-seo) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-next-seo&project-name=with-next-seo&repository-name=with-next-seo) diff --git a/examples/with-next-sitemap/README.md b/examples/with-next-sitemap/README.md index 45036ae4bdfe..b1f67ee1d997 100644 --- a/examples/with-next-sitemap/README.md +++ b/examples/with-next-sitemap/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-sitemap) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-next-sitemap&project-name=with-next-sitemap&repository-name=with-next-sitemap) diff --git a/examples/with-next-translate/README.md b/examples/with-next-translate/README.md index 18ed05588a62..cd713a5f57c3 100644 --- a/examples/with-next-translate/README.md +++ b/examples/with-next-translate/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-next-translate) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-next-translate&project-name=with-next-translate&repository-name=with-next-translate) diff --git a/examples/with-orbit-components/README.md b/examples/with-orbit-components/README.md index 97d4bf458a83..f4d80ea565c2 100644 --- a/examples/with-orbit-components/README.md +++ b/examples/with-orbit-components/README.md @@ -6,15 +6,9 @@ For this purpose we are extending `` of injected ``, 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-orbit-components) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-orbit-components&project-name=with-orbit-components&repository-name=with-orbit-components) diff --git a/examples/with-overmind/README.md b/examples/with-overmind/README.md index 9139c340c631..afe4f0714d2a 100644 --- a/examples/with-overmind/README.md +++ b/examples/with-overmind/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-overmind) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-overmind&project-name=with-overmind&repository-name=with-overmind) diff --git a/examples/with-paste-typescript/README.md b/examples/with-paste-typescript/README.md index 49ab0be54966..3c91dd7bd0fe 100644 --- a/examples/with-paste-typescript/README.md +++ b/examples/with-paste-typescript/README.md @@ -6,15 +6,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-paste-typescript) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-paste-typescript&project-name=with-paste-typescript&repository-name=with-paste-typescript) diff --git a/examples/with-patternfly/README.md b/examples/with-patternfly/README.md index 4b495d768f87..bf981bb4cd08 100644 --- a/examples/with-patternfly/README.md +++ b/examples/with-patternfly/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-patternfly) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-patternfly&project-name=with-patternfly&repository-name=with-patternfly) diff --git a/examples/with-plausible/README.md b/examples/with-plausible/README.md index 1fb0e0422fba..c3ac2dd69d37 100644 --- a/examples/with-plausible/README.md +++ b/examples/with-plausible/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-plausible) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-plausible&project-name=with-plausible&repository-name=with-plausible) diff --git a/examples/with-playwright/README.md b/examples/with-playwright/README.md index 89965c2c295c..601b36a445bc 100644 --- a/examples/with-playwright/README.md +++ b/examples/with-playwright/README.md @@ -2,15 +2,9 @@ This example shows how to configure Playwright to work 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-playwright) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-playwright) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-playwright&project-name=with-playwright&repository-name=with-playwright) diff --git a/examples/with-polyfills/README.md b/examples/with-polyfills/README.md index eadd7f96df43..699b031fe47d 100644 --- a/examples/with-polyfills/README.md +++ b/examples/with-polyfills/README.md @@ -6,15 +6,9 @@ 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 `` 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-polyfills) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-polyfills&project-name=with-polyfills&repository-name=with-polyfills) diff --git a/examples/with-portals-ssr/README.md b/examples/with-portals-ssr/README.md index f83bcf5224e3..b6b708fb9a6a 100644 --- a/examples/with-portals-ssr/README.md +++ b/examples/with-portals-ssr/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-portals-ssr) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-portals-ssr&project-name=with-portals-ssr&repository-name=with-portals-ssr) diff --git a/examples/with-portals/README.md b/examples/with-portals/README.md index ba59ef9f9cb3..523af234ac42 100644 --- a/examples/with-portals/README.md +++ b/examples/with-portals/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-portals) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-portals&project-name=with-portals&repository-name=with-portals) diff --git a/examples/with-prefetching/README.md b/examples/with-prefetching/README.md index 7871a46f63b7..8828bb34b570 100644 --- a/examples/with-prefetching/README.md +++ b/examples/with-prefetching/README.md @@ -6,15 +6,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-prefetching) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-prefetching&project-name=with-prefetching&repository-name=with-prefetching) diff --git a/examples/with-quill-js/README.md b/examples/with-quill-js/README.md index ec8cb56b2096..0e503eca00a6 100644 --- a/examples/with-quill-js/README.md +++ b/examples/with-quill-js/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-quill-js) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-quill-js&project-name=with-quill-js&repository-name=with-quill-js) diff --git a/examples/with-rbx-bulma-pro/README.md b/examples/with-rbx-bulma-pro/README.md index 9705813454bc..86669b5a5642 100644 --- a/examples/with-rbx-bulma-pro/README.md +++ b/examples/with-rbx-bulma-pro/README.md @@ -2,15 +2,9 @@ This example shows how to use Next.js along with [rbx](https://github.com/dfee/rbx)(Bulma UI Framework for react) and [Bulma Pro](https://mubaidr.js.org/bulma-pro/). -## 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-rbx-bulma-pro) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-rbx-bulma-pro) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-rbx-bulma-pro&project-name=with-rbx-bulma-pro&repository-name=with-rbx-bulma-pro) diff --git a/examples/with-react-bootstrap/README.md b/examples/with-react-bootstrap/README.md index 400b680d80e6..a0be63517161 100644 --- a/examples/with-react-bootstrap/README.md +++ b/examples/with-react-bootstrap/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-bootstrap) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-bootstrap&project-name=with-react-bootstrap&repository-name=with-react-bootstrap) diff --git a/examples/with-react-helmet/README.md b/examples/with-react-helmet/README.md index 85a734f682cc..ef917b2fe7a1 100644 --- a/examples/with-react-helmet/README.md +++ b/examples/with-react-helmet/README.md @@ -5,15 +5,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-helmet) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-helmet&project-name=with-react-helmet&repository-name=with-react-helmet) diff --git a/examples/with-react-hook-form/README.md b/examples/with-react-hook-form/README.md index 0615913aed79..d25c2c411aee 100644 --- a/examples/with-react-hook-form/README.md +++ b/examples/with-react-hook-form/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com/now) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-hook-form) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-hook-form&project-name=with-react-hook-form&repository-name=with-react-hook-form) diff --git a/examples/with-react-jss/README.md b/examples/with-react-jss/README.md index 249622c6e782..3e90f3546e3c 100644 --- a/examples/with-react-jss/README.md +++ b/examples/with-react-jss/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-jss) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-jss&project-name=with-react-jss&repository-name=with-react-jss) diff --git a/examples/with-react-md-typescript/README.md b/examples/with-react-md-typescript/README.md index b2b3e912aa15..199156bec569 100644 --- a/examples/with-react-md-typescript/README.md +++ b/examples/with-react-md-typescript/README.md @@ -17,15 +17,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-md-typescript) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-md-typescript&project-name=with-react-md-typescript&repository-name=with-react-md-typescript) diff --git a/examples/with-react-md/README.md b/examples/with-react-md/README.md index 10c3e714b215..b00ac6fb9f98 100644 --- a/examples/with-react-md/README.md +++ b/examples/with-react-md/README.md @@ -18,15 +18,9 @@ the [main documentation](https://react-md.dev). You can also view the for a more complex example of using ReactMD + Next.js or the [with-react-md-typescript](../with-react-md-typescript) example for Typescript 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-react-md) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-md) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-md&project-name=with-react-md&repository-name=with-react-md) diff --git a/examples/with-react-multi-carousel/README.md b/examples/with-react-multi-carousel/README.md index 34746acf5ab7..18dcf7945f56 100644 --- a/examples/with-react-multi-carousel/README.md +++ b/examples/with-react-multi-carousel/README.md @@ -2,15 +2,9 @@ [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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-multi-carousel) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-multi-carousel&project-name=with-react-multi-carousel&repository-name=with-react-multi-carousel) diff --git a/examples/with-react-native-web/README.md b/examples/with-react-native-web/README.md index 31dbcdeeac1e..262e18348b28 100644 --- a/examples/with-react-native-web/README.md +++ b/examples/with-react-native-web/README.md @@ -6,15 +6,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-native-web) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-native-web&project-name=with-react-native-web&repository-name=with-react-native-web) diff --git a/examples/with-react-toolbox/README.md b/examples/with-react-toolbox/README.md index 7500baa35252..1625bc56bd1f 100644 --- a/examples/with-react-toolbox/README.md +++ b/examples/with-react-toolbox/README.md @@ -4,15 +4,9 @@ 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 -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-toolbox) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-toolbox&project-name=with-react-toolbox&repository-name=with-react-toolbox) diff --git a/examples/with-react-with-styles/README.md b/examples/with-react-with-styles/README.md index 7eb93c482bfa..033ff003863a 100644 --- a/examples/with-react-with-styles/README.md +++ b/examples/with-react-with-styles/README.md @@ -8,15 +8,9 @@ For this purpose we are extending the `` and injecting the server si We are using `pages/_index.js` from this example [with-aphrodite](https://github.com/vercel/next.js/tree/canary/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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-with-styles) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-with-styles&project-name=with-react-with-styles&repository-name=with-react-with-styles) diff --git a/examples/with-reactstrap/README.md b/examples/with-reactstrap/README.md index d82b387a61b3..756f022a2b4c 100644 --- a/examples/with-reactstrap/README.md +++ b/examples/with-reactstrap/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-reactstrap) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-reactstrap&project-name=with-reactstrap&repository-name=with-reactstrap) diff --git a/examples/with-rebass/README.md b/examples/with-rebass/README.md index 972aa1a1a1a0..2c6cbe76b2d6 100644 --- a/examples/with-rebass/README.md +++ b/examples/with-rebass/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-rebass) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-rebass&project-name=with-rebass&repository-name=with-rebass) diff --git a/examples/with-recoil/README.md b/examples/with-recoil/README.md index 932a018a7983..ddf6edb81c30 100644 --- a/examples/with-recoil/README.md +++ b/examples/with-recoil/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-recoil) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-recoil&project-name=with-recoil&repository-name=with-recoil) diff --git a/examples/with-redux-observable/README.md b/examples/with-redux-observable/README.md index 4ac614d4bb6d..37b15dab8aa1 100644 --- a/examples/with-redux-observable/README.md +++ b/examples/with-redux-observable/README.md @@ -6,15 +6,9 @@ a server. Example also uses `redux-logger` to log every action. -## 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 -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-redux-observable) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-redux-observable&project-name=with-redux-observable&repository-name=with-redux-observable) diff --git a/examples/with-redux-persist/README.md b/examples/with-redux-persist/README.md index de187cb94ea1..4902b7ce25f8 100644 --- a/examples/with-redux-persist/README.md +++ b/examples/with-redux-persist/README.md @@ -4,15 +4,9 @@ This example shows how to integrate Redux with the power of Redux Persist in Nex With the advantage of having a global state for your app using `redux`. You'll also require some of your state values to be available offline. There comes `redux-persist` using which you can persist your states in browser's local storage. While there are various ways of persisting your states which you can always find in there [documentation](https://github.com/rt2zz/redux-persist/blob/master/README.md). This is an example of how you can integrate `redux-persist` with redux along 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-persist) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-redux-persist) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-redux-persist&project-name=with-redux-persist&repository-name=with-redux-persist) diff --git a/examples/with-redux-saga/README.md b/examples/with-redux-saga/README.md index 72e28b37c73d..9dcf5c50d49f 100644 --- a/examples/with-redux-saga/README.md +++ b/examples/with-redux-saga/README.md @@ -4,15 +4,9 @@ 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/canary/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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-redux-saga) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-redux-saga&project-name=with-redux-saga&repository-name=with-redux-saga) diff --git a/examples/with-redux-thunk/README.md b/examples/with-redux-thunk/README.md index 11048ca3c5eb..e035510d37fd 100644 --- a/examples/with-redux-thunk/README.md +++ b/examples/with-redux-thunk/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-redux-thunk) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk&project-name=with-redux-thunk&repository-name=with-redux-thunk) diff --git a/examples/with-reflexjs/README.md b/examples/with-reflexjs/README.md index cb25411b8d86..016074c36571 100644 --- a/examples/with-reflexjs/README.md +++ b/examples/with-reflexjs/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-reflexjs) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-reflexjs&project-name=with-reflexjs&repository-name=with-reflexjs) diff --git a/examples/with-reflux/README.md b/examples/with-reflux/README.md index 0cdd09dd3260..f449f3a3e726 100644 --- a/examples/with-reflux/README.md +++ b/examples/with-reflux/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-reflux) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-reflux&project-name=with-reflux&repository-name=with-reflux) diff --git a/examples/with-rematch/README.md b/examples/with-rematch/README.md index 937efa89cf1c..5a0165eba15b 100644 --- a/examples/with-rematch/README.md +++ b/examples/with-rematch/README.md @@ -4,15 +4,9 @@ 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](https://github.com/vercel/next.js/tree/canary/examples/with-redux) before reading further if you are not familiar with how redux is integrated with Next.js. 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-rematch) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-rematch&project-name=with-rematch&repository-name=with-rematch) diff --git a/examples/with-route-as-modal/README.md b/examples/with-route-as-modal/README.md index b9a240264938..4e85a397a530 100644 --- a/examples/with-route-as-modal/README.md +++ b/examples/with-route-as-modal/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-route-as-modal) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal&project-name=with-route-as-modal&repository-name=with-route-as-modal) diff --git a/examples/with-segment-analytics/README.md b/examples/with-segment-analytics/README.md index fbbdc260f68f..481f3981474c 100644 --- a/examples/with-segment-analytics/README.md +++ b/examples/with-segment-analytics/README.md @@ -2,15 +2,9 @@ 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 ``. 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-segment-analytics) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-segment-analytics&project-name=with-segment-analytics&repository-name=with-segment-analytics) diff --git a/examples/with-semantic-ui/README.md b/examples/with-semantic-ui/README.md index 0e88579b0edc..1c054059c8e9 100644 --- a/examples/with-semantic-ui/README.md +++ b/examples/with-semantic-ui/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-semantic-ui) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-semantic-ui&project-name=with-semantic-ui&repository-name=with-semantic-ui) diff --git a/examples/with-shallow-routing/README.md b/examples/with-shallow-routing/README.md index 6623a5e2a34f..25b884fcbcb8 100644 --- a/examples/with-shallow-routing/README.md +++ b/examples/with-shallow-routing/README.md @@ -4,15 +4,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-shallow-routing) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-shallow-routing&project-name=with-shallow-routing&repository-name=with-shallow-routing) diff --git a/examples/with-sitemap/README.md b/examples/with-sitemap/README.md index e1bf76ea4d73..f64c53678f55 100644 --- a/examples/with-sitemap/README.md +++ b/examples/with-sitemap/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-sitemap) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-sitemap&project-name=with-sitemap&repository-name=with-sitemap) diff --git a/examples/with-skynexui-components/README.md b/examples/with-skynexui-components/README.md index 1194970c35c6..83d7e339eb62 100644 --- a/examples/with-skynexui-components/README.md +++ b/examples/with-skynexui-components/README.md @@ -4,15 +4,9 @@ Next.js ships with [styled-jsx](https://github.com/vercel/styled-jsx) allowing y With [@skynexui/components](https://github.com/skynexui/components/) you will be allowed to use the advantages of `styled-jsx` in a component utility first approach to create your own UI with good and configurable defaults. -## 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-skynexui-components) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-skynexui-components) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-skynexui-components&project-name=with-skynexui-components&repository-name=with-skynexui-components) diff --git a/examples/with-slate/README.md b/examples/with-slate/README.md index 66c3f7653d28..32e71a32901b 100644 --- a/examples/with-slate/README.md +++ b/examples/with-slate/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-slate) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-slate&project-name=with-slate&repository-name=with-slate) diff --git a/examples/with-static-export/README.md b/examples/with-static-export/README.md index 04c0b9ceb590..11570a44e57f 100644 --- a/examples/with-static-export/README.md +++ b/examples/with-static-export/README.md @@ -4,11 +4,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-static-export) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-static-export) ## How to use diff --git a/examples/with-stitches/README.md b/examples/with-stitches/README.md index 6c7d23a59b1e..8d6de7711e71 100644 --- a/examples/with-stitches/README.md +++ b/examples/with-stitches/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-stitches) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-stitches&project-name=with-stitches&repository-name=with-stitches) diff --git a/examples/with-storybook-styled-jsx-scss/README.md b/examples/with-storybook-styled-jsx-scss/README.md index c163ed7dd4a7..ac995645480b 100644 --- a/examples/with-storybook-styled-jsx-scss/README.md +++ b/examples/with-storybook-styled-jsx-scss/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-storybook-styled-jsx-scss) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-storybook-styled-jsx-scss&project-name=with-storybook-styled-jsx-scss&repository-name=with-storybook-styled-jsx-scss) diff --git a/examples/with-storybook/README.md b/examples/with-storybook/README.md index 9aee6d1ab3c7..35ef96b5e24d 100644 --- a/examples/with-storybook/README.md +++ b/examples/with-storybook/README.md @@ -6,15 +6,9 @@ This example shows a default set up of Storybook using [storybook-addon-next](ht 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-storybook) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-storybook&project-name=with-storybook&repository-name=with-storybook) diff --git a/examples/with-strict-csp/README.md b/examples/with-strict-csp/README.md index 788c1c208a58..8d856ec63325 100644 --- a/examples/with-strict-csp/README.md +++ b/examples/with-strict-csp/README.md @@ -5,15 +5,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-strict-csp) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp&project-name=with-strict-csp&repository-name=with-strict-csp) diff --git a/examples/with-styled-components-rtl/README.md b/examples/with-styled-components-rtl/README.md index 710263b42d21..68c4857e22cd 100644 --- a/examples/with-styled-components-rtl/README.md +++ b/examples/with-styled-components-rtl/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components-rtl) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-rtl&project-name=with-styled-components-rtl&repository-name=with-styled-components-rtl) diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md index 5a0542590fca..689e990cbae8 100644 --- a/examples/with-styled-components/README.md +++ b/examples/with-styled-components/README.md @@ -6,15 +6,9 @@ This example uses the Rust-based [SWC](https://nextjs.org/docs/advanced-features Currently, only the `ssr` and `displayName` transforms have been implemented. These two transforms are the main requirement for using `styled-components` 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-styled-components) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components&project-name=with-styled-components&repository-name=with-styled-components) diff --git a/examples/with-styled-jsx-scss/README.md b/examples/with-styled-jsx-scss/README.md index d52a372f12f5..825ed12a256d 100644 --- a/examples/with-styled-jsx-scss/README.md +++ b/examples/with-styled-jsx-scss/README.md @@ -8,15 +8,9 @@ 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/vercel/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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-jsx-scss) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx-scss&project-name=with-styled-jsx-scss&repository-name=with-styled-jsx-scss) diff --git a/examples/with-styled-jsx/README.md b/examples/with-styled-jsx/README.md index 75e64a687288..29f39f2dc691 100644 --- a/examples/with-styled-jsx/README.md +++ b/examples/with-styled-jsx/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-jsx) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx&project-name=with-styled-jsx&repository-name=with-styled-jsx) diff --git a/examples/with-styletron/README.md b/examples/with-styletron/README.md index efb762782eed..8da62c17bfa6 100644 --- a/examples/with-styletron/README.md +++ b/examples/with-styletron/README.md @@ -4,15 +4,9 @@ This example features how yo use a different styling solution than [styled-jsx]( For this purpose we are extending the `` and injecting the server side rendered styles into the ``. -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styletron) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styletron&project-name=with-styletron&repository-name=with-styletron) diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md index 5981eee94475..4dc4d5a2a66b 100644 --- a/examples/with-tailwindcss/README.md +++ b/examples/with-tailwindcss/README.md @@ -2,15 +2,9 @@ This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs). -## 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss) diff --git a/examples/with-tesfy/README.md b/examples/with-tesfy/README.md index 8fd9283d5d65..9e59525c2a98 100644 --- a/examples/with-tesfy/README.md +++ b/examples/with-tesfy/README.md @@ -10,15 +10,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tesfy) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tesfy&project-name=with-tesfy&repository-name=with-tesfy) diff --git a/examples/with-three-js/README.md b/examples/with-three-js/README.md index 57e72413a536..7d0b87ae0aee 100644 --- a/examples/with-three-js/README.md +++ b/examples/with-three-js/README.md @@ -6,15 +6,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-three-js) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-three-js&project-name=with-three-js&repository-name=with-three-js) diff --git a/examples/with-typescript-graphql/README.md b/examples/with-typescript-graphql/README.md index 2d5b3092cfca..ecbf46add2c0 100644 --- a/examples/with-typescript-graphql/README.md +++ b/examples/with-typescript-graphql/README.md @@ -17,15 +17,9 @@ const News = () => { By default `**/*.graphqls` is recognized as GraphQL schema and `**/*.graphql` as GraphQL documents. If you prefer the other extensions, make sure the settings of the webpack loader in `next.config.js` and `.graphql-let.yml` are consistent. -## 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-graphql) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-typescript-graphql) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript-graphql&project-name=with-typescript-graphql&repository-name=with-typescript-graphql) diff --git a/examples/with-typescript-styled-components/README.md b/examples/with-typescript-styled-components/README.md index f51d9ecc2b18..9fa51bc36a08 100644 --- a/examples/with-typescript-styled-components/README.md +++ b/examples/with-typescript-styled-components/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-typescript-styled-components) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript-styled-components&project-name=with-typescript-styled-components&repository-name=with-typescript-styled-components) diff --git a/examples/with-typescript-types/README.md b/examples/with-typescript-types/README.md index 0a0352426aad..104d9a005380 100644 --- a/examples/with-typescript-types/README.md +++ b/examples/with-typescript-types/README.md @@ -1,3 +1,5 @@ +# TypeScript types example + This example shows how to integrate the TypeScript type system into Next.js. Since TypeScript is supported out of the box with Next.js, all we have to do is to install TypeScript. This example shows how to properly export and import typescript types without getting the @@ -8,11 +10,11 @@ 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 +## Deploy your own -Preview the example live on [StackBlitz](http://stackblitz.com/): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-typescript-types) -[![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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript-types) ## Useful links diff --git a/examples/with-typescript/README.md b/examples/with-typescript/README.md index 3cb3ae36fc75..50bf12650db7 100644 --- a/examples/with-typescript/README.md +++ b/examples/with-typescript/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-typescript) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript&project-name=with-typescript&repository-name=with-typescript) diff --git a/examples/with-typestyle/README.md b/examples/with-typestyle/README.md index 659f51cb767b..760473b895cf 100644 --- a/examples/with-typestyle/README.md +++ b/examples/with-typestyle/README.md @@ -4,15 +4,9 @@ This example features how you use a different styling solution than [styled-jsx] For this purpose we are extending the `` and injecting the server side rendered styles into the ``. Refer to [with-typescript](https://github.com/vercel/next.js/tree/canary/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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-typestyle) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typestyle&project-name=with-typestyle&repository-name=with-typestyle) diff --git a/examples/with-unstated/README.md b/examples/with-unstated/README.md index c9f069ec83cd..860a562427db 100644 --- a/examples/with-unstated/README.md +++ b/examples/with-unstated/README.md @@ -4,15 +4,9 @@ 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 reset 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-unstated) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-unstated&project-name=with-unstated&repository-name=with-unstated) diff --git a/examples/with-urql/README.md b/examples/with-urql/README.md index ff2ba7eb93d9..622f66a5337b 100644 --- a/examples/with-urql/README.md +++ b/examples/with-urql/README.md @@ -2,15 +2,9 @@ Use [urql](https://github.com/FormidableLabs/urql) with Next.js using SSG. -## 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-urql) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-urql) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-urql&project-name=with-urql&repository-name=with-urql) diff --git a/examples/with-vercel-fetch/README.md b/examples/with-vercel-fetch/README.md index 4cf71eba8a07..9c1601fb87f4 100644 --- a/examples/with-vercel-fetch/README.md +++ b/examples/with-vercel-fetch/README.md @@ -2,15 +2,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-vercel-fetch) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-vercel-fetch&project-name=with-vercel-fetch&repository-name=with-vercel-fetch) diff --git a/examples/with-videojs/README.md b/examples/with-videojs/README.md index 0429d5efa8a5..d091dc696c9f 100644 --- a/examples/with-videojs/README.md +++ b/examples/with-videojs/README.md @@ -2,15 +2,9 @@ This example shows how to use Next.js along with [Video.js](https://videojs.com) including handling of default 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-videojs) - ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-videojs) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-videojs&project-name=with-videojs&repository-name=with-videojs) diff --git a/examples/with-web-worker/README.md b/examples/with-web-worker/README.md index 97a9b7fa892d..0cf00b2760ce 100644 --- a/examples/with-web-worker/README.md +++ b/examples/with-web-worker/README.md @@ -2,15 +2,9 @@ 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/): +Deploy the example using [Vercel](https://vercel.com/) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-web-worker) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-web-worker&project-name=with-web-worker&repository-name=with-web-worker) diff --git a/examples/with-webassembly/README.md b/examples/with-webassembly/README.md index 4d43210a1fea..27997ea82d6f 100644 --- a/examples/with-webassembly/README.md +++ b/examples/with-webassembly/README.md @@ -27,5 +27,3 @@ npm run build-rust # or yarn build-rust ``` - -Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-why-did-you-render/README.md b/examples/with-why-did-you-render/README.md index 99e3a8199006..23b8816685ee 100644 --- a/examples/with-why-did-you-render/README.md +++ b/examples/with-why-did-you-render/README.md @@ -57,15 +57,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-why-did-you-render) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-why-did-you-render&project-name=with-why-did-you-render&repository-name=with-why-did-you-render) diff --git a/examples/with-xstate/README.md b/examples/with-xstate/README.md index d150c3d95f47..08e94a0bd01c 100644 --- a/examples/with-xstate/README.md +++ b/examples/with-xstate/README.md @@ -2,15 +2,9 @@ This example shows how to integrate XState in Next.js. [Learn more about XState](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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-xstate) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-xstate&project-name=with-xstate&repository-name=with-xstate) diff --git a/examples/with-yarn-workspaces/README.md b/examples/with-yarn-workspaces/README.md index 8e9445ae2c90..c5f75654fdd8 100644 --- a/examples/with-yarn-workspaces/README.md +++ b/examples/with-yarn-workspaces/README.md @@ -8,15 +8,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-yarn-workspaces) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-yarn-workspaces&project-name=with-yarn-workspaces&repository-name=with-yarn-workspaces) diff --git a/examples/with-zustand/README.md b/examples/with-zustand/README.md index 87c67779e781..4328433715f1 100644 --- a/examples/with-zustand/README.md +++ b/examples/with-zustand/README.md @@ -14,15 +14,9 @@ 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): +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-zustand) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-zustand&project-name=with-zustand&repository-name=with-zustand)