SSGOI
GitHubリポジトリ

クイックスタート

5分でSSGOIを使った初めてのページ遷移アニメーションを作成

パッケージのインストール

npm install @ssgoi/react 
# or yarn add @ssgoi/react 
# or pnpm add @ssgoi/react

基本セットアップ（2分）

1. ルートレイアウトの設定 (Next.js App Router)

// app/layout.tsx
import { Ssgoi } from "@ssgoi/react";
import { fade } from "@ssgoi/react/view-transitions";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <Ssgoi config={{ defaultTransition: fade() }}>
          {/* ⚠️ 重要: position: relativeが必要です！ */}
          <div style={{ position: "relative", minHeight: "100vh" }}>
            {children}
          </div>
        </Ssgoi>
      </body>
    </html>
  );
}

なぜposition: relativeが必要なのか？ ページがアニメーションで出ていくとき、position: absoluteが適用されます。親要素にposition: relativeがないと、ページが間違った位置に移動する可能性があります。

2. ページのラップ

// app/page.tsx
import { SsgoiTransition } from "@ssgoi/react";

export default function HomePage() {
  return (
    <SsgoiTransition id="/">
      <main>
        <h1>ホームページ</h1>
        {/* ページコンテンツ */}
      </main>
    </SsgoiTransition>
  );
}

// app/about/page.tsx
export default function AboutPage() {
  return (
    <SsgoiTransition id="/about">
      <main>
        <h1>紹介ページ</h1>
        {/* ページコンテンツ */}
      </main>
    </SsgoiTransition>
  );
}

様々なトランジションの適用

// app/layout.tsx
import { slide, fade, scale } from "@ssgoi/react/view-transitions";

const ssgoiConfig = {
  transitions: [
    // ホーム → 紹介: 左にスライド
    { from: "/", to: "/about", transition: slide({ direction: "left" }) },
    // 紹介 → ホーム: 右にスライド
    { from: "/about", to: "/", transition: slide({ direction: "right" }) },
    // リスト → 詳細: スケール
    { from: "/list", to: "/detail/*", transition: scale() },
  ],
};

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Ssgoi config={ssgoiConfig}>
          <div style={{ position: "relative", minHeight: "100vh" }}>
            {children}
          </div>
        </Ssgoi>
      </body>
    </html>
  );
}

完成！ 🎉

おめでとうございます！あなたのウェブサイトにネイティブアプリのようなページ遷移が適用されました。