[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73869":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},73869,"next-view-transitions","shuding\u002Fnext-view-transitions","shuding","Use CSS View Transitions API in Next.js App Router.","https:\u002F\u002Fnext-view-transitions.vercel.app",null,"TypeScript",2385,92,13,19,0,1,27.91,"MIT License",false,"main",[23,24,25],"app-router","nextjs","view-transitions","2026-06-12 02:03:19","# next-view-transitions\n\nUse [View Transitions API](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FView_Transitions_API) in Next.js App Router.\n\n[**Demo**](https:\u002F\u002Fnext-view-transitions.vercel.app).\n\n## Disclaimer\n\nThis library is aimed at basic use cases of View Transitions and Next.js App Router. With more complex applications and use cases like concurrent rendering, Suspense and streaming, new primitives and APIs still need to be developed into the core of React and Next.js in the future ([more](https:\u002F\u002Ftwitter.com\u002Fshuding_\u002Fstatus\u002F1779583281920344448)).\n\n## Installation\n\nUse your favorite package manager to install the `next-view-transitions` package. For example:\n\n```bash\npnpm install next-view-transitions\n```\n\n## Usage\n\nWrap your content with the `\u003CViewTransitions>` component inside the layout file:\n\n```jsx\nimport { ViewTransitions } from 'next-view-transitions'\n\nexport default function Layout({ children }) {\n  return (\n    \u003CViewTransitions>\n      \u003Chtml lang='en'>\n        \u003Cbody>\n          {children}\n        \u003C\u002Fbody>\n      \u003C\u002Fhtml>\n    \u003C\u002FViewTransitions>\n  )\n}\n```\n\nThen, use the `\u003CLink>` component for links that need to trigger a view transition:\n\n```jsx\nimport { Link } from 'next-view-transitions'\n\nexport default function Component() {\n  return (\n    \u003Cdiv>\n      \u003CLink href='\u002Fabout'>Go to \u002Fabout\u003C\u002FLink>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\nOr use the `useTransitionRouter` hook for programmatic navigation:\n\n```jsx\nimport { useTransitionRouter } from 'next-view-transitions'\n\nexport default function Component() {\n  const router = useTransitionRouter()\n\n  return (\n    \u003Cdiv>\n      \u003Cbutton onClick={() => {\n        \u002F\u002F All Next.js router methods are supported\n        router.push('\u002Fabout')\n      }}>Go to \u002Fabout\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\nThat's it!\n\n## License\n\nMIT.\n","next-view-transitions 是一个用于在 Next.js App Router 中实现 CSS View Transitions API 的库。其核心功能是通过 `\u003CViewTransitions>` 组件和自定义的 `\u003CLink>` 组件或 `useTransitionRouter` 钩子，为页面间的切换提供流畅的视觉过渡效果。该库采用 TypeScript 编写，确保了代码的类型安全与可维护性。适用于需要提升用户体验、希望在页面导航时添加平滑过渡动画的 Next.js 项目中使用。",2,"2026-06-11 03:47:44","high_star"]