From 2bffb16016a1663510b025bd061170f349e6843d Mon Sep 17 00:00:00 2001 From: Pavel Mineev Date: Mon, 14 Jun 2021 20:17:23 +0300 Subject: [PATCH 1/3] (examples): fix missed peer dependencies (#26069) Fixes some examples from #25854 - with-kea [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-kea) - with-mobx [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-mobx) - with-mobx-react-lite [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-mobx-react-lite) - with-mobx-state-tree [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-mobx-state-tree) ## Documentation / Examples - [x] Add the StackBlitz button - [x] Make sure the linting passes --- examples/with-kea/README.md | 6 ++++++ examples/with-kea/package.json | 1 + examples/with-mobx-react-lite/README.md | 6 ++++++ examples/with-mobx-react-lite/package.json | 1 + examples/with-mobx-state-tree/README.md | 6 ++++++ examples/with-mobx-state-tree/package.json | 1 + examples/with-mobx/README.md | 6 ++++++ examples/with-mobx/package.json | 1 + 8 files changed, 28 insertions(+) diff --git a/examples/with-kea/README.md b/examples/with-kea/README.md index cfb3e36766601..27e74880caaad 100644 --- a/examples/with-kea/README.md +++ b/examples/with-kea/README.md @@ -2,6 +2,12 @@ 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): diff --git a/examples/with-kea/package.json b/examples/with-kea/package.json index 52d0152868994..589e42f6655db 100644 --- a/examples/with-kea/package.json +++ b/examples/with-kea/package.json @@ -19,6 +19,7 @@ }, "license": "MIT", "devDependencies": { + "@babel/core": "7.14.5", "@babel/plugin-proposal-decorators": "^7.1.0" }, "babel": { diff --git a/examples/with-mobx-react-lite/README.md b/examples/with-mobx-react-lite/README.md index 3ba0f7da966f3..becd04bf4300f 100644 --- a/examples/with-mobx-react-lite/README.md +++ b/examples/with-mobx-react-lite/README.md @@ -16,6 +16,12 @@ 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): diff --git a/examples/with-mobx-react-lite/package.json b/examples/with-mobx-react-lite/package.json index 5ca4d9fa2085c..ef91d901154b6 100644 --- a/examples/with-mobx-react-lite/package.json +++ b/examples/with-mobx-react-lite/package.json @@ -14,6 +14,7 @@ "react-dom": "^17.0.1" }, "devDependencies": { + "@babel/core": "7.14.5", "@babel/plugin-proposal-class-properties": "^7.1.0" }, "license": "MIT" diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md index a81246eda93ef..f6b4edf79b86e 100644 --- a/examples/with-mobx-state-tree/README.md +++ b/examples/with-mobx-state-tree/README.md @@ -10,6 +10,12 @@ 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): diff --git a/examples/with-mobx-state-tree/package.json b/examples/with-mobx-state-tree/package.json index b029fa813c445..676205c387eda 100644 --- a/examples/with-mobx-state-tree/package.json +++ b/examples/with-mobx-state-tree/package.json @@ -15,6 +15,7 @@ "react-dom": "^16.7.0" }, "devDependencies": { + "@babel/core": "7.14.5", "@babel/plugin-proposal-decorators": "^7.1.2" }, "license": "MIT" diff --git a/examples/with-mobx/README.md b/examples/with-mobx/README.md index fcd4b8934385f..334358ccd4f59 100644 --- a/examples/with-mobx/README.md +++ b/examples/with-mobx/README.md @@ -10,6 +10,12 @@ 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): diff --git a/examples/with-mobx/package.json b/examples/with-mobx/package.json index c00b6db45e790..d25e180238bf4 100644 --- a/examples/with-mobx/package.json +++ b/examples/with-mobx/package.json @@ -15,6 +15,7 @@ }, "license": "MIT", "devDependencies": { + "@babel/core": "7.14.5", "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-proposal-decorators": "^7.1.0" } From 8fd5d92721c30792154f5310fff7efb4954e8ef0 Mon Sep 17 00:00:00 2001 From: Pavel Mineev Date: Mon, 14 Jun 2021 20:28:23 +0300 Subject: [PATCH 2/3] (examples/with-rbx-bulma-pro): update deps (#26077) Fixes one of the items from #25854 ## Documentation / Examples - [x] Make sure the linting passes - [x] Add the StackBlitz button --- examples/with-rbx-bulma-pro/README.md | 6 ++++++ examples/with-rbx-bulma-pro/package.json | 9 ++++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/examples/with-rbx-bulma-pro/README.md b/examples/with-rbx-bulma-pro/README.md index c363859e156ce..9705813454bc2 100644 --- a/examples/with-rbx-bulma-pro/README.md +++ b/examples/with-rbx-bulma-pro/README.md @@ -2,6 +2,12 @@ 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): diff --git a/examples/with-rbx-bulma-pro/package.json b/examples/with-rbx-bulma-pro/package.json index ab43d43c80000..2d45e7d362865 100644 --- a/examples/with-rbx-bulma-pro/package.json +++ b/examples/with-rbx-bulma-pro/package.json @@ -7,10 +7,13 @@ }, "dependencies": { "bulma-pro": "^0.1.7", - "next": "^9.1.8-canary.11", + "next": "latest", "rbx": "^2.2.0", - "react": "^16.13.1", - "react-dom": "^16.13.1" + "react": "^17.0.3", + "react-dom": "^17.0.3" + }, + "devDependencies": { + "tslib": "2.3.0" }, "license": "MIT" } From de08b1fff1f96a83bba7c54e4ccfb0450bd512e8 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 14 Jun 2021 20:27:06 +0200 Subject: [PATCH 3/3] Remove unsupported examples (#26075) Co-authored-by: JJ Kasper --- errors/url-deprecated.md | 4 +-- examples/cms-agilitycms/lib/constants.js | 2 +- examples/cms-ghost/components/alert.js | 2 +- examples/cms-ghost/components/footer.js | 2 +- examples/with-ant-design-mobile/.babelrc | 12 ------- examples/with-ant-design-mobile/.gitignore | 34 ------------------ examples/with-ant-design-mobile/README.md | 21 ----------- .../components/Layout.js | 31 ---------------- .../with-ant-design-mobile/next.config.js | 27 -------------- examples/with-ant-design-mobile/package.json | 19 ---------- examples/with-ant-design-mobile/pages/_app.js | 27 -------------- .../with-ant-design-mobile/pages/about.js | 13 ------- .../with-ant-design-mobile/pages/index.js | 13 ------- examples/with-aphrodite/README.md | 2 +- examples/with-astroturf/.gitignore | 34 ------------------ examples/with-astroturf/README.md | 21 ----------- examples/with-astroturf/next.config.js | 13 ------- examples/with-astroturf/package.json | 18 ---------- examples/with-astroturf/pages/index.js | 24 ------------- examples/with-astroturf/postcss.config.js | 5 --- examples/with-compiled-css/README.md | 2 +- examples/with-cxs/README.md | 2 +- examples/with-fela/README.md | 2 +- .../components/GuestbookEntry.js | 5 ++- .../with-iron-session/pages/profile-sg.js | 2 +- examples/with-monaco-editor/.gitignore | 34 ------------------ examples/with-monaco-editor/README.md | 22 ------------ examples/with-monaco-editor/code-sample.js | 26 -------------- examples/with-monaco-editor/next.config.js | 26 -------------- examples/with-monaco-editor/package.json | 21 ----------- examples/with-monaco-editor/pages/index.js | 29 --------------- examples/with-react-with-styles/README.md | 2 +- examples/with-reason-relay/package.json | 1 - examples/with-stripe-typescript/README.md | 4 +-- examples/with-styled-components/README.md | 2 +- examples/with-styled-jsx-plugins/README.md | 4 +-- examples/with-styled-jsx-scss/README.md | 4 +-- examples/with-styletron/README.md | 2 +- examples/with-typestyle/README.md | 2 +- examples/with-zones/home/pages/about.js | 2 +- .../public/static/{zeit.png => vercel.png} | Bin packages/create-next-app/create-app.ts | 2 +- packages/react-refresh-utils/package.json | 2 +- test/integration/basepath/test/index.test.js | 6 ++-- test/integration/basic/test/hmr.js | 6 ++-- 45 files changed, 31 insertions(+), 503 deletions(-) delete mode 100644 examples/with-ant-design-mobile/.babelrc delete mode 100644 examples/with-ant-design-mobile/.gitignore delete mode 100644 examples/with-ant-design-mobile/README.md delete mode 100644 examples/with-ant-design-mobile/components/Layout.js delete mode 100644 examples/with-ant-design-mobile/next.config.js delete mode 100644 examples/with-ant-design-mobile/package.json delete mode 100644 examples/with-ant-design-mobile/pages/_app.js delete mode 100644 examples/with-ant-design-mobile/pages/about.js delete mode 100644 examples/with-ant-design-mobile/pages/index.js delete mode 100644 examples/with-astroturf/.gitignore delete mode 100644 examples/with-astroturf/README.md delete mode 100644 examples/with-astroturf/next.config.js delete mode 100644 examples/with-astroturf/package.json delete mode 100644 examples/with-astroturf/pages/index.js delete mode 100644 examples/with-astroturf/postcss.config.js delete mode 100644 examples/with-monaco-editor/.gitignore delete mode 100644 examples/with-monaco-editor/README.md delete mode 100644 examples/with-monaco-editor/code-sample.js delete mode 100644 examples/with-monaco-editor/next.config.js delete mode 100644 examples/with-monaco-editor/package.json delete mode 100644 examples/with-monaco-editor/pages/index.js rename examples/with-zones/home/public/static/{zeit.png => vercel.png} (100%) diff --git a/errors/url-deprecated.md b/errors/url-deprecated.md index 50db5b6b5ad7f..df352d8e07068 100644 --- a/errors/url-deprecated.md +++ b/errors/url-deprecated.md @@ -10,7 +10,7 @@ The reason this is going away is that we want to make things very predictable an #### Possible Ways to Fix It -https://github.com/zeit/next-codemod#url-to-withrouter +https://nextjs.org/docs/advanced-features/codemods#url-to-withrouter Since Next 5 we provide a way to explicitly inject the Next.js router object into pages and all their descending components. The `router` property that is injected will hold the same values as `url`, like `pathname`, `asPath`, and `query`. @@ -33,4 +33,4 @@ export default withRouter(Page) We provide a codemod (a code to code transformation) to automatically change the `url` property usages to `withRouter`. -You can find this codemod and instructions on how to run it here: https://github.com/zeit/next-codemod#url-to-withrouter +You can find this codemod and instructions on how to run it here: https://nextjs.org/docs/advanced-features/codemods#url-to-withrouter diff --git a/examples/cms-agilitycms/lib/constants.js b/examples/cms-agilitycms/lib/constants.js index 0d98f32f89f7d..2b5257afb6e25 100644 --- a/examples/cms-agilitycms/lib/constants.js +++ b/examples/cms-agilitycms/lib/constants.js @@ -4,4 +4,4 @@ export const CMS_URL = 'https://www.agilitycms.com' export const CMS_LANG = 'en-us' export const CMS_CHANNEL = 'website' export const HOME_OG_IMAGE_URL = - 'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Agility%20CMS**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fcdn.agilitycms.com%2Fcontent-manager%2Fimages%2Flogos%2F3d69eddf6f00b8824feb126d9ac2bed3ec6e85c0.png&widths=undefined&widths=350&heights=200&heights=auto' + 'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Agility%20CMS**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fcdn.agilitycms.com%2Fcontent-manager%2Fimages%2Flogos%2F3d69eddf6f00b8824feb126d9ac2bed3ec6e85c0.png&widths=undefined&widths=350&heights=200&heights=auto' diff --git a/examples/cms-ghost/components/alert.js b/examples/cms-ghost/components/alert.js index e6fd18b175c8c..051f3319649ed 100644 --- a/examples/cms-ghost/components/alert.js +++ b/examples/cms-ghost/components/alert.js @@ -27,7 +27,7 @@ export default function Alert({ preview }) { <> The source code for this blog is{' '} available on GitHub diff --git a/examples/cms-ghost/components/footer.js b/examples/cms-ghost/components/footer.js index 102872d195df0..b305c3eb40b0d 100644 --- a/examples/cms-ghost/components/footer.js +++ b/examples/cms-ghost/components/footer.js @@ -17,7 +17,7 @@ export default function Footer() { Read Documentation View on GitHub diff --git a/examples/with-ant-design-mobile/.babelrc b/examples/with-ant-design-mobile/.babelrc deleted file mode 100644 index 89444305b2cc6..0000000000000 --- a/examples/with-ant-design-mobile/.babelrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [ - [ - "import", - { - "libraryName": "antd-mobile", - "style": "css" - } - ] - ] -} diff --git a/examples/with-ant-design-mobile/.gitignore b/examples/with-ant-design-mobile/.gitignore deleted file mode 100644 index 1437c53f70bc2..0000000000000 --- a/examples/with-ant-design-mobile/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/examples/with-ant-design-mobile/README.md b/examples/with-ant-design-mobile/README.md deleted file mode 100644 index be8f9a0dff82b..0000000000000 --- a/examples/with-ant-design-mobile/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# Ant Design Mobile example - -This example features how you use [antd-mobile](https://github.com/ant-design/ant-design-mobile) (Ant Design Mobile FrontEnd Framework) with Next.js. - -## Deploy your own - -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): - -[![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-mobile&project-name=with-ant-design-mobile&repository-name=with-ant-design-mobile) - -## How to use - -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npx create-next-app --example with-ant-design-mobile with-ant-design-mobile-app -# or -yarn create next-app --example with-ant-design-mobile with-ant-design-mobile-app -``` - -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-ant-design-mobile/components/Layout.js b/examples/with-ant-design-mobile/components/Layout.js deleted file mode 100644 index b3748735612eb..0000000000000 --- a/examples/with-ant-design-mobile/components/Layout.js +++ /dev/null @@ -1,31 +0,0 @@ -import { NavBar, Icon, WingBlank } from 'antd-mobile' -import { withRouter } from 'next/router' -import Head from 'next/head' - -export default withRouter(({ router, children, title }) => ( -
- - {title} - - } - onLeftClick={() => router.back()} - > - Ant Design Mobile example - -

{title}

- - {children} -
-)) diff --git a/examples/with-ant-design-mobile/next.config.js b/examples/with-ant-design-mobile/next.config.js deleted file mode 100644 index f912af6e6d48d..0000000000000 --- a/examples/with-ant-design-mobile/next.config.js +++ /dev/null @@ -1,27 +0,0 @@ -const withCSS = require('@zeit/next-css') - -module.exports = withCSS({ - webpack: (config, { isServer }) => { - if (isServer) { - const antStyles = /antd-mobile\/.*?\/style.*?/ - const origExternals = [...config.externals] - config.externals = [ - (context, request, callback) => { - if (request.match(antStyles)) return callback() - if (typeof origExternals[0] === 'function') { - origExternals[0](context, request, callback) - } else { - callback() - } - }, - ...(typeof origExternals[0] === 'function' ? [] : origExternals), - ] - - config.module.rules.unshift({ - test: antStyles, - use: 'null-loader', - }) - } - return config - }, -}) diff --git a/examples/with-ant-design-mobile/package.json b/examples/with-ant-design-mobile/package.json deleted file mode 100644 index 8d6d62eda9d02..0000000000000 --- a/examples/with-ant-design-mobile/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "with-ant-design-mobile", - "version": "1.1.0", - "dependencies": { - "@zeit/next-css": "1.0.1", - "antd-mobile": "2.2.5", - "babel-plugin-import": "^1.2.1", - "next": "latest", - "null-loader": "2.0.0", - "react": "^16.7.0", - "react-dom": "^16.7.0" - }, - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "license": "MIT" -} diff --git a/examples/with-ant-design-mobile/pages/_app.js b/examples/with-ant-design-mobile/pages/_app.js deleted file mode 100644 index d6a67f40f6ff8..0000000000000 --- a/examples/with-ant-design-mobile/pages/_app.js +++ /dev/null @@ -1,27 +0,0 @@ -import App from 'next/app' -import Head from 'next/head' - -export default class CustomApp extends App { - render() { - const { Component, pageProps } = this.props - return ( - <> - - - - - - - ) - } -} diff --git a/examples/with-ant-design-mobile/pages/about.js b/examples/with-ant-design-mobile/pages/about.js deleted file mode 100644 index 768451b116389..0000000000000 --- a/examples/with-ant-design-mobile/pages/about.js +++ /dev/null @@ -1,13 +0,0 @@ -import Layout from '../components/Layout' -import { Button } from 'antd-mobile' -import Link from 'next/link' - -export default function About() { - return ( - - - - - - ) -} diff --git a/examples/with-ant-design-mobile/pages/index.js b/examples/with-ant-design-mobile/pages/index.js deleted file mode 100644 index a762ed590cf0c..0000000000000 --- a/examples/with-ant-design-mobile/pages/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import Layout from '../components/Layout' -import { Button } from 'antd-mobile' -import Link from 'next/link' - -export default function Home() { - return ( - - - - - - ) -} diff --git a/examples/with-aphrodite/README.md b/examples/with-aphrodite/README.md index c85ba767b0081..1196c79a4ce81 100644 --- a/examples/with-aphrodite/README.md +++ b/examples/with-aphrodite/README.md @@ -1,6 +1,6 @@ # Example app with aphrodite -This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [Aphrodite](https://github.com/Khan/aphrodite/). +This example features how to use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [Aphrodite](https://github.com/Khan/aphrodite/). For this purpose we are extending the `` and injecting the server side rendered styles into the ``. diff --git a/examples/with-astroturf/.gitignore b/examples/with-astroturf/.gitignore deleted file mode 100644 index 1437c53f70bc2..0000000000000 --- a/examples/with-astroturf/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/examples/with-astroturf/README.md b/examples/with-astroturf/README.md deleted file mode 100644 index d20ea9e350e5f..0000000000000 --- a/examples/with-astroturf/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# Example app with [astroturf](https://github.com/4Catalyzer/astroturf) - -This example features how to use [astroturf](https://github.com/4Catalyzer/astroturf) as the zero-runtime CSS-in-JS styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx). - -## Deploy your own - -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): - -[![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-astroturf&project-name=with-astroturf&repository-name=with-astroturf) - -## How to use - -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npx create-next-app --example with-astroturf with-astroturf-app -# or -yarn create next-app --example with-astroturf with-astroturf-app -``` - -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-astroturf/next.config.js b/examples/with-astroturf/next.config.js deleted file mode 100644 index 5bd75ab6cc6fe..0000000000000 --- a/examples/with-astroturf/next.config.js +++ /dev/null @@ -1,13 +0,0 @@ -const withCSS = require('@zeit/next-css') - -module.exports = withCSS({ - cssModules: true, - webpack: (config) => { - config.module.rules.push({ - test: /\.js$/, - use: ['astroturf/loader'], - }) - - return config - }, -}) diff --git a/examples/with-astroturf/package.json b/examples/with-astroturf/package.json deleted file mode 100644 index 5dd4db93d71d5..0000000000000 --- a/examples/with-astroturf/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "with-astroturf", - "version": "1.0.0", - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "@zeit/next-css": "^1.0.1", - "astroturf": "^0.9.2", - "next": "latest", - "postcss-nested": "^4.1.2", - "react": "^16.8.6", - "react-dom": "^16.8.6" - }, - "license": "MIT" -} diff --git a/examples/with-astroturf/pages/index.js b/examples/with-astroturf/pages/index.js deleted file mode 100644 index 547e537055988..0000000000000 --- a/examples/with-astroturf/pages/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import styled from 'astroturf' - -const Button = styled('button')` - color: black; - border: 1px solid black; - background-color: white; - - &.primary { - color: blue; - border: 1px solid blue; - } - - &.color-green { - color: green; - } -` - -const IndexPage = () => ( - -) - -export default IndexPage diff --git a/examples/with-astroturf/postcss.config.js b/examples/with-astroturf/postcss.config.js deleted file mode 100644 index c70c4261d0791..0000000000000 --- a/examples/with-astroturf/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - plugins: { - 'postcss-nested': {}, - }, -} diff --git a/examples/with-compiled-css/README.md b/examples/with-compiled-css/README.md index a3f0696f57091..9aaf62b49cfe8 100644 --- a/examples/with-compiled-css/README.md +++ b/examples/with-compiled-css/README.md @@ -1,6 +1,6 @@ # Example app with [Compiled](https://github.com/atlassian-labs/compiled) (CSS-in-JS) -This example features how to use [Compiled](https://github.com/atlassian-labs/compiled) as the build time CSS-in-JS styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx). +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 diff --git a/examples/with-cxs/README.md b/examples/with-cxs/README.md index 7d0c534c5e1b3..0275ad7a83c9f 100644 --- a/examples/with-cxs/README.md +++ b/examples/with-cxs/README.md @@ -1,6 +1,6 @@ # Example app with cxs -This example shows how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [cxs](https://github.com/jxnblk/cxs/). +This example shows how to use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [cxs](https://github.com/jxnblk/cxs/). For this purpose we are extending the `` and injecting the server side rendered styles into the ``. diff --git a/examples/with-fela/README.md b/examples/with-fela/README.md index 82bb11567c222..a61461ff9075e 100755 --- a/examples/with-fela/README.md +++ b/examples/with-fela/README.md @@ -1,6 +1,6 @@ # Example app with Fela -This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [fela](https://github.com/rofrischmann/fela). +This example features how to use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [fela](https://github.com/rofrischmann/fela). For this purpose we are extending the `` and injecting the server side rendered styles into the ``. diff --git a/examples/with-graphql-faunadb/components/GuestbookEntry.js b/examples/with-graphql-faunadb/components/GuestbookEntry.js index f12f92a93790f..10676c5e44d69 100644 --- a/examples/with-graphql-faunadb/components/GuestbookEntry.js +++ b/examples/with-graphql-faunadb/components/GuestbookEntry.js @@ -46,11 +46,10 @@ export default function GuestbookEntry(props) {
{ Static Generation (SG) {' '} and the /api/user route (using{' '} - SWR) + SWR)

diff --git a/examples/with-monaco-editor/.gitignore b/examples/with-monaco-editor/.gitignore deleted file mode 100644 index 1437c53f70bc2..0000000000000 --- a/examples/with-monaco-editor/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/examples/with-monaco-editor/README.md b/examples/with-monaco-editor/README.md deleted file mode 100644 index a6c70550d471f..0000000000000 --- a/examples/with-monaco-editor/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# Example app with Monaco Editor - -This example adds support for [Monaco Editor](https://github.com/Microsoft/monaco-editor) integration using the -[`react-monaco-editor`](https://github.com/react-monaco-editor/react-monaco-editor) library. - -## Deploy your own - -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): - -[![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-monaco-editor&project-name=with-monaco-editor&repository-name=with-monaco-editor) - -## How to use - -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: - -```bash -npx create-next-app --example with-monaco-editor with-monaco-editor-app -# or -yarn create next-app --example with-monaco-editor with-monaco-editor-app -``` - -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-monaco-editor/code-sample.js b/examples/with-monaco-editor/code-sample.js deleted file mode 100644 index 0cf7a150ab36e..0000000000000 --- a/examples/with-monaco-editor/code-sample.js +++ /dev/null @@ -1,26 +0,0 @@ -export default `class Animal { - constructor(public name: string) { } - move(meters: number) { - console.log(this.name + " moved " + meters + "m."); - } -} - -class Snake extends Animal { - move() { - console.log("Slithering..."); - super.move(5); - } -} - -class Horse extends Animal { - move() { - console.log("Galloping..."); - super.move(45); - } -} - -var sam = new Snake("Sammy the Python") -var tom: Animal = new Horse("Tommy the Palomino") - -sam.move() -tom.move(34)` diff --git a/examples/with-monaco-editor/next.config.js b/examples/with-monaco-editor/next.config.js deleted file mode 100644 index f012e6d9c6c74..0000000000000 --- a/examples/with-monaco-editor/next.config.js +++ /dev/null @@ -1,26 +0,0 @@ -const withCSS = require('@zeit/next-css') -const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') - -module.exports = withCSS({ - webpack: (config) => { - config.module.rules.push({ - test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, - use: { - loader: 'url-loader', - options: { - limit: 100000, - }, - }, - }) - - config.plugins.push( - new MonacoWebpackPlugin({ - // Add languages as needed... - languages: ['javascript', 'typescript'], - filename: 'static/[name].worker.js', - }) - ) - - return config - }, -}) diff --git a/examples/with-monaco-editor/package.json b/examples/with-monaco-editor/package.json deleted file mode 100644 index ca52a0f910193..0000000000000 --- a/examples/with-monaco-editor/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "with-monaco-editor", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "@zeit/next-css": "^1.0.1", - "monaco-editor": "^0.20.0", - "monaco-editor-webpack-plugin": "^1.9.0", - "next": "9.3.1", - "next-fonts": "^1.0.3", - "react": "16.13.1", - "react-dom": "16.13.1", - "react-monaco-editor": "^0.34.0" - }, - "license": "MIT" -} diff --git a/examples/with-monaco-editor/pages/index.js b/examples/with-monaco-editor/pages/index.js deleted file mode 100644 index e2642e35347bc..0000000000000 --- a/examples/with-monaco-editor/pages/index.js +++ /dev/null @@ -1,29 +0,0 @@ -import dynamic from 'next/dynamic' - -import sample from '../code-sample' - -const MonacoEditor = dynamic(import('react-monaco-editor'), { ssr: false }) - -function IndexPage() { - return ( - { - window.MonacoEnvironment.getWorkerUrl = (moduleId, label) => { - if (label === 'json') return '/_next/static/json.worker.js' - if (label === 'css') return '/_next/static/css.worker.js' - if (label === 'html') return '/_next/static/html.worker.js' - if (label === 'typescript' || label === 'javascript') - return '/_next/static/ts.worker.js' - return '/_next/static/editor.worker.js' - } - }} - /> - ) -} - -export default IndexPage diff --git a/examples/with-react-with-styles/README.md b/examples/with-react-with-styles/README.md index b876578217eb4..92af40b7ac1ea 100644 --- a/examples/with-react-with-styles/README.md +++ b/examples/with-react-with-styles/README.md @@ -1,6 +1,6 @@ # Example app with react-with-styles -This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. +This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [react-with-styles](https://github.com/airbnb/react-with-styles). diff --git a/examples/with-reason-relay/package.json b/examples/with-reason-relay/package.json index 0bae5cf449ba4..fc2773277b375 100644 --- a/examples/with-reason-relay/package.json +++ b/examples/with-reason-relay/package.json @@ -13,7 +13,6 @@ "author": "arnarkari93@gmail.com", "license": "MIT", "dependencies": { - "@zeit/next-css": "1.0.1", "bs-fetch": "0.5.2", "bs-platform": "7.2.2", "graphql": "15.0.0", diff --git a/examples/with-stripe-typescript/README.md b/examples/with-stripe-typescript/README.md index d8dad63fddc9c..f178790e2800d 100644 --- a/examples/with-stripe-typescript/README.md +++ b/examples/with-stripe-typescript/README.md @@ -3,7 +3,7 @@ This is a full-stack TypeScript example using: - Frontend: - - Next.js and [SWR](https://github.com/zeit/swr) + - Next.js and [SWR](https://github.com/vercel/swr) - [react-stripe-js](https://github.com/stripe/react-stripe-js) for [Checkout](https://stripe.com/checkout) and [Elements](https://stripe.com/elements) - Backend - Next.js [API routes](https://nextjs.org/docs/api-routes/introduction) @@ -47,7 +47,7 @@ Once you have access to [the environment variables you'll need](#required-config - Custom Amount Donation with redirect to Stripe Checkout: - Frontend: [pages/donate-with-checkout.tsx](pages/donate-with-checkout.tsx) - Backend: [pages/api/checkout_sessions/](pages/api/checkout_sessions/) - - Checkout payment result page that uses [SWR](https://github.com/zeit/swr) hooks to fetch the CheckoutSession status from the API route: [pages/result.tsx](pages/result.tsx). + - Checkout payment result page that uses [SWR](https://github.com/vercel/swr) hooks to fetch the CheckoutSession status from the API route: [pages/result.tsx](pages/result.tsx). - Stripe Elements - Custom Amount Donation with Stripe Elements & PaymentIntents (no redirect): - Frontend: [pages/donate-with-elements.tsx](pages/donate-with-checkout.tsx) diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md index f01d2517d2a9b..243e34b97d706 100644 --- a/examples/with-styled-components/README.md +++ b/examples/with-styled-components/README.md @@ -1,6 +1,6 @@ # Example app with styled-components -This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components). +This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components). For this purpose we are extending the `` and injecting the server side rendered styles into the ``, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [``](https://nextjs.org/docs/advanced-features/custom-app) component. diff --git a/examples/with-styled-jsx-plugins/README.md b/examples/with-styled-jsx-plugins/README.md index 8120988b168f2..b9983a82f8c32 100644 --- a/examples/with-styled-jsx-plugins/README.md +++ b/examples/with-styled-jsx-plugins/README.md @@ -1,12 +1,12 @@ # With styled-jsx plugins -Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you +Next.js ships with [styled-jsx](https://github.com/vercel/styled-jsx) allowing you to write scope 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. This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. In this case PostCSS was used as an example. PostCSS plugins are defined in `package.json`. -More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins) +More details about how plugins work can be found in the [styled-jsx readme](https://github.com/vercel/styled-jsx#css-preprocessing-via-plugins) ## Deploy your own diff --git a/examples/with-styled-jsx-scss/README.md b/examples/with-styled-jsx-scss/README.md index 4ebbfc395efe7..d52a372f12f5f 100644 --- a/examples/with-styled-jsx-scss/README.md +++ b/examples/with-styled-jsx-scss/README.md @@ -1,12 +1,12 @@ # With styled-jsx SASS / SCSS -Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you +Next.js ships with [styled-jsx](https://github.com/vercel/styled-jsx) allowing you to write scope 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. This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. This example shows how to implement the SASS plugin. -More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins) +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 diff --git a/examples/with-styletron/README.md b/examples/with-styletron/README.md index 78f84e557a1e7..efb762782eed9 100644 --- a/examples/with-styletron/README.md +++ b/examples/with-styletron/README.md @@ -1,6 +1,6 @@ # Example app with styletron -This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styletron](https://github.com/rtsao/styletron). +This example features how yo use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styletron](https://github.com/rtsao/styletron). For this purpose we are extending the `` and injecting the server side rendered styles into the ``. diff --git a/examples/with-typestyle/README.md b/examples/with-typestyle/README.md index 2e4de7c3b7462..0491bedc5ee0f 100644 --- a/examples/with-typestyle/README.md +++ b/examples/with-typestyle/README.md @@ -1,6 +1,6 @@ # Example app with typestyle -This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [typestyle](https://github.com/typestyle/typestyle). +This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [typestyle](https://github.com/typestyle/typestyle). 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/master/examples/with-typescript) to use this with typescript. diff --git a/examples/with-zones/home/pages/about.js b/examples/with-zones/home/pages/about.js index f3e90f9bb1b8a..46889c91e49ff 100644 --- a/examples/with-zones/home/pages/about.js +++ b/examples/with-zones/home/pages/about.js @@ -8,7 +8,7 @@ const About = () => ( Go Back

- + ) diff --git a/examples/with-zones/home/public/static/zeit.png b/examples/with-zones/home/public/static/vercel.png similarity index 100% rename from examples/with-zones/home/public/static/zeit.png rename to examples/with-zones/home/public/static/vercel.png diff --git a/packages/create-next-app/create-app.ts b/packages/create-next-app/create-app.ts index f2d424a88eda7..c309ea5691458 100644 --- a/packages/create-next-app/create-app.ts +++ b/packages/create-next-app/create-app.ts @@ -256,7 +256,7 @@ export async function createApp({ return '.'.concat(name) } // README.md is ignored by webpack-asset-relocator-loader used by ncc: - // https://github.com/zeit/webpack-asset-relocator-loader/blob/e9308683d47ff507253e37c9bcbb99474603192b/src/asset-relocator.js#L227 + // https://github.com/vercel/webpack-asset-relocator-loader/blob/e9308683d47ff507253e37c9bcbb99474603192b/src/asset-relocator.js#L227 case 'README-template.md': { return 'README.md' } diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json index 6a89affc1b346..f27551d85d03b 100644 --- a/packages/react-refresh-utils/package.json +++ b/packages/react-refresh-utils/package.json @@ -12,7 +12,7 @@ "*.d.ts", "*.js" ], - "author": "Joe Haddad ", + "author": "Joe Haddad ", "license": "MIT", "scripts": { "prepublish": "tsc -d -p tsconfig.json", diff --git a/test/integration/basepath/test/index.test.js b/test/integration/basepath/test/index.test.js index 682d60769a9d5..7b433e66e5929 100644 --- a/test/integration/basepath/test/index.test.js +++ b/test/integration/basepath/test/index.test.js @@ -219,7 +219,7 @@ const runTests = (dev = false) => { }) // Added because of a regression in react-hot-loader, see issues: #4246 #4273 - // Also: https://github.com/zeit/styled-jsx/issues/425 + // Also: https://github.com/vercel/styled-jsx/issues/425 it('should update styles correctly', async () => { let browser try { @@ -258,7 +258,7 @@ const runTests = (dev = false) => { }) // Added because of a regression in react-hot-loader, see issues: #4246 #4273 - // Also: https://github.com/zeit/styled-jsx/issues/425 + // Also: https://github.com/vercel/styled-jsx/issues/425 it('should update styles in a stateful component correctly', async () => { let browser const pagePath = join( @@ -297,7 +297,7 @@ const runTests = (dev = false) => { }) // Added because of a regression in react-hot-loader, see issues: #4246 #4273 - // Also: https://github.com/zeit/styled-jsx/issues/425 + // Also: https://github.com/vercel/styled-jsx/issues/425 it('should update styles in a dynamic component correctly', async () => { let browser = null let secondBrowser = null diff --git a/test/integration/basic/test/hmr.js b/test/integration/basic/test/hmr.js index 8ea2f742eea6a..f0eeb07e827b9 100644 --- a/test/integration/basic/test/hmr.js +++ b/test/integration/basic/test/hmr.js @@ -143,7 +143,7 @@ export default (context, renderViaHTTP) => { }) // Added because of a regression in react-hot-loader, see issues: #4246 #4273 - // Also: https://github.com/zeit/styled-jsx/issues/425 + // Also: https://github.com/vercel/styled-jsx/issues/425 it('should update styles correctly', async () => { let browser try { @@ -180,7 +180,7 @@ export default (context, renderViaHTTP) => { }) // Added because of a regression in react-hot-loader, see issues: #4246 #4273 - // Also: https://github.com/zeit/styled-jsx/issues/425 + // Also: https://github.com/vercel/styled-jsx/issues/425 it('should update styles in a stateful component correctly', async () => { let browser const pagePath = join( @@ -219,7 +219,7 @@ export default (context, renderViaHTTP) => { }) // Added because of a regression in react-hot-loader, see issues: #4246 #4273 - // Also: https://github.com/zeit/styled-jsx/issues/425 + // Also: https://github.com/vercel/styled-jsx/issues/425 it('should update styles in a dynamic component correctly', async () => { let browser = null let secondBrowser = null