narpt
v0.0.20
Published
Nextjs app router page transition
Downloads
7
Maintainers
Readme
narpt - Nextjs App Router Page Transition.
Support
Currently only support NextJS with app router.
Installation
For npm users:
npm i narpt
For yarn users:
yarn add narpt
For pnpm users:
pnpm i narpt
QuickStart
- create a new nextjs app with
pnpm create next-app
, select yes for App Router. - run
pnpm i narpt
. - replace
app/layout.js
with 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.js
with 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.js
and 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;