Enables Fast Refresh for remote data in NextJS.
npm install next-remote-refreshUtilize Fast Refresh for remote data in Next.js. See the example for setup.
``bash`
yarn add next-remote-refresh --dev
`bash`
npm install next-remote-refresh --save-dev
Add and configure plugin in next.config.mjs:
`js
// 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:
`jsx
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 (
export function getStaticProps() {
return {
props: path.resolve(process.cwd(), './package.json', 'utf-8'),
}
}
`
`bash``
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!