1.0.15 • Published 2 years ago
next-app-nprogress-navigation v1.0.15
next-app-nprogress-navigation
Customize next/link and next/navigation, make Nprogress working with NextJS 13 App dir just like NextJS 12
How to use
install package
npm install next-app-nprogress-navigationor
yarn add next-app-nprogress-navigationor
pnpm install next-app-nprogress-navigationimport Nprogress's css
src/app/globals.css
@import url("nprogress/nprogress.css");use NavigationEvents on root layout
src/app/layout.tsx
import "./globals.css";
import { NavigationEvents } from "next-app-nprogress-navigation";
import { Suspense } from "react";
export default function RootLayout({
children,
}: {
children: React.ReactNode,
}) {
return (
<html>
<body>
{children}
<Suspense fallback={null}>
<NavigationEvents />
</Suspense>
</body>
</html>
);
}use <NextLink /> from "next-app-nprogress-navigation" instead of <Link /> from 'next/link'
import { NextLink } from "next-app-nprogress-navigation";
export default function HomePageLink() {
return <NextLink href="/">Home Page</NextLink>;
}use useNextRouter from "next-app-nprogress-navigation" instead of useRouter from 'next/navigation'
"use client";
import { useNextRouter } from "next-app-nprogress-navigation";
export default function FooBarLink() {
const router = useNextRouter();
return (
<button
type="button"
onClick={() => {
router.push("/foo/bar");
}}>
Go To Foo Bar
</button>
);
}