Skip to content

Commit

Permalink
Add Fast Refresh Demo (vercel#16576)
Browse files Browse the repository at this point in the history
Closes vercel#16538 

Basically reverts vercel#16497 and some minor changes. Also adds a link in the docs.

This reverts commit ec281df.
  • Loading branch information
YichiZ authored and Piotr Bosak committed Sep 26, 2020
1 parent 954ca8e commit 251b0e7
Show file tree
Hide file tree
Showing 11 changed files with 228 additions and 0 deletions.
7 changes: 7 additions & 0 deletions docs/basic-features/fast-refresh.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@ description:

# Fast Refresh

<details open>
<summary><b>Examples</b></summary>
<ul>
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/fast-refresh-demo">Fast Refresh Demo</a></li>
</ul>
</details>

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,
Expand Down
34 changes: 34 additions & 0 deletions examples/fast-refresh-demo/.gitignore
Original file line number Diff line number Diff line change
@@ -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
23 changes: 23 additions & 0 deletions examples/fast-refresh-demo/README.md
Original file line number Diff line number Diff line change
@@ -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)).
5 changes: 5 additions & 0 deletions examples/fast-refresh-demo/components/Button.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import styles from './Button.module.css'

export default function Button(props) {
return <button type="button" className={styles.btn} {...props} />
}
32 changes: 32 additions & 0 deletions examples/fast-refresh-demo/components/Button.module.css
Original file line number Diff line number Diff line change
@@ -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);
}
11 changes: 11 additions & 0 deletions examples/fast-refresh-demo/components/ClickCount.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { useCallback, useState } from 'react'
import Button from './Button'

export default function ClickCount() {
const [count, setCount] = useState(0)
const increment = useCallback(() => {
setCount((v) => v + 1)
}, [setCount])

return <Button onClick={increment}>Clicks: {count}</Button>
}
14 changes: 14 additions & 0 deletions examples/fast-refresh-demo/global.css
Original file line number Diff line number Diff line change
@@ -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;
}
15 changes: 15 additions & 0 deletions examples/fast-refresh-demo/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
5 changes: 5 additions & 0 deletions examples/fast-refresh-demo/pages/_app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import '../global.css'

export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
71 changes: 71 additions & 0 deletions examples/fast-refresh-demo/pages/index.js
Original file line number Diff line number Diff line change
@@ -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 (
<main className={styles.main}>
<h1>Fast Refresh Demo</h1>
<p>
Fast Refresh is a Next.js feature that gives you instantaneous feedback
on edits made to your React components, without ever losing component
state.
</p>
<hr className={styles.hr} />
<div>
<p>
Auto incrementing value. The counter won't reset after edits or if
there are errors.
</p>
<p>Current value: {count}</p>
</div>
<hr className={styles.hr} />
<div>
<p>Component with state.</p>
<ClickCount />
</div>
<hr className={styles.hr} />
<div>
<p>
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.
</p>
<Button
onClick={(e) => {
setTimeout(() => document.parentNode(), 0)
throwError()
}}
>
Throw an Error
</Button>
</div>
<hr className={styles.hr} />
</main>
)
}

export default Home
11 changes: 11 additions & 0 deletions examples/fast-refresh-demo/styles/home.module.css
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 251b0e7

Please sign in to comment.