From 251b0e74265dea9c69447be31b1b921a3f987294 Mon Sep 17 00:00:00 2001 From: Yichi Zhang Date: Tue, 1 Sep 2020 19:27:57 -0400 Subject: [PATCH] Add Fast Refresh Demo (#16576) Closes #16538 Basically reverts #16497 and some minor changes. Also adds a link in the docs. This reverts commit ec281df70b4d314d41b7d3bc7d0a8ddd42444d7a. --- docs/basic-features/fast-refresh.md | 7 ++ examples/fast-refresh-demo/.gitignore | 34 +++++++++ examples/fast-refresh-demo/README.md | 23 ++++++ .../fast-refresh-demo/components/Button.js | 5 ++ .../components/Button.module.css | 32 +++++++++ .../components/ClickCount.js | 11 +++ examples/fast-refresh-demo/global.css | 14 ++++ examples/fast-refresh-demo/package.json | 15 ++++ examples/fast-refresh-demo/pages/_app.js | 5 ++ examples/fast-refresh-demo/pages/index.js | 71 +++++++++++++++++++ .../fast-refresh-demo/styles/home.module.css | 11 +++ 11 files changed, 228 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/Button.js create mode 100644 examples/fast-refresh-demo/components/Button.module.css create mode 100644 examples/fast-refresh-demo/components/ClickCount.js 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 create mode 100644 examples/fast-refresh-demo/styles/home.module.css diff --git a/docs/basic-features/fast-refresh.md b/docs/basic-features/fast-refresh.md index 5df2d35968a98e..450b19e6db4b3e 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, diff --git a/examples/fast-refresh-demo/.gitignore b/examples/fast-refresh-demo/.gitignore new file mode 100644 index 00000000000000..1437c53f70bc21 --- /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 00000000000000..bde2b03db474b7 --- /dev/null +++ b/examples/fast-refresh-demo/README.md @@ -0,0 +1,23 @@ +# 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 demos shows how the state of an auto incrementing value and a classic counter is preserved after edits or if there are errors. + +## Deploy your own + +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 +npx create-next-app --example fast-refresh-demo fast-refresh-demo +# or +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/components/Button.js b/examples/fast-refresh-demo/components/Button.js new file mode 100644 index 00000000000000..fdb433551f5607 --- /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 +} diff --git a/examples/fast-refresh-demo/global.css b/examples/fast-refresh-demo/global.css new file mode 100644 index 00000000000000..e203447ed2412f --- /dev/null +++ b/examples/fast-refresh-demo/global.css @@ -0,0 +1,14 @@ +body { + font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', + 'Arial', sans-serif; + 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; +} diff --git a/examples/fast-refresh-demo/package.json b/examples/fast-refresh-demo/package.json new file mode 100644 index 00000000000000..50fb57f61e5d69 --- /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 00000000000000..d305f97bab7f14 --- /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 00000000000000..588c89a8e612c6 --- /dev/null +++ b/examples/fast-refresh-demo/pages/index.js @@ -0,0 +1,71 @@ +import { useCallback, useEffect, useState } from 'react' +import Button from '../components/Button' +import ClickCount from '../components/ClickCount' +import styles from '../styles/home.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 ( +
+

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. The counter won't reset after edits or if + there are errors. +

+

Current value: {count}

+
+
+
+

Component with state.

+ +
+
+
+

+ The button below will throw 2 errors. You'll see the error overlay to + let you know about the errors but it won't break the page or reset + your state. +

+ +
+
+
+ ) +} + +export default Home 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 00000000000000..693115201a064a --- /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; +}