next.jsとnetlifyでテニストリビアアプリを構築します-CSSチュートリアル-php.cn

next.jsとnetlifyでテニストリビアアプリを構築します

Joseph Gordon-Levitt

リリース： 2025-03-19 09:14:14

オリジナル

983 人が閲覧しました

next.jsとnetlifyでテニストリビアアプリを構築します

このチュートリアルでは、next.jsとnetlifyを使用して、迅速な開発とシームレスな展開のための強力な組み合わせを使用して、楽しいテニストリビアアプリを構築することを示しています。飛び込みましょう！

技術スタック

レバレッジ：

Next.js： Webアプリケーションを構築するためのReactフレームワーク。サーバー側のレンダリングや組み込みのルーティングの合理化のような機能。
Netlify： Webアプリケーションを簡単に展開するためのプラットフォーム。サーバーレス機能と単純な展開プロセスが重要な利点です。
タイプスクリプト：静的タイピングをJavaScriptに追加し、コードの保守性を向上させ、エラーを削減します。
Tailwind CSS：迅速なUI開発のためのユーティリティファーストCSSフレームワーク。

なぜnext.jsとnetlify？

シンプルなTriviaアプリはReactフレームワークを必要としないように見えるかもしれませんが、Next.JSは重要な利点を提供します：事前に構成されたWebパック、サーバー側のデータフェッチのgetServerSideProps 、およびNetlifyのサーバーレス関数とのシームレスな統合。 Netlifyは展開プロセスを簡素化し、GITリポジトリからnext.jsアプリケーションを非常に簡単に展開できます。

アプリの概要

Triviaゲームはテニスプレーヤーの名前を提示し、あなたは彼らの出身国を推測します。ゲームは5ラウンドで構成され、スコアを追跡します。 Live APIの代わりに、RapidAPIからソースしたプレーヤーデータを含むローカルJSONファイル（スターターリポジトリに含まれています）を使用します。

展開されたバージョンはNetlifyで利用できます（ここに追加するリンク）。

スターターレポ

フォローするには、リポジトリをクローンしてstartブランチに切り替えます。

 git clone [電子メール保護]：brenelz/tennis-trivia.git
CDテニストライビア
Git Checkout Start

ログイン後にコピー

スターターリポジトリには、TypeScriptとTailwind CSSで構成されたBasic Next.jsアプリが含まれています。

はじめる

環境変数： .env.sampleファイルを.env.localにコピーし、 API_URLをNEXT_PUBLIC_の接頭辞にfrontendアクセスにコピーします。
```
 cp .env.sample .env.local
```
ログイン後にコピー
依存関係をインストールし、DEVサーバーを開始します。
```
 NPMインストール
npm run dev
```
ログイン後にコピー
http://localhost:3000でアプリにアクセスします。

UI開発

pages/index.tsxで、次のマークアップ（Tailwind CSSクラスを使用）でHome()機能を強化します。

 // ...（インポートステートメント）...

デフォルト機能Home（）をエクスポートする{
  // ...（状態変数と関数）...

  戻る （
    <div classname="bg-blue-500">
      <div classname="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
        {/ * ...（見出しと指示）... */}
        <h2 classname="text-lg font-extrabold text-white my-5">
          {player.full_name}
        </h2>
        {/ * ...（入力フィールドと送信ボタン）... */}
        <p classname="mt-4 text-lg leading-6 text-white">
          <strong>現在のスコア：</strong> {スコア}
        </p>
      </div>
    </div>
  ）;
}

ログイン後にコピー

これにより、基本構造が提供されます。対話性や国家管理を含む完全なコードは、後続のセクションで詳しく説明されます。

データ管理

data/tennisPlayers.jsonファイルは、プレーヤーのデータを保持します。 lib/players.tsファイルを作成して、データにアクセスして処理するためのプレーヤーと関数の型に定義してください。

 // ...（プレーヤータイプ定義）...

const const playerData：player [] = require（ "../ data/tennisplayers.json"）;
const const top100players = playerdata.slice（0、100）;
const uniquecountrys = [... new set（playerdata.map（（p）=> p.country）]]]。

ログイン後にコピー

これにより、タイプの安全性が設定され、プレーヤーとユニークな国を検索する機能が提供されます。

（動的なUIの更新、インタラクティブ性、NetLifyへの展開、および結論を詳述する残りのセクションは、簡潔な説明とコードスニペットの同様のパターンに従い、元の記事の全体的な流れと構造を維持します。）

以上がnext.jsとnetlifyでテニストリビアアプリを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。