narpt - Nextjs App Router Page Transition.
Currently only support NextJS with app router.
For npm users:
npm i narpt
For yarn users:
yarn add narpt
For pnpm users:
pnpm i narpt
- create a new nextjs app with
pnpm create next-app, select yes for App Router. - run
pnpm i narpt. - replace
app/layout.jswith the following code.
import { Inter } from 'next/font/google';
import { TransitionLayout } from 'narpt';
const inter = Inter({ subsets: ['latin'] });
export default function RootLayout({ children }) {
return (
<html lang='en'>
<body className={inter.className}>
<TransitionLayout>{children}</TransitionLayout>
</body>
</html>
);
}- replace
app/page.jswith the following code.
import { TransitionLink, TransitionDiv } from 'narpt';
export default function Home() {
return (
<main>
<TransitionDiv>
<TransitionLink href='/about'>Go To About</TransitionLink>
<div>Home Page</div>
</TransitionDiv>
</main>
);
}- create a new page
app/about/page.jsand insert the following code.
import { TransitionDiv, TransitionLink } from 'narpt';
const AboutPage = () => {
return (
<TransitionDiv>
<TransitionLink href='/'>Back</TransitionLink>
<div>About Page</div>
</TransitionDiv>
);
};
export default AboutPage;