下一個視圖轉換

下一個視圖轉換

在 Next.js App Router 中使用視圖轉換 API。

演示。

免責聲明

該函式庫針對視圖轉換和 Next.js App Router 的基本用例。對於更複雜的應用程式和用例，如並發渲染、Suspense 和串流媒體，未來仍需要將新的原語和 API 開發為 React 和 Next.js 的核心（更多內容）。

安裝

使用您最喜歡的套件管理器來安裝next-view-transitions套件。例如：

pnpm install next-view-transitions

用法

使用版面配置檔案中的元件包覆您的內容：

 import { ViewTransitions } from 'next-view-transitions'

export default function Layout ( { children } ) {
  return (
    < ViewTransitions >
      < html lang = 'en' >
        < body >
          { children }
        < / body >
      < / html >
    < / ViewTransitions >
  )
}

然後，對需要觸發視圖轉換的連結使用元件：

 import { Link } from 'next-view-transitions'

export default function Component ( ) {
  return (
    < div >
      < Link href = '/about' > Go to /about < / Link >
    < / div >
  )
}

或使用useTransitionRouter鉤子進行程式導航：

 import { useTransitionRouter } from 'next-view-transitions'

export default function Component ( ) {
  const router = useTransitionRouter ( )

  return (
    < div >
      < button onClick = { ( ) => {
        // All Next.js router methods are supported
        router . push ( '/about' )
      } } > Go to /about < / button >
    < / div >
  )
}

就是這樣！

執照

麻省理工學院。