https://github.com/joulev/nextjs13-appdir-router-events
A Next.js 13 application with appDir and onStart/onComplete router events
https://github.com/joulev/nextjs13-appdir-router-events
Last synced: over 1 year ago
JSON representation
A Next.js 13 application with appDir and onStart/onComplete router events
- Host: GitHub
- URL: https://github.com/joulev/nextjs13-appdir-router-events
- Owner: joulev
- Created: 2022-11-13T11:16:43.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-01T07:12:52.000Z (almost 3 years ago)
- Last Synced: 2025-01-29T18:38:26.922Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://nextjs13-router-events.vercel.app
- Size: 72.3 KB
- Stars: 105
- Watchers: 3
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
An example Next.js 13 application with [the `app` directory](https://nextjs.org/docs/app/building-your-application/routing) enabled, with a mock (?) of the former router events `onStart` and `onComplete`.
When you navigate between routes, [`NProgress`](https://ricostacruz.com/nprogress) methods will be fired accordingly. This also works for SSR pages: the progress bar will appear instantly on route change, and will only disappear after the data fetch is completed. Or at least that's how it appears to be.
## How to use
- Copy the content of `lib/router-events`.
- Change the events in `lib/router-events/events.ts` to whatever you need.
- Add `` from `lib/router-events` to your root layout
- Wherever you use `useRouter`, change the import statement to import the hook from `lib/router-events`.
- Wherever you use ``, change the import statement to import the component from `lib/router-events`.