pveyes / next-remote-refresh

Enables Fast Refresh for remote data in NextJS.

next-remote-refresh

Utilize Fast Refresh for remote data in NextJS.

Install

yarn add next-remote-refresh --dev

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

Usage

View Example

{
  "scripts": {
    "dev": "next-remote-refresh ../docs & next dev"
  }
}

useRemoteRefresh

import { useRemoteRefresh } from 'next-remote-refresh'
import path from 'path'

function App({ name, version }) {
  useRemoteRefresh({
    shouldRefresh: (path, router) => {
      // do something based on changed file path
    },
  })
  return (
    <div>
      Package: {name} Version: {version}
    </div>
  )
}

export function useStaticProps() {
  return {
    props: path.resolve(process.cwd(), './package.json', 'utf-8'),
  }
}

Development

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

Related

next-remote-watch