Next.jsを使用したチケット売買アプリ

目次

1. Next.jsを使用したチケット売買アプリ
2. アプリの概要
3. 起動方法
4. コードの説明

1. Next.jsを使用したチケット売買アプリ

Next.jsを使用して、チケットが売買できるサイトを作成します。
他の売買サイトに比べて表示速度とUI/UXを向上させることがゴールです。

技術スタック

Nodejs v18.3.0
Next.js 13.5.2
Tailwind CSS
Vercel

---

2. アプリの概要

vercelでデプロイ済みなので、下記よりご確認ください。

https://transaction-ticket-app.vercel.app/

2.1 チケットの一覧ページ

チケットの一覧ページ

チケットの一覧ページを表示します。

ここは無限スクロールを実装したいです。

また初期ロード時に、ページがレンダリングされるまで今流行りのSkeletonを導入し、UXを向上させた。

---

2.2 チケットの詳細ページ

チケットの詳細ページ

各チケットの詳細ページはSSGで構築します。

SSGとはStatic Site Generateの略で、あらかじめ静的なページを構築しDBとの通信をなくしレンダリングを早くすることです。

---

2.3 チケット購入ページ

チケット購入ページ

チケットの購入も種類があります。(先行、抽選）

ですのでSSGで静的サイトをあらかじめ構築しておきます

---

3. 起動方法

アプリをクローン

git clone

node_modulesのインストール

yarn install

アプリの起動

yarn dev

---

4. コードの説明

Next.jsのコードを説明していく。

4.1 UX向上のためにスケルトンの導入

スケルトンは様々なシーンで見ることが多くなってきました。
YouTube, X(旧Twitter), Indeedなど大手どころのアプリは全て導入しています。

導入

yarn add react-loading-skeleton

使い方

通常のローディングに比べて、待機時間が短く感じる。
今回はTicketCardコンポーネントで使用している

{props.isLoading ? <Skeleton height={50} width={370} /> : <h2 className={"text-[18px] font-bold"}>{props.title}</h2>}

サンプル
./app/page.tsx

'use client'
import {useEffect, useState} from 'react'
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css';


export default function Home() {

  const [loading, setLoading] = useState(true);
  useEffect(() => {
    // loading開始
    setLoading(true)
    setTickets(ticketInfoMocs)

    const method = async () => {
      // APIでチケットのデータを取得する。
      setTimeout(() => { // ダミーなAPI
        console.log("API 実行")

        // loading終了
        setLoading(false)

      }, 1500 ) // APIで
    }
    // 非同期関数methodを呼び出す。
    method();
  }, []); // currentCtx.currentStepの変更を監視

  if(loading){
    return (
        <Skeleton height={50} width={370} />
    )
  }
  
  return (
        <h2 className={"text-[18px] font-bold"}>{スケルトン}</h2>
  )
}

---