next-remote-refresh

Utilize Fast Refresh for remote data in NextJS. 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.js:

// next.config.js
const withRemoteRefresh = require('next-remote-refresh')({
  paths: [require('path').resolve(__dirname, './package.json')],
  ignored: '**/*.json',
})

module.exports = async () => {
  const config = await withRemoteRefresh(nextConfig)
  return config
}

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!