DEV Community

Cover image for How to add router progress bar in Next Js 13

How to add router progress bar in Next Js 13

Sabbir Zzaman on August 21, 2023

Getting Started If you've found yourself struggling to implement a reliable router progress bar for your Next.js 13 project, don't wor...
Read full post
Collapse
 
rodrigocipriani profile image
Rodrigo Cipriani da Rosa •

Nice one!!
I found a bug 😪 when you command-click, it opens in a new tab, and in the original tab, the loading runs forever.

Collapse
 
peculiarrichard profile image
Peculiar Richard •

Thank you so much! What if I want to create a custom loading screen? like an overlay with the spinner in the center? can I do this with it?

Collapse
 
erosmariano profile image
Eros dos Santos Mariano •

When I use router.push from next 13, NextTopLoader doesn't work, does anyone have a solution?

Collapse
 
sabbir_zz profile image
Sabbir Zzaman • • Edited

@erosmariano NextTopLoader will only work for <Link>

Collapse
 
ivan_jrmc profile image
Ivan Jeremic •

But then it is useless sorry.

Thread Thread
 
siddiquiaffan profile image
Siddiqui Affan •

Good news! Update the package to the latest version. Import useRouter from nextjs-toploader/app, and then use router.push.

This useRouter is a wrapper for nextjs useRouter hook.

Collapse
 
muhammadasif_wd profile image
Muhammad Asif •

Thank you, bro, very helpful.

Collapse
 
respect17 profile image
Kudzai Murimi •

Next JS does the magic!

Collapse
 
huzaifaasim017 profile image
Huzaifa Asim •

it's nice...

Collapse
 
shapati profile image
Ayandiran Daniel Oluwanifemi •

hi. nice work ! im having issues setting the color tho

Collapse
 
sabbir_zz profile image
Sabbir Zzaman • • Edited

@shapati You can set the color from <NextTopLoader /> component. Example: <NextTopLoader color="#FFFFFF" />