-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
NavigationProgress setup for NextJS13 App Directory #4927
Comments
Hello! I too am interested in this. It looks like this is a problem with Next 13, currently it doesn't supports router events as you pointed. If you are not using Next then it isn't a problem since the component works well with the pure React Router. But for us Next users I think the only solution is to wait for a proper Router in Next. |
Help wanted with documentation update |
Here's what i am using.
|
How does this work for you without you getting an error for 'use client' since you are using useEffect? |
This is my implementation, I just added a delay so it actually shows something and it is not immediately gone: 'use client';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { NavigationProgress, nprogress } from '@mantine/nprogress';
export function RouterTransition() {
// Get path and params
const pathname = usePathname();
const searchParams = useSearchParams();
// Listen to changes
useEffect(() => {
// Complete after 1s delay
setTimeout(() => nprogress.complete(), 1000);
return () => {
// Start bar
nprogress.start();
};
}, [pathname, searchParams]);
return <NavigationProgress size={5} />;
} However, I wonder how to implement this before the route changes, so when NextJS is pre-fetching the page, something like YouTube does for example. But this is a start anyway. EDIT: |
The given solution works fine in dev, but fails during build, due to a Suspense Boundary issue using Next.js V14.1. 'use client'
import { NavigationProgress, nprogress } from '@mantine/nprogress'
import { usePathname } from 'next/navigation'
import { useEffect } from 'react'
export const RouterTransition = () => {
const pathname = usePathname()
useEffect(() => {
nprogress.complete()
return () => {
nprogress.start()
}
}, [pathname])
return <NavigationProgress size={5} />
}
|
Link to the page where something nasty is located
https://mantine.dev/others/nprogress/#setup-navigationprogress
Exact quote of what is wrong
Hi, I tried setting up
NavigationProgress
for NextJS13 App Dir but the guide was not available onv7.1.0
docs. and the olderv6.0.21
docs still uses the Pages directory setup show here.I had a little trouble adapting this to the app directory since next13 app dir uses
next/navigation
now instead ofnext/router
. I've come up with a way to make this work on the app directory.It uses
usePathname
to check the current url anduseSearchParams
to let you read the URL's query string. This provides a actual start to finish for request.Example of it being used on a
handleSubmit
function from a form'sonSubmit
And being used in the body just like in the old docs.
I'm kinda new to open source contributing, so I am not particular sure if this serves as a proper Issue.
Thanks,
The text was updated successfully, but these errors were encountered: