https://github.com/bamdadfr/next-replace-url
Replace URL parameters in Next.js without re-rendering.
https://github.com/bamdadfr/next-replace-url
nextjs replace router url
Last synced: 9 months ago
JSON representation
Replace URL parameters in Next.js without re-rendering.
- Host: GitHub
- URL: https://github.com/bamdadfr/next-replace-url
- Owner: bamdadfr
- License: mit
- Created: 2022-03-30T16:18:03.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-03T00:13:14.000Z (over 1 year ago)
- Last Synced: 2024-10-29T23:08:13.757Z (about 1 year ago)
- Topics: nextjs, replace, router, url
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/next-replace-url
- Size: 182 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Replace URL parameters in Next.js without re-rendering.
## 🚀 Getting Started
```bash
npm install next-replace-url
yarn add next-replace-url
```
```javascript
import {useNextReplaceUrl, nextReplaceUrl} from 'next-replace-url';
// in your functional component
useNextReplaceUrl('parameter', value);
// from anywhere
nextReplaceUrl('parameter', value);
```
## 📖️ Description
The module replaces the `window.history.state` object therefore bypassing Next.js routing context, avoiding re-renders.
Some suggest shallow routing which unfortunately does not prevent re-renders.
### Under the hood example
```javascript
// User navigates to https://example.com/audio/1
// Current state
window.history.state = {
"url": "/audio/[volume]?volume=1", // Next.js URL
"as": "/audio/1" // What user sees
}
// Running the following command will replace the URL parameter "volume" with "2"
nextReplaceUrl('volume', '2')
// Resulting state
window.history.state = {
"url": "/audio/[volume]?volume=2",
"as": "/audio/2"
}
```
## 📖️ Related discussions
- https://github.com/vercel/next.js/discussions/18072