forked from vercel/next.js
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Fast Refresh Demo (vercel#16576)
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
Showing
11 changed files
with
228 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} /> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} /> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |