【ハッカソン開発記#8】Next.js (App Router) でグラスモーフィズムUIとLottieアニメーションを実装するまでの軌跡

Next.js (App Router) でグラスモーフィズムUIとLottieアニメーションを実装するまでの軌跡

Next.js (App Router) と Tailwind CSS を用いて、ライブ情報管理アプリ（LIVE NAVI）のフロントエンドを開発していく中で、UIのブラッシュアップやNext.js特有のエラー、Lottieアニメーションの導入でつまずいたポイントと解決策をまとめた。

1. グラスモーフィズム (Glassmorphism) UIの実装

アプリ全体に「すりガラス調」UIを適用しました。Tailwind CSSを使えば、数行のクラス名を追加するだけで実装可能。

基本のクラス構成

背景色を抜き、白の半透明とブラー（ぼかし）を組み合わせる。

<div className="bg-white/10 backdrop-blur-md border border-white/20 shadow-lg rounded-2xl">
  {/* コンテンツ */}
</div>

リンクカードに背景画像とホバーエフェクトを追加

トップページのカード要素には、public フォルダに置いた画像を背景として設定し、ホバー時にアイコンが少し拡大するエフェクトを追加した。

<Link href="/register?type=venue" className="group block overflow-hidden rounded-2xl border border-white/20 bg-transparent p-6 backdrop-blur-sm transition-colors duration-300 hover:bg-white/10">
  <div 
    className="relative mb-5 h-32 w-full overflow-hidden rounded-xl bg-cover bg-center transition-all duration-500 group-hover:shadow-lg"
    style={{ backgroundImage: "url('/venue-image.jpg')" }} 
  >
    {/* 画像を少し暗くして馴染ませるオーバーレイ */}
    <div className="absolute inset-0 bg-black/40 transition-colors duration-300 group-hover:bg-black/20" />
    
    <div className="relative flex h-full items-center justify-center transition-transform duration-500 group-hover:scale-110">
      <span className="text-4xl drop-shadow-md">🏟️</span>
    </div>
  </div>
</Link>

3. Lottieを使ったローディング画面 (loading.tsx)

Next.jsの機能である loading.tsx を使って、画面遷移中に自動で表示されるローディングアニメーションを実装した。

Lottieの導入手順

1. パッケージのインストール: npm install lottie-react
2. IconScout等のサイトから .json アニメーションをダウンロード
3. components フォルダにJSONを配置

loading.tsx の実装

app/loading.tsx を作成し、Lottieコンポーネントを配置する。

import Lottie from "lottie-react";
// ※同じフォルダに配置している場合のパス
import loadingData from "./opener-loading.json"; 

export default function Loading() {
  return (
    <div className="flex flex-1 flex-col items-center justify-center min-h-[60vh] gap-6">
      <div className="w-32 h-32 md:w-48 md:h-48 opacity-90">
        <Lottie animationData={loadingData} loop={true} autoplay={true} />
      </div>
      <p className="text-white/80 font-medium tracking-widest animate-pulse">
        Now Loading...
      </p>
    </div>
  );
}

ローディング画面のテスト表示テクニック

開発環境（npm run dev）の初回ロード時はコンパイルが走るため、loading.tsx は表示されない。意図的に動作確認をしたい場合は、ページコンポーネント内に意図的な遅延（Promise）を仕込むと便利（AIがいうには）。

// app/page.tsx (テスト時のみ追加)
export default async function Home() {
  // 意図的に3秒待機させて loading.tsx を表示させる
  await new Promise((resolve) => setTimeout(resolve, 3000));
  
  return (
    <main>...</main>
  );
}