npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

next-remote-watch

v2.0.0

Published

decorated local server for next.js that enables reloads from data changes

Downloads

37,184

Readme

Next Remote Watch

This script replaces next dev with a version that adds a couple extra features:

  • The ability to watch a folder that is not within your next.js project for file changes and reload when they are detected.
  • It exposes a special route, /__next_reload, which will trigger a reload when you hit it with any request. You can also POST data to this route which will be displayed in the application logs in the terminal.

The best way to implement is is to use it as an alias for whatever npm script you used to run next dev before. For example, you might run it like this in your package.json:

// ...
"scripts": {
-  "start": "next dev"
+  "start": "next-remote-watch"
}

Important Warnings and Caveats

This package utilizes undocumented APIs from next.js that are not subject to semantic versioning. This means that any version bump to next.js, major, minor, or patch, could cause it to break without warning. If you decide to adopt this package, you should lock your next.js version to patch, and be careful when upgrading.

It's also important to note that this package can only be used to replace the development server and should under no circumstances be used in production. There is no reason that its functionality would be necessary in production anyway 😀

Why Would I Want This?

This script is very useful when you are loading data in getStaticProps or getStaticPaths, and you would like for your application to reload when that data changes.

For example, if you are pulling markdown content from a different repository, you can use this script to watch that repository for changes, then when you change your nextjs files, or any of the content files in the other repository, you get an automatic page reload.

As another example, if you are pulling content from a database of any sort, you could set up a script that triggers a reload when there are changes to your data, this way you can change your database and see an automatic page reload. You could also log any information about data changes to the terminal so it's clear what changed or why the reload was triggered.

It's a small, simple utility but offers a really nice developer experience when working with a nextjs app where the content is split out from the presentation, but you could have people working on either one -- with this script the app produces the same great local dev experience with hot reloads whether the code or the data has changed.

Configuration

If you'd like to pass in a filepath to be watched, it can be passed directly to the command as such:

// ...
"scripts": {
  "start": "next-remote-watch ../some-other-folder/foo"
}

You can use globs, or pass in multiple, space-separated paths to be watched as well.

Optional Flags

| Option | Shorthand | Example | Description | Default | | ----------- | --------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | | --root | -r | --root ./src | Path to Nextjs project | process.cwd() | | --event | -e | --event add | Specific event to listen for (add, addDir, change, unlink, unlinkDir | change | | --script | -s | --script ./scripts/sync.js | Node script to be called on event. The file should export a function that accepts two arguments (path, event). | | --command | -c | --command 'node ./scripts/sync.js {event} {path}' | Command to be called on event. You can use {event} and {path} in the command, which will be replaced with the respective values. | | --polling | -p | -p | Whether to use usePolling option in chokidar, typically necessary to successfully watch files over a network; for details on performance impact and use cases see chokidar documentation | false |

The Magic Reload URL

If you want changes to be triggered by something other than filesystem events, just send any request to the __next_reload route and it will hot reload. If you POST json data to the route in the following format, it will reflect some information into the app logs that display in the terminal.

{
  message: "Here's a test message!",
  color: "red / green / yellow / blue / magenta / cyan / gray / black / white" // optional
}

...that's it!