JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 294
  • Score
    100M100P100Q96414F
  • License MIT

Enables Fast Refresh for remote data in NextJS.

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

Add plugin in next.config.js:

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

module.exports = withRemoteRefresh(nextConfig)

useRemoteRefresh

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

function App({ name, version }) {
  useRemoteRefresh({
    shouldRefresh: (path) => {
      // determine when to refresh based on changed path
    },
  })
  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

💻 📖

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