next-remote-refresh

Utilize Fast Refresh for remote data in Next.js. See the example for setup.

Install

``bash
yarn add next-remote-refresh --dev
`

`bash
npm install next-remote-refresh --save-dev
`

Usage

$3

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 })
`

$3

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'),
}
}
`

Development

`bash
yarn install && yarn link
cd example
yarn install && yarn link next-remote-refresh
yarn dev
``

Related

Refreshing Server-Side Props

next-remote-watch

Contributors ✨

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!