### What?
Updates Deploy button URLs for all listed examples here:
https://github.com/vercel/next.js/tree/canary/examples
### Why?
The Deploy URLs are currently broken and result in a failed clone
attempt on Vercel.
### How?
The URLs have been changed from https://vercel.com/new/git/external?… to
-> https://vercel.com/new/clone?…
(Last updated
[here](8eaabe2fb0
)
in 2021)
2.2 KiB
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
yarn create next-app --example with-next-page-transitions with-next-page-transitions-app
pnpm create next-app --example with-next-page-transitions with-next-page-transitions-app
Deploy it to the cloud with Vercel (Documentation).