NextTopLoader not showing for useRouter (duplicate)

PatelYash7 commented 2 weeks ago

I am creating this issue because i have followed all the required steps to setup nextjs toploader in my NextJS application. But while routing between different routes using Next/navigation, nextjs toploader is notshowing up. here is my layout.ts file:-

import type { Metadata } from 'next';
import { Inter as FontSans } from 'next/font/google';
import './globals.css';
import { cn } from '@/lib/utils';
import { ThemeProvider } from '@/providers/theme-providers';
import NextTopLoader from 'nextjs-toploader';
import { cookies } from 'next/headers';
import { Providers } from '@/providers/session-provider';
const fontSans = FontSans({
    subsets: ['latin'],
    variable: '--font-sans',
});
export const metadata: Metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app',
};
function getTheme() {
    const cookieStore = cookies();
    const themeCookie = cookieStore.get('theme');
    const theme = themeCookie ? themeCookie.value : 'dark';
    return theme;
}
export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    const theme = getTheme() as string;
    return (
        <html className={theme} style={{ colorScheme: theme }} lang='en'>
            <body
                className={cn(
                    'min-h-screen scroll-smooth bg-background max-w-[1536]  mx-auto  font-sans antialiased',
                    fontSans.variable,
                )}
            >
                <NextTopLoader
                    color='#2299DD'
                    initialPosition={0.08}
                    crawlSpeed={200}
                    height={100}
                    crawl={true}
                    showSpinner={true}
                    easing='ease'
                    speed={200}
                    shadow='0 0 10px #2299DD,0 0 5px #2299DD'
                    template='<div class="bar" role="bar"><div class="peg"></div></div> 
  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
                    zIndex={10000000000}
                    showAtBottom={false}
                />
                <Providers>
                    <ThemeProvider
                        attribute='class'
                        defaultTheme='system'
                        enableSystem={true}
                        disableTransitionOnChange
                    >
                        {children}
                    </ThemeProvider>
                </Providers>
            </body>
        </html>
    );
}

here i have tried placing the between/after providers and children.

Dependencies:-

"dependencies": {
        "@hookform/resolvers": "^3.9.0",
        "@next/env": "^14.2.6",
        "@prisma/client": "^5.18.0",
        "@radix-ui/react-accordion": "^1.2.0",
        "@radix-ui/react-checkbox": "^1.1.1",
        "@radix-ui/react-collapsible": "^1.1.0",
        "@radix-ui/react-dropdown-menu": "^2.1.1",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.1.0",
        "@radix-ui/react-navigation-menu": "^1.2.0",
        "@radix-ui/react-radio-group": "^1.2.0",
        "@radix-ui/react-select": "^2.1.1",
        "@radix-ui/react-separator": "^1.1.0",
        "@radix-ui/react-slot": "^1.1.0",
        "@radix-ui/react-switch": "^1.1.0",
        "@radix-ui/react-tabs": "^1.1.0",
        "@tabler/icons-react": "^3.12.0",
        "axios": "^1.7.7",
        "bcrypt": "^5.1.1",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.1",
        "embla-carousel-react": "^8.1.8",
        "framer-motion": "^11.3.24",
        "lucide-react": "^0.424.0",
        "mini-svg-data-uri": "^1.4.4",
        "next": "14.2.5",
        "next-auth": "^4.24.7",
        "next-sitemap": "^4.2.3",
        "next-themes": "^0.3.0",
        "nextjs-toploader": "^3.6.15",
        "prettier": "^3.3.3",
        "react": "^18",
        "react-dom": "^18",
        "react-dropzone": "^14.2.3",
        "react-hook-form": "^7.53.0",
        "react-icons": "^5.2.1",
        "react-use-measure": "^2.1.1",
        "sharp": "^0.33.4",
        "tailwind-merge": "^2.4.0",
        "tailwindcss-animate": "^1.0.7",
        "zod": "^3.23.8"
    },

TheSGJ commented 1 week ago

You have to import useEffect from nextjs-toploader/app

// Import the useRouter hook from nextjs-toploader to trigger the TopLoader
import { useRouter } from 'nextjs-toploader/app';

Then use it in your code:

const router = useRouter();
router.push('/some-page');

TheSGJ commented 1 week ago

Duplicate of #10

TheSGJ / nextjs-toploader

NextTopLoader not showing for useRouter (duplicate) #87