10 |
11 |
12 |
13 |
15 |
16 |
18 |
19 |
21 |
22 |
24 |
25 |
26 |
27 | Demo
28 |
29 |
30 |
32 |
33 | {
35 | e.preventDefault()
36 | router.push('/demo', {
37 | // Optional custom transition
38 | onTransitionReady: slideInOut,
39 | })
40 | }}
41 | href='/demo'
42 | >
43 | Go to /demo with custom transition →
44 |
45 |
46 |
Disclaimer
47 |
48 | This library is aimed at basic use cases of View Transitions and Next.js
49 | App Router. With more complex applications and use cases like concurrent
50 | rendering, Suspense and streaming, new primitives and APIs still need to
51 | be developed into the core of React and Next.js in the future (
52 |
56 | more
57 |
58 | ).
59 |
60 |
Installation
61 |
62 | Use your favorite package manager to install the{' '}
63 | next-view-transitions package:
64 |
65 |
66 | pnpm install next-view-transitions
67 |
68 |
Usage
69 |
70 | Wrap your content with the <ViewTransitions>{' '}
71 | component inside the layout file:
72 |
73 |
74 |
75 | {`\
76 | import { ViewTransitions } from 'next-view-transitions'
77 |
78 | export default function Layout({ children }) {
79 | return (
80 |
81 |
82 |
83 | {children}
84 |
85 |
86 |
87 | )
88 | }`}
89 |
90 |
91 |
92 | Then, use the <Link> component for links that need to
93 | trigger a view transition:
94 |
95 |
96 |
97 | {`\
98 | import { Link } from 'next-view-transitions'
99 |
100 | export default function Component() {
101 | return (
102 |
103 |
105 | )
106 | }`}
107 |
108 |
109 |
110 | Or use the useTransitionRouter() hook to navigate manually:
111 |
112 |
113 |
114 | {`\
115 | import { useTransitionRouter } from 'next-view-transitions'
116 |
117 | export default function Component() {
118 | const router = useTransitionRouter()
119 | return (
120 |
121 | {
122 | router.push('/about')
123 | }}>
124 | Go to /about
125 |
126 |
127 | )
128 | }`}
129 |
130 |
131 |
That’s it!
132 |