57dcc9d329
This command changed in pnpm [6.32.13](https://github.com/pnpm/pnpm/releases/tag/v6.32.13) and [7.1.1](https://github.com/pnpm/pnpm/releases/tag/v7.1.1) so lets update it since its been a few weeks and we can expect pnpm users to update more regularly than npm users. - Fixes https://github.com/vercel/next.js/pull/37240 - Fixes https://github.com/vercel/next.js/pull/37045 - Fixes https://github.com/vercel/next.js/pull/37032 - Fixes https://github.com/vercel/next.js/pull/36602 - Fixes https://github.com/vercel/next.js/pull/36496 |
||
---|---|---|
.. | ||
components | ||
pages | ||
.gitignore | ||
package.json | ||
README.md |
next-page-transitions example
The next-page-transitions
library is a component that sits at the app level and allows you to animate page changes. It works especially nicely with apps with a shared layout element, like a navbar. This component will ensure that only one page is ever mounted at a time, and manages the timing of animations for you. This component works similarly to react-transition-group
in that it applies classes to a container around your page; it's up to you to write the CSS transitions or animations to make things pretty!
This example includes two pages with links between them. The "About" page demonstrates how next-page-transitions
makes it easy to add a loading state when navigating to a page: it will wait for the page to "load" its content (in this examples, that's simulated with a timeout) and then hide the loading indicator and animate in the page when it's done.
Deploy your own
Deploy the example using Vercel or preview live with StackBlitz
How to use
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-next-page-transitions with-next-page-transitions-app
# or
yarn create next-app --example with-next-page-transitions with-next-page-transitions-app
# or
pnpm create next-app --example with-next-page-transitions with-next-page-transitions-app
Deploy it to the cloud with Vercel (Documentation).