How to do component transitions between pages in NextJS?

Question

I am trying to make a simple form that slides to the right like this one used by DigitalOcean when you click on "Sign up using email": https://cloud.digitalocean.com/registrations/new.

The transition itself is pretty easy, what caught my attention is that they use 2 separate routes for this, the first one under /new and the other one under /email. These 2 seem to be separate pages and not just 2 different states to which a route is programmatically added, how can I do this in NextJS?

Answer 1

I believe the feature that you're looking for is shallow routing.

From the Docs:

Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps, getStaticProps, and getInitialProps.

You'll receive the updated pathname and the query via the router object (added by useRouter or withRouter), without losing state.

Note, however, that:

[s]hallow routing only works for URL changes in the current page.

See also:

• next/router - router.push()
• Dynamic Routes
• This answer by @metaaa may also shed some light re implementation.

Best of luck and happy coding!