Skip to content
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.

Sign up for GitHub

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

Jump to bottom

NextTopLoader not showing for useRouter (duplicate) #87

Open
PatelYash7 opened this issue Sep 2, 2024 · 2 comments
Open

NextTopLoader not showing for useRouter (duplicate) #87

PatelYash7 opened this issue Sep 2, 2024 · 2 comments
Labels
duplicate This issue or pull request already exists

Comments

@PatelYash7
Copy link

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
Copy link
Owner

TheSGJ commented Sep 6, 2024

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 TheSGJ changed the title Nextjs toploader v-3.6.15 not showing up in Nextjs v-14.2.5 NextTopLoader not showing for useRouter (duplicate) Sep 6, 2024
@TheSGJ TheSGJ added the duplicate This issue or pull request already exists label Sep 6, 2024
@TheSGJ
Copy link
Owner

TheSGJ commented Sep 6, 2024

Duplicate of #10

@TheSGJ TheSGJ marked this as a duplicate of #10 Sep 6, 2024
@TheSGJ TheSGJ closed this as completed Sep 6, 2024
@TheSGJ TheSGJ reopened this Sep 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
duplicate This issue or pull request already exists
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@TheSGJ @PatelYash7