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

Related

Refreshing Server-Side Props

next-remote-watch

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!