https://github.com/souporserious/next-remote-refresh

Enable Fast Refresh for remote data in Next.js
https://github.com/souporserious/next-remote-refresh

Last synced: 5 days ago
JSON representation

Enable Fast Refresh for remote data in Next.js

• Host: GitHub
• URL: https://github.com/souporserious/next-remote-refresh
• Owner: souporserious
• Created: 2021-06-25T06:46:24.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-10T16:48:53.000Z (5 months ago)
• Last Synced: 2024-11-28T08:49:20.398Z (15 days ago)
• Language: JavaScript
• Homepage:
• Size: 136 KB
• Stars: 151
• Watchers: 5
• Forks: 13
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• Awesome-NextJs - next-remote-refresh - [example](https://github.com/souporserious/next-remote-refresh/tree/main/example) (miscellaneous)

README

        
# next-remote-refresh

Utilize Fast Refresh for remote data in Next.js. See the [example](/example) for setup.

## Install

```bash

yarn add next-remote-refresh --dev

```

```bash

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

```

## Usage

### plugin

Add and configure plugin in `next.config.mjs`:

```js

// 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`:

```jsx

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 (

    


      Package: {name} Version: {version}

    

  )

}


export function getStaticProps() {

  return {

    props: path.resolve(process.cwd(), './package.json', 'utf-8'),

  }

}

```

## Development

```bash

yarn install && yarn link

cd example

yarn install && yarn link next-remote-refresh

yarn dev

```

## Related

[Refreshing Server-Side Props](https://www.joshwcomeau.com/nextjs/refreshing-server-side-props/)

[next-remote-watch](https://github.com/hashicorp/next-remote-watch)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
Travis Arnold
💻 📖

      
Joshua Comeau
🤔

      
Fatih Kalifa
💻 📖

      
Jason Brown
📖

      
Paco
💻

      
Arnav Gosain
💻

      
Tim Davis
💻

    

    

      
Kyle Herock
💻

      
Maggie Liu
💻

      
Patrick Kerschbaum
💻

      
Ajit
🤔

      
Thomas Jan Uta
💻

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!