Membina Apl Ibu Kota Dengan Next.js dan Netlify

Pengenalan
Hari ini kita akan belajar cara membina apl ibu kota menggunakan Next.js dan Netlify. Dalam dunia digital yang serba pantas hari ini, mencipta aplikasi web yang interaktif dan dinamik adalah penting untuk menarik minat pengguna dan memberikan mereka pengalaman yang lancar. Next.js, rangka kerja React yang popular, membolehkan pembangun membina aplikasi yang diberikan bahagian pelayan (SSR) yang berkuasa dengan mudah. Apabila digabungkan dengan Netlify, platform pembangunan web moden, anda boleh menggunakan aplikasi anda dengan mudah dan memanfaatkan ciri teguhnya seperti penggunaan berterusan, fungsi tanpa pelayan dan CDN global. Dalam artikel ini, kami akan meneroka cara membina Apl Ibu Kota menggunakan Next.js dan menggunakan aplikasi itu di Netlify.

Apa yang kami gunakan

• Next.js
• Netlify
• Skrip Jenis
• CSS Tailwind

Prasyarat
Sebelum kami menyelam, pastikan anda telah memasang yang berikut:

• Node.js (v14 atau lebih baru)
• npm atau benang
• Git

Menyediakan Projek

Mula-mula, mari buat projek Next.js baharu. Buka terminal anda dan jalankan arahan berikut:

npx create-next-app capital-city-app

Navigasi ke direktori projek:

cd ibukota-aplikasi-bandar

Mewujudkan Apl Ibu Kota

1. Menyediakan API Untuk Apl Ibu Kota kami, kami akan menggunakan API percuma yang menyediakan data tentang negara dan ibu kota mereka. Satu API tersebut ialah REST Countries API. Buat fail bernama api.js dalam direktori lib untuk mengambil data daripada API:

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. Mencipta Komponen Mari cipta komponen CountryCard untuk memaparkan butiran negara individu. Buat fail bernama CountryCard.js dalam direktori komponen:

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. Mengambil dan Memaparkan Data Dalam fail pages/index.js anda, ambil data negara dan paparkannya menggunakan komponen 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;

Menggunakan pada Netlify

1. Menyediakan Repositori

Mulakan repositori git dalam projek anda:
git init
git add .
git commit -m "Komit awal"

2. Menggunakan Netlify

1. Buat Tapak Baharu di Netlify: Pergi ke Netlify dan log masuk. Klik pada "Tapak baharu daripada Git".
2. Sambung ke Repositori Git Anda: Pilih penyedia Git anda (GitHub, GitLab, Bitbucket) dan pilih repositori anda.
3. Konfigurasikan Tetapan Binaan Anda:

• Perintah Binaan: binaan seterusnya
• Terbitkan Direktori: .seterusnya

Sebarkan Tapak: Klik "Serah Tapak". Netlify akan membina dan menggunakan tapak anda secara automatik.

3. Menyediakan Penggunaan Berterusan

Setiap kali anda menolak perubahan pada repositori anda, Netlify akan mencetuskan binaan baharu secara automatik dan menggunakan versi apl anda yang dikemas kini.

Kesimpulan

Tahniah! Anda telah berjaya membina dan menggunakan Apl Ibu Kota menggunakan Next.js dan Netlify. Apl ini mengambil data daripada REST Countries API dan memaparkannya dalam cara yang mesra pengguna. Dengan pemaparan sebelah pelayan Next.js dan ciri penggunaan Netlify yang berkuasa, anda boleh mencipta dan menggunakan aplikasi web dinamik dengan cekap.

Next.js dan Netlify membuat gabungan hebat untuk pembangunan web moden, membolehkan anda menumpukan pada membina ciri yang hebat sambil mengendalikan kerumitan penggunaan dan penskalaan untuk anda. Selamat mengekod!

Atas ialah kandungan terperinci Membina Apl Ibu Kota Dengan Next.js dan Netlify. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!