--- title: Next.js View Transitions | daily.dev description: Learn how to use the View Transitions API in Next.js App Router and the next-view-transitions package to enhance your app's routing. canonical: https://daily.dev/posts/next-js-view-transitions-9mtqposql twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Next.js View Transitions | daily.dev og:description: Learn how to use the View Transitions API in Next.js App Router and the next-view-transitions package to enhance your app's routing. og:url: https://daily.dev/posts/next-js-view-transitions-9mtqposql og:image: https://api.daily.dev/og/posts/9MtqPoSqL.png og:image:alt: Next.js View Transitions og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Next.js View Transitions **[Community Picks](https://daily.dev/sources/community)** · 1 min read · 109 upvotes · 7 comments ## Summary Learn how to use the View Transitions API in Next.js App Router and the next-view-transitions package to enhance your app's routing. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@yavallejo** · 0 upvotes > Cool **@thr4sher** · 0 upvotes > Cool, thanks! **@challenger\_devstar** · 0 upvotes > Worth to read. Interesting... :) **@somesh47** · 0 upvotes > Interesting though... **@rrazvan** · 0 upvotes > ️*🔴 Your browser doesn’t support View Transitions.* ok :( ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#nextjs](https://daily.dev/tags/nextjs), [#react](https://daily.dev/tags/react), [#view-transitions](https://daily.dev/tags/view-transitions) [View this post on daily.dev](https://daily.dev/posts/next-js-view-transitions-9mtqposql) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Next.js View Transitions","url":"https://daily.dev/posts/next-js-view-transitions-9mtqposql","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/next-js-view-transitions-9mtqposql"},"datePublished":"2024-05-16T01:14:35.852Z","dateModified":"2026-06-25T02:16:03.397Z","description":"Learn how to use the View Transitions API in Next.js App Router and the next-view-transitions package to enhance your app's routing.","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c6cf02e6c0cbb7738f128974b19e8ee8?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c6cf02e6c0cbb7738f128974b19e8ee8?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":7,"discussionUrl":"https://daily.dev/posts/next-js-view-transitions-9mtqposql","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":109},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":7}],"keywords":"nextjs,react,view-transitions","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"Next.js View Transitions"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/next-js-view-transitions-9mtqposql","comment":[{"@type":"Comment","text":"Cool","datePublished":"2024-06-18T13:23:34.416Z","url":"https://daily.dev/posts/9MtqPoSqL#c-NNhSoKF4x","author":{"@type":"Person","name":"Yan","url":"https://daily.dev/yavallejo","image":"https://lh3.googleusercontent.com/a/ACg8ocJii7n8UhYom48rvPdPd0r9y-AQ0UfjycgH4BcoaYYQtoHoCLihcw=s96-c"}},{"@type":"Comment","text":"Cool, thanks!","datePublished":"2024-05-20T11:52:09.353Z","url":"https://daily.dev/posts/9MtqPoSqL#c-pd82aT7Wr","author":{"@type":"Person","name":"Enrico Monzeglio","url":"https://daily.dev/thr4sher","image":"https://lh3.googleusercontent.com/a/ACg8ocKbIkCMxXbTQmI2l-YIyQgSBHxVYaPcavVG8__58QST-_Q=s96-c"}},{"@type":"Comment","text":"Worth to read. Interesting… :)","datePublished":"2024-05-29T05:47:02.811Z","url":"https://daily.dev/posts/9MtqPoSqL#c-u3otBZO2F","author":{"@type":"Person","name":"Challenger","url":"https://daily.dev/challenger_devstar","image":"https://media.daily.dev/image/upload/s--xdDAn1U0--/f_auto/v1716919343/avatars/avatar_SM1ArX1ET1NjW9FLHWdQt"}},{"@type":"Comment","text":"Interesting though…","datePublished":"2024-05-28T14:38:22.389Z","url":"https://daily.dev/posts/9MtqPoSqL#c-8Xyfod7K2","author":{"@type":"Person","name":"Somesh Karmakar","url":"https://daily.dev/somesh47","image":"https://media.daily.dev/image/upload/s--Sof2CKF6--/f_auto/v1716907145/avatars/avatar_gMk23sYECvo5Sdc7B0vAp"}},{"@type":"Comment","text":"️🔴 Your browser doesn’t support View Transitions. ok :(","datePublished":"2024-05-23T07:27:32.224Z","url":"https://daily.dev/posts/9MtqPoSqL#c-ZMqrKck3a","author":{"@type":"Person","name":"Razvan","url":"https://daily.dev/rrazvan","image":"https://media.daily.dev/image/upload/f_auto/v1653653373/avatars/BS378DSAr"}}]} ```