Utilize Fast Refresh for remote data in Next.js. See the example for setup.
yarn add next-remote-refresh --dev
npm install next-remote-refresh --save-dev
Add and configure plugin in next.config.mjs
:
// next.config.mjs
import { resolve } from 'node:path'
import createRemoteRefresh from 'next-remote-refresh'
const withRemoteRefresh = createRemoteRefresh({
paths: [resolve(__dirname, './package.json')],
ignored: '**/*.json',
})
export default withRemoteRefresh({ ...next config here })
Add the useRemoteRefresh
hook to the top-level component in your app. You may also configure when the app should refresh based on the changed path
:
import { useRouter } from 'next/router'
import { useRemoteRefresh } from 'next-remote-refresh/hook'
import path from 'path'
function App({ name, version }) {
const router = useRouter()
useRemoteRefresh({
shouldRefresh: (path) => path.includes(router.query.slug),
})
return (
<div>
Package: {name} Version: {version}
</div>
)
}
export function getStaticProps() {
return {
props: path.resolve(process.cwd(), './package.json', 'utf-8'),
}
}
yarn install && yarn link
cd example
yarn install && yarn link next-remote-refresh
yarn dev
Thanks goes to these wonderful people (emoji key):
Travis Arnold 💻 📖 |
Joshua Comeau 🤔 |
Fatih Kalifa 💻 📖 |
Jason Brown 📖 |
Paco 💻 |
Arnav Gosain 💻 |
Tim Davis 💻 |
Kyle Herock 💻 |
Maggie Liu 💻 |
Patrick Kerschbaum 💻 |
Ajit 🤔 |
This project follows the all-contributors specification. Contributions of any kind welcome!