Package Exports

next-remote-refresh
next-remote-refresh/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-remote-refresh) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 🤔