From af9b5d186a56909c7150c189cde51c770f0f0f33 Mon Sep 17 00:00:00 2001 From: Yichi Zhang Date: Tue, 25 Aug 2020 21:11:28 -0400 Subject: [PATCH 1/4] Revert (#16497) + changes This reverts commit ec281df70b4d314d41b7d3bc7d0a8ddd42444d7a. --- examples/fast-refresh-demo/.gitignore | 34 +++++++++++ examples/fast-refresh-demo/README.md | 17 ++++++ .../components/ClickCount.js | 15 +++++ .../components/ClickCount.module.css | 32 +++++++++++ examples/fast-refresh-demo/global.css | 41 ++++++++++++++ examples/fast-refresh-demo/package.json | 15 +++++ examples/fast-refresh-demo/pages/_app.js | 5 ++ examples/fast-refresh-demo/pages/index.js | 56 +++++++++++++++++++ 8 files changed, 215 insertions(+) create mode 100644 examples/fast-refresh-demo/.gitignore create mode 100644 examples/fast-refresh-demo/README.md create mode 100644 examples/fast-refresh-demo/components/ClickCount.js create mode 100644 examples/fast-refresh-demo/components/ClickCount.module.css create mode 100644 examples/fast-refresh-demo/global.css create mode 100644 examples/fast-refresh-demo/package.json create mode 100644 examples/fast-refresh-demo/pages/_app.js create mode 100644 examples/fast-refresh-demo/pages/index.js diff --git a/examples/fast-refresh-demo/.gitignore b/examples/fast-refresh-demo/.gitignore new file mode 100644 index 0000000000000..1437c53f70bc2 --- /dev/null +++ b/examples/fast-refresh-demo/.gitignore @@ -0,0 +1,34 @@ +# 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/fast-refresh-demo/README.md b/examples/fast-refresh-demo/README.md new file mode 100644 index 0000000000000..d2583a8159fdb --- /dev/null +++ b/examples/fast-refresh-demo/README.md @@ -0,0 +1,17 @@ +# Fast Refresh Demo + +Next.js ships with [Fast Refresh](https://nextjs.org/docs/basic-features/fast-refresh) which gives you instantaneous feedback on edits made to your React components. + +This example shows an auto incrementing value, a classic counter and an error counter. Most edits should be visible within a second, without losing component state. + +## Usage + +Run the following command to get started: + +```bash +yarn +yarn dev +# or +npm install +npm run dev +``` diff --git a/examples/fast-refresh-demo/components/ClickCount.js b/examples/fast-refresh-demo/components/ClickCount.js new file mode 100644 index 0000000000000..283266612179e --- /dev/null +++ b/examples/fast-refresh-demo/components/ClickCount.js @@ -0,0 +1,15 @@ +import { useCallback, useState } from 'react' +import styles from './ClickCount.module.css' + +export default function ClickCount() { + const [count, setCount] = useState(0) + const increment = useCallback(() => { + setCount((v) => v + 1) + }, [setCount]) + + return ( + + ) +} diff --git a/examples/fast-refresh-demo/components/ClickCount.module.css b/examples/fast-refresh-demo/components/ClickCount.module.css new file mode 100644 index 0000000000000..3cba6f351a456 --- /dev/null +++ b/examples/fast-refresh-demo/components/ClickCount.module.css @@ -0,0 +1,32 @@ +button.btn { + margin: 0; + border: 1px solid #d1d1d1; + border-radius: 5px; + padding: 0.5em; + vertical-align: middle; + white-space: normal; + background: none; + line-height: 1; + font-size: 1rem; + font-family: inherit; + transition: all 0.2s ease; +} + +button.btn { + padding: 0.65em 1em; + background: #0076ff; + color: #fff; + border: none; + cursor: pointer; + transition: all 0.2s ease; +} +button.btn:focus { + outline: 0; + border-color: #0076ff; +} +button.btn:hover { + background: rgba(0, 118, 255, 0.8); +} +button.btn:focus { + box-shadow: 0 0 0 2px rgba(0, 118, 255, 0.5); +} diff --git a/examples/fast-refresh-demo/global.css b/examples/fast-refresh-demo/global.css new file mode 100644 index 0000000000000..e28fd3dfe7a37 --- /dev/null +++ b/examples/fast-refresh-demo/global.css @@ -0,0 +1,41 @@ +body { + font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', + 'Arial', sans-serif; + padding: 20px 20px 60px; + max-width: 680px; + margin: 0 auto; + font-size: 16px; + line-height: 1.65; + word-break: break-word; + font-kerning: auto; + font-variant: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + hyphens: auto; +} + +h2, +h3, +h4 { + margin-top: 1.5em; +} + +code, +pre { + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace, serif; + font-size: 0.92em; + color: #d400ff; +} + +code:before, +code:after { + content: '`'; +} + +hr { + border: none; + border-bottom: 1px solid #efefef; + margin: 5em auto; +} diff --git a/examples/fast-refresh-demo/package.json b/examples/fast-refresh-demo/package.json new file mode 100644 index 0000000000000..50fb57f61e5d6 --- /dev/null +++ b/examples/fast-refresh-demo/package.json @@ -0,0 +1,15 @@ +{ + "name": "fast-refresh-demo", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "^16.13.1", + "react-dom": "^16.13.1" + }, + "license": "MIT" +} diff --git a/examples/fast-refresh-demo/pages/_app.js b/examples/fast-refresh-demo/pages/_app.js new file mode 100644 index 0000000000000..d305f97bab7f1 --- /dev/null +++ b/examples/fast-refresh-demo/pages/_app.js @@ -0,0 +1,5 @@ +import '../global.css' + +export default function MyApp({ Component, pageProps }) { + return +} diff --git a/examples/fast-refresh-demo/pages/index.js b/examples/fast-refresh-demo/pages/index.js new file mode 100644 index 0000000000000..a04c7a2a58851 --- /dev/null +++ b/examples/fast-refresh-demo/pages/index.js @@ -0,0 +1,56 @@ +import { useCallback, useEffect, useState } from 'react' +import ClickCount from '../components/ClickCount' +import styles from '../components/ClickCount.module.css' + +function throwError() { + console.log( + // The function body() is not defined + document.body() + ) +} + +function Home() { + const [count, setCount] = useState(0) + const increment = useCallback(() => { + setCount((v) => v + 1) + }, [setCount]) + + useEffect(() => { + const r = setInterval(() => { + increment() + }, 1000) + return () => { + clearInterval(r) + } + }, [increment]) + + return ( +
+

Home

+
+

Auto Incrementing Value

+

Current value: {count}

+
+
+
+

Component with State

+ +
+
+
+ +
+
+ ) +} + +export default Home From dfdadd1e9b5a70cf5688c2b8c778670f80417ce8 Mon Sep 17 00:00:00 2001 From: Yichi Zhang Date: Wed, 26 Aug 2020 19:40:18 -0400 Subject: [PATCH 2/4] Add reference to docs --- docs/basic-features/fast-refresh.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/basic-features/fast-refresh.md b/docs/basic-features/fast-refresh.md index 5df2d35968a98..450b19e6db4b3 100644 --- a/docs/basic-features/fast-refresh.md +++ b/docs/basic-features/fast-refresh.md @@ -6,6 +6,13 @@ description: # Fast Refresh +
+ Examples + +
+ Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on **9.4 or newer**. With Next.js Fast Refresh enabled, From edbdf62621f150a26decf21aad986b9ec4fce474 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Tue, 1 Sep 2020 17:55:41 -0500 Subject: [PATCH 3/4] Updated components and styles --- .../fast-refresh-demo/components/Button.js | 5 +++ ...lickCount.module.css => Button.module.css} | 0 .../components/ClickCount.js | 8 +--- examples/fast-refresh-demo/global.css | 27 -------------- examples/fast-refresh-demo/pages/index.js | 37 +++++++++++++------ .../fast-refresh-demo/styles/home.module.css | 11 ++++++ 6 files changed, 44 insertions(+), 44 deletions(-) create mode 100644 examples/fast-refresh-demo/components/Button.js rename examples/fast-refresh-demo/components/{ClickCount.module.css => Button.module.css} (100%) create mode 100644 examples/fast-refresh-demo/styles/home.module.css diff --git a/examples/fast-refresh-demo/components/Button.js b/examples/fast-refresh-demo/components/Button.js new file mode 100644 index 0000000000000..fdb433551f560 --- /dev/null +++ b/examples/fast-refresh-demo/components/Button.js @@ -0,0 +1,5 @@ +import styles from './Button.module.css' + +export default function Button(props) { + return - ) + return } diff --git a/examples/fast-refresh-demo/global.css b/examples/fast-refresh-demo/global.css index e28fd3dfe7a37..e203447ed2412 100644 --- a/examples/fast-refresh-demo/global.css +++ b/examples/fast-refresh-demo/global.css @@ -1,8 +1,6 @@ body { font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; - padding: 20px 20px 60px; - max-width: 680px; margin: 0 auto; font-size: 16px; line-height: 1.65; @@ -14,28 +12,3 @@ body { text-rendering: optimizeLegibility; hyphens: auto; } - -h2, -h3, -h4 { - margin-top: 1.5em; -} - -code, -pre { - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace, serif; - font-size: 0.92em; - color: #d400ff; -} - -code:before, -code:after { - content: '`'; -} - -hr { - border: none; - border-bottom: 1px solid #efefef; - margin: 5em auto; -} diff --git a/examples/fast-refresh-demo/pages/index.js b/examples/fast-refresh-demo/pages/index.js index a04c7a2a58851..00d7e66d44426 100644 --- a/examples/fast-refresh-demo/pages/index.js +++ b/examples/fast-refresh-demo/pages/index.js @@ -1,6 +1,7 @@ import { useCallback, useEffect, useState } from 'react' +import Button from '../components/Button' import ClickCount from '../components/ClickCount' -import styles from '../components/ClickCount.module.css' +import styles from '../styles/home.module.css' function throwError() { console.log( @@ -19,36 +20,50 @@ function Home() { const r = setInterval(() => { increment() }, 1000) + return () => { clearInterval(r) } }, [increment]) return ( -
-

Home

+
+

Fast Refresh Demo

+

+ Fast Refresh is a Next.js feature that gives you instantaneous feedback + on edits made to your React components, without ever losing component + state. +

+
-

Auto Incrementing Value

+

+ Auto incrementing value. The counter won't reset after edits or + errors. +

Current value: {count}

-
+
-

Component with State

+

Component with state.

-
+
- +
+
) } diff --git a/examples/fast-refresh-demo/styles/home.module.css b/examples/fast-refresh-demo/styles/home.module.css new file mode 100644 index 0000000000000..693115201a064 --- /dev/null +++ b/examples/fast-refresh-demo/styles/home.module.css @@ -0,0 +1,11 @@ +.main { + padding: 20px 20px 60px; + max-width: 680px; + margin: 0 auto; +} + +.hr { + border: none; + border-bottom: 1px solid #efefef; + margin: 3em auto; +} From 757e40c982afd9b21e739bdb5355be7e415ad540 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Tue, 1 Sep 2020 18:01:59 -0500 Subject: [PATCH 4/4] Updated readme --- examples/fast-refresh-demo/README.md | 20 +++++++++++++------- examples/fast-refresh-demo/pages/index.js | 4 ++-- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/examples/fast-refresh-demo/README.md b/examples/fast-refresh-demo/README.md index d2583a8159fdb..bde2b03db474b 100644 --- a/examples/fast-refresh-demo/README.md +++ b/examples/fast-refresh-demo/README.md @@ -2,16 +2,22 @@ Next.js ships with [Fast Refresh](https://nextjs.org/docs/basic-features/fast-refresh) which gives you instantaneous feedback on edits made to your React components. -This example shows an auto incrementing value, a classic counter and an error counter. Most edits should be visible within a second, without losing component state. +This demos shows how the state of an auto incrementing value and a classic counter is preserved after edits or if there are errors. -## Usage +## Deploy your own -Run the following command to get started: +Deploy the example using [Vercel](https://vercel.com): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/fast-refresh-demo) + +## 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 -yarn -yarn dev +npx create-next-app --example fast-refresh-demo fast-refresh-demo # or -npm install -npm run dev +yarn create next-app --example fast-refresh-demo fast-refresh-demo ``` + +Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/fast-refresh-demo/pages/index.js b/examples/fast-refresh-demo/pages/index.js index 00d7e66d44426..588c89a8e612c 100644 --- a/examples/fast-refresh-demo/pages/index.js +++ b/examples/fast-refresh-demo/pages/index.js @@ -37,8 +37,8 @@ function Home() {

- Auto incrementing value. The counter won't reset after edits or - errors. + Auto incrementing value. The counter won't reset after edits or if + there are errors.

Current value: {count}