https://github.com/stevenlafl/nextjs13-router-events
Provides NextJS 13 router events compatible with the App Router
https://github.com/stevenlafl/nextjs13-router-events
app-router app-router-nextjs events javascript nextjs nextjs13 router router-events typescript
Last synced: about 1 month ago
JSON representation
Provides NextJS 13 router events compatible with the App Router
- Host: GitHub
- URL: https://github.com/stevenlafl/nextjs13-router-events
- Owner: stevenlafl
- License: mit
- Created: 2023-07-16T08:37:54.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-26T21:54:27.000Z (over 1 year ago)
- Last Synced: 2025-05-03T10:47:03.425Z (about 1 month ago)
- Topics: app-router, app-router-nextjs, events, javascript, nextjs, nextjs13, router, router-events, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/nextjs13-router-events
- Size: 47.9 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NextJS 13 Router Events
Provides NextJS 13 router events compatible with the App Router
https://www.npmjs.com/package/nextjs13-router-events?activeTab=readme
## Usage
```
npm install nextjs13-router-events
```
Replace regular NextJS `Link` components with this one:
```tsx
import { Link } from 'nextjs13-router-events';
```
That Link component should be compatible with your setup.
Your layout.tsx:
```tsx
import { RouteChangeProvider } from 'nextjs13-router-events';
...
return (
{children}
)
```
Your component, where you want to monitor the onRouteChangeStart and onRouteChangeComplete events:
```tsx
import { useRouteChange } from 'nextjs13-router-events';
...
export default function Component(props: any) {
...
useRouteChange({
onRouteChangeStart: () => {
console.log('onStart 3');
},
onRouteChangeComplete: () => {
console.log('onComplete 3');
}
});
...
}
```
## Credits
Inspired by https://github.com/joulev/nextjs13-appdir-router-events