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

使用しているもの

• Next.js
• Netlify
• タイプスクリプト
• テイルウィンド CSS

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

• Node.js (v14 以降)
• npm または Yarn
• ギット

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

まず、新しい 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 (
    

      
{country.name.common}
      
Capital: {country.capital}
      
Region: {country.region}
      
  );
}

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 (
    

      
Capital City App
      

        {countries.map((country) => (
          
        ))}
      
      
  );
};

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 開発のための強力な組み合わせを実現し、デプロイメントとスケーリングの複雑さを処理しながら、優れた機能の構築に集中できるようにします。コーディングを楽しんでください!