nextjs13-progress
Description
An implementation of n-progress for use with the Next.js 13 app router. This project is based on the Nextjs Progressbar
project and the props are 100% compatible.
Installation
npm i nextjs13-progress
Usage
In your layout.tsx:
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Next13NProgress, Link } from 'nextjs13-progress';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<main className="min-h-screen flex flex-col">
<header className="flex items-center gap-6 justify-center text-2xl text-white bg-slate-800 py-4">
<Link href="/">Home</Link>
<Link href="/page2">Page2</Link>
</header>
{children}
</main>
<Next13NProgress color="red" height={5} />
</body>
</html>
);
}NOTE: You must use the Link component from this package in order to initiate the start of n-progress. This component is a wrapper for Next/Link.
Default Config
If no props are passed to <Next13NProgress />, below is the default configuration applied.
<Next13NProgress color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />-
color: to change the default color of progressbar. You can also usergb(,,)orrgba(,,,). -
startPosition: to set the default starting position :0.3 = 30%. -
stopDelayMs: time for delay to stop progressbar inms. -
height: height of progressbar inpx. -
showOnShallow: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing in Next.js docs.
Demo
Click Here for a full working Next.js demo site.
Contributing
Contributions are always welcome! To contribute, simply fork, make your change and issue a PR.
Thanks
Special thanks to # Vũ Văn Dũng for his nextjs13-appdir-router-events demo Next.js project. I borrowed much of the code from that project to make this package.