Next.js と Netlify を使用して首都アプリを構築する

はじめに
今日は、Next.js と Netlify を使用して首都アプリを構築する方法を学びます。今日のペースの速いデジタル世界では、ユーザーを魅了し、シームレスなエクスペリエンスを提供するために、インタラクティブで動的な Web アプリケーションを作成することが重要です。 Next.js は人気のある React フレームワークであり、開発者は強力なサーバーサイド レンダリング (SSR) アプリケーションを簡単に構築できます。最新の Web 開発プラットフォームである Netlify と組み合わせると、アプリケーションを簡単にデプロイし、継続的デプロイ、サーバーレス機能、グローバル CDN などの堅牢な機能を活用できます。この記事では、Next.js を使用して Capital City アプリを構築し、Netlify にデプロイする方法を説明します。

使用しているもの

• Next.js
• Netlify
• TypeScript
• Tailwind CSS

前提条件
本題に入る前に、以下がインストールされていることを確認してください:

• Node.js (v14 以降)
• npm または Yarn
• Git

プロジェクトのセットアップ

まず、新しい Next.js プロジェクトを作成しましょう。ターミナルを開いて次のコマンドを実行します:

npx create-next-app Capital-city-app

プロジェクト ディレクトリに移動します:

cd 首都-アプリ

首都アプリの作成

1. API のセットアップ 首都アプリでは、国とその首都に関するデータを提供する無料の API を使用します。そのような API の 1 つが REST Countries API です。 API からデータをフェッチするために、lib ディレクトリに api.js という名前のファイルを作成します。

export async function getCountries() {
    const res = await fetch('https://restcountries.com/v3.1/all');
    if (!res.ok) {
      throw new Error('Failed to fetch data')
    }
    const data = await res.json();
    return data;
  }

1. コンポーネントの作成 CountryCard コンポーネントを作成して、個々の国の詳細を表示しましょう。コンポーネント ディレクトリに CountryCard.js という名前のファイルを作成します。

import React from 'react';

const CountryCard = ({ country }) => {
  return (
    <div className="card">
      <h2>{country.name.common}</h2>
      <p>Capital: {country.capital}</p>
      <p>Region: {country.region}</p>
      <img src={country.flags.svg} alt={`${country.name.common} flag`} width="100" />
    </div>
  );
}

export default CountryCard;

1. データの取得と表示 Pages/index.js ファイルで、国データを取得し、 CountryCard コンポーネントを使用して表示します。

import { getCountries } from '../app/lib/api';
import CountryCard from '../components/CountryCard';

export async function getStaticProps() {
  const countries = await getCountries();
  return {
    props: {
    countries,
    },
  };
}

const Home = ({ countries }) => {
  return (
    <div>
      <h1>Capital City App</h1>
      <div className="grid">
        {countries.map((country) => (
          <CountryCard key={country.cca3} country={country} />
        ))}
      </div>
      <style jsx>{`
        .grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 20px;
        }
        .card {
          border: 1px solid #ccc;
          padding: 20px;
          border-radius: 10px;
          text-align: center;
        }
      `}</style>
    </div>
  );
};

export default Home;

Netlify へのデプロイ

1.リポジトリのセットアップ

プロジェクトで git リポジトリを初期化します:
git init
git add .
git commit -m "初期コミット"

2. Netlify へのデプロイ

1. Netlify で新しいサイトを作成する: Netlify に移動してログインします。「Git から新しいサイト」をクリックします。
2. Git リポジトリに接続する: Git プロバイダー (GitHub、GitLab、Bitbucket) を選択し、リポジトリを選択します。
3. ビルド設定を構成します:

• ビルド コマンド: 次のビルド
• 公開ディレクトリ: .next

サイトを展開する: [サイトを展開する] をクリックします。 Netlify はサイトを自動的に構築して展開します。

3.継続的デプロイメントのセットアップ

リポジトリに変更をプッシュすると、Netlify は自動的に新しいビルドをトリガーし、アプリの更新バージョンをデプロイします。

結論

おめでとうございます! Next.js と Netlify を使用して Capital City アプリを正常に構築し、デプロイしました。このアプリは、REST Countries API からデータを取得し、ユーザーフレンドリーな方法で表示します。 Next.js のサーバー側レンダリングと Netlify の強力なデプロイメント機能を使用すると、動的 Web アプリケーションを効率的に作成してデプロイできます。

Next.js と Netlify は、最新の Web 開発のための強力な組み合わせを実現し、デプロイメントとスケーリングの複雑さを処理しながら、優れた機能の構築に集中できるようにします。コーディングを楽しんでください!

以上がNext.js と Netlify を使用して首都アプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。