next-remote-refresh

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

Install

yarn add next-remote-refresh --dev

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

Usage

plugin

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

`useRemoteRefresh` hook

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

Development

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

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 🤔