├── .all-contributorsrc
├── .eslintrc.yml
├── .github
└── workflows
│ └── ci.yml
├── .gitignore
├── README.md
├── example
├── next.config.js
├── package.json
├── pages
│ └── index.js
├── watch
│ └── .gitignore
└── yarn.lock
├── hook.d.ts
├── hook.js
├── hook.test.js
├── index.d.ts
├── index.js
├── index.test.js
├── jest.config.js
├── package.json
├── server.js
├── server.test.js
├── test-utils.js
├── tsconfig.json
└── yarn.lock
/.all-contributorsrc:
--------------------------------------------------------------------------------
1 | {
2 | "projectName": "next-remote-refresh",
3 | "projectOwner": "souporserious",
4 | "repoType": "github",
5 | "repoHost": "https://github.com",
6 | "files": [
7 | "README.md"
8 | ],
9 | "imageSize": 100,
10 | "commit": false,
11 | "commitConvention": "none",
12 | "contributors": [
13 | {
14 | "login": "souporserious",
15 | "name": "Travis Arnold",
16 | "avatar_url": "https://avatars.githubusercontent.com/u/2762082?v=4",
17 | "profile": "https://github.com/souporserious",
18 | "contributions": [
19 | "code",
20 | "doc"
21 | ]
22 | },
23 | {
24 | "login": "joshwcomeau",
25 | "name": "Joshua Comeau",
26 | "avatar_url": "https://avatars.githubusercontent.com/u/6692932?v=4",
27 | "profile": "https://github.com/joshwcomeau",
28 | "contributions": [
29 | "ideas"
30 | ]
31 | },
32 | {
33 | "login": "pveyes",
34 | "name": "Fatih Kalifa",
35 | "avatar_url": "https://avatars.githubusercontent.com/u/1614415?v=4",
36 | "profile": "https://fatihkalifa.com",
37 | "contributions": [
38 | "code",
39 | "doc"
40 | ]
41 | },
42 | {
43 | "login": "browniefed",
44 | "name": "Jason Brown",
45 | "avatar_url": "https://avatars.githubusercontent.com/u/1714673?v=4",
46 | "profile": "https://codedaily.io",
47 | "contributions": [
48 | "doc"
49 | ]
50 | },
51 | {
52 | "login": "pacocoursey",
53 | "name": "Paco",
54 | "avatar_url": "https://avatars.githubusercontent.com/u/34928425?v=4",
55 | "profile": "https://paco.sh",
56 | "contributions": [
57 | "code"
58 | ]
59 | },
60 | {
61 | "login": "arn4v",
62 | "name": "Arnav Gosain",
63 | "avatar_url": "https://avatars.githubusercontent.com/u/12715704?v=4",
64 | "profile": "https://arnavgosain.com",
65 | "contributions": [
66 | "code"
67 | ]
68 | },
69 | {
70 | "login": "thebearingedge",
71 | "name": "Tim Davis",
72 | "avatar_url": "https://avatars.githubusercontent.com/u/7432943?v=4",
73 | "profile": "https://timdav.is/",
74 | "contributions": [
75 | "code"
76 | ]
77 | },
78 | {
79 | "login": "kherock",
80 | "name": "Kyle Herock",
81 | "avatar_url": "https://avatars.githubusercontent.com/u/4993980?v=4",
82 | "profile": "https://github.com/kherock",
83 | "contributions": [
84 | "code"
85 | ]
86 | },
87 | {
88 | "login": "maggie-j-liu",
89 | "name": "Maggie Liu",
90 | "avatar_url": "https://avatars.githubusercontent.com/u/63619830?v=4",
91 | "profile": "https://maggieliu.dev",
92 | "contributions": [
93 | "code"
94 | ]
95 | },
96 | {
97 | "login": "pkerschbaum",
98 | "name": "Patrick Kerschbaum",
99 | "avatar_url": "https://avatars.githubusercontent.com/u/13141109?v=4",
100 | "profile": "https://pkerschbaum.com",
101 | "contributions": [
102 | "code"
103 | ]
104 | },
105 | {
106 | "login": "ajitid",
107 | "name": "Ajit",
108 | "avatar_url": "https://avatars.githubusercontent.com/u/26769888?v=4",
109 | "profile": "http://ajitid.com",
110 | "contributions": [
111 | "ideas"
112 | ]
113 | },
114 | {
115 | "login": "ThomasJanUta",
116 | "name": "Thomas Jan Uta",
117 | "avatar_url": "https://avatars.githubusercontent.com/u/12129478?v=4",
118 | "profile": "https://thomasuta.com",
119 | "contributions": [
120 | "code"
121 | ]
122 | }
123 | ],
124 | "contributorsPerLine": 7,
125 | "skipCi": true,
126 | "commitType": "docs"
127 | }
128 |
--------------------------------------------------------------------------------
/.eslintrc.yml:
--------------------------------------------------------------------------------
1 | env:
2 | browser: true
3 | node: true
4 | extends:
5 | - standard-with-typescript
6 | parserOptions:
7 | project: tsconfig.json
8 | rules:
9 | comma-dangle:
10 | - error
11 | - always-multiline
12 | space-before-function-paren:
13 | - error
14 | - named: never
15 |
16 | overrides:
17 | - files: [__mocks__/**/*, __tests__/**/*, '**/*.test.*']
18 | env:
19 | jest: true
20 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches: [main]
6 | pull_request:
7 |
8 | jobs:
9 | lint:
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - uses: actions/checkout@v2
14 | - uses: actions/setup-node@v2
15 | with:
16 | node-version: 16.x
17 | cache: yarn
18 |
19 | - run: yarn install
20 | - run: yarn run lint
21 |
22 | test:
23 | runs-on: ubuntu-latest
24 |
25 | steps:
26 | - uses: actions/checkout@v2
27 | - uses: actions/setup-node@v2
28 | with:
29 | node-version: 16.x
30 | cache: yarn
31 |
32 | - run: yarn install
33 | - run: yarn test
34 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .next
3 | *.log
4 | node_modules
5 | coverage
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # next-remote-refresh
2 |
3 | Utilize Fast Refresh for remote data in Next.js. See the [example](/example) for setup.
4 |
5 | ## Install
6 |
7 | ```bash
8 | yarn add next-remote-refresh --dev
9 | ```
10 |
11 | ```bash
12 | npm install next-remote-refresh --save-dev
13 | ```
14 |
15 | ## Usage
16 |
17 | ### plugin
18 |
19 | Add and configure plugin in `next.config.mjs`:
20 |
21 | ```js
22 | // next.config.mjs
23 | import { resolve } from 'node:path'
24 | import createRemoteRefresh from 'next-remote-refresh'
25 |
26 | const withRemoteRefresh = createRemoteRefresh({
27 | paths: [resolve(__dirname, './package.json')],
28 | ignored: '**/*.json',
29 | })
30 |
31 | export default withRemoteRefresh({ ...next config here })
32 | ```
33 |
34 | ### `useRemoteRefresh` hook
35 |
36 | 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`:
37 |
38 | ```jsx
39 | import { useRouter } from 'next/router'
40 | import { useRemoteRefresh } from 'next-remote-refresh/hook'
41 | import path from 'path'
42 |
43 | function App({ name, version }) {
44 | const router = useRouter()
45 |
46 | useRemoteRefresh({
47 | shouldRefresh: (path) => path.includes(router.query.slug),
48 | })
49 |
50 | return (
51 |
52 | Package: {name} Version: {version}
53 |
54 | )
55 | }
56 |
57 | export function getStaticProps() {
58 | return {
59 | props: path.resolve(process.cwd(), './package.json', 'utf-8'),
60 | }
61 | }
62 | ```
63 |
64 | ## Development
65 |
66 | ```bash
67 | yarn install && yarn link
68 | cd example
69 | yarn install && yarn link next-remote-refresh
70 | yarn dev
71 | ```
72 |
73 | ## Related
74 |
75 | [Refreshing Server-Side Props](https://www.joshwcomeau.com/nextjs/refreshing-server-side-props/)
76 |
77 | [next-remote-watch](https://github.com/hashicorp/next-remote-watch)
78 |
79 | ## Contributors ✨
80 |
81 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
82 |
83 |
84 |
85 |
86 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
113 |
--------------------------------------------------------------------------------
/example/next.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | const withRemoteRefresh = require('next-remote-refresh')({
4 | paths: [
5 | path.resolve(__dirname, '../package.json'),
6 | path.resolve(__dirname, 'watch'),
7 | ],
8 | })
9 |
10 | const nextConfig = {}
11 |
12 | module.exports = withRemoteRefresh(nextConfig)
13 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example",
3 | "version": "0.0.0",
4 | "private": "true",
5 | "scripts": {
6 | "dev": "next dev"
7 | },
8 | "dependencies": {
9 | "next": "^12.0.1"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/example/pages/index.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import path from 'path'
3 | import { useRemoteRefresh } from 'next-remote-refresh/hook'
4 | import { useState } from 'react'
5 |
6 | export default function Index({ pkg, watchFiles = [] }) {
7 | const [count, setCount] = useState(0)
8 | useRemoteRefresh()
9 | return (
10 |
11 |
12 | {pkg.name} - v{pkg.version}
13 |
14 |
{pkg.description}
15 |
16 |
17 |
18 | {count}
19 |
20 |
Files in watch/
21 |
22 | {watchFiles.map(({ fileName, size }) => - {fileName} ({size}b)
)}
23 |
24 |
25 | Hint: Update the package.json file at the root to see it live update.
26 |
27 |
