Package Exports

next-remote-refresh

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 NextJS.

⚠️ This solution relies on undocumented APIs and may break in future NextJS updates.

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 = withRemoteRefresh(nextConfig)

`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 build && 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
💻

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