Erstellen einer Hauptstadt-App mit Next.js und Netlify

Einführung
Heute lernen wir, wie man mit Next.js und Netlify eine Hauptstadt-App erstellt. In der heutigen schnelllebigen digitalen Welt ist die Erstellung interaktiver und dynamischer Webanwendungen von entscheidender Bedeutung, um Benutzer einzubeziehen und ihnen ein nahtloses Erlebnis zu bieten. Next.js, ein beliebtes React-Framework, ermöglicht Entwicklern die mühelose Erstellung leistungsstarker serverseitig gerenderter (SSR) Anwendungen. In Kombination mit Netlify, einer modernen Webentwicklungsplattform, können Sie Ihre Anwendungen problemlos bereitstellen und die robusten Funktionen wie kontinuierliche Bereitstellung, serverlose Funktionen und globales CDN nutzen. In diesem Artikel erfahren Sie, wie Sie mit Next.js eine Hauptstadt-App erstellen und auf Netlify bereitstellen.

Was wir verwenden

• Next.js
• Netlify
• TypeScript
• Tailwind CSS

Voraussetzungen
Bevor wir loslegen, stellen Sie sicher, dass Sie Folgendes installiert haben:

• Node.js (v14 oder höher)
• npm oder Garn
• Git

Projekt einrichten

Erstellen wir zunächst ein neues Next.js-Projekt. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

npx create-next-app Hauptstadt-Stadt-App

Navigieren Sie zum Projektverzeichnis:

cd Hauptstadt-Stadt-App

Erstellung der Hauptstadt-App

1. Einrichten der API Für unsere Hauptstadt-App verwenden wir eine kostenlose API, die Daten über Länder und ihre Hauptstädte bereitstellt. Eine dieser APIs ist die REST-Länder-API. Erstellen Sie eine Datei mit dem Namen api.js im lib-Verzeichnis, um Daten von der API abzurufen:

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. Erstellen der Komponenten Erstellen wir eine CountryCard-Komponente, um einzelne Länderdetails anzuzeigen. Erstellen Sie eine Datei mit dem Namen CountryCard.js im Komponentenverzeichnis:

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. Daten abrufen und anzeigen Rufen Sie in Ihrer Datei „pages/index.js“ die Länderdaten ab und zeigen Sie sie mithilfe der CountryCard-Komponente an:

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;

Bereitstellung auf Netlify

1. Einrichten des Repositorys

Initialisieren Sie ein Git-Repository in Ihrem Projekt:
git init
git add .
git commit -m „Erstes Commit“

2. Bereitstellung auf Netlify

1. Erstellen Sie eine neue Site auf Netlify: Gehen Sie zu Netlify und melden Sie sich an. Klicken Sie auf „Neue Site von Git“.
2. Verbinden Sie sich mit Ihrem Git-Repository: Wählen Sie Ihren Git-Anbieter (GitHub, GitLab, Bitbucket) und wählen Sie Ihr Repository aus.
3. Konfigurieren Sie Ihre Build-Einstellungen:

• Build-Befehl: nächster Build
• Veröffentlichungsverzeichnis: .next

Stellen Sie die Site bereit: Klicken Sie auf „Site bereitstellen“. Netlify erstellt und stellt Ihre Site automatisch bereit.

3. Kontinuierliche Bereitstellung einrichten

Immer wenn Sie Änderungen an Ihr Repository übertragen, löst Netlify automatisch einen neuen Build aus und stellt die aktualisierte Version Ihrer App bereit.

Fazit

Herzlichen Glückwunsch! Sie haben mit Next.js und Netlify erfolgreich eine Hauptstadt-App erstellt und bereitgestellt. Diese App ruft Daten von der REST-Länder-API ab und zeigt sie benutzerfreundlich an. Mit dem serverseitigen Rendering von Next.js und den leistungsstarken Bereitstellungsfunktionen von Netlify können Sie dynamische Webanwendungen effizient erstellen und bereitstellen.

Next.js und Netlify bilden eine leistungsstarke Kombination für die moderne Webentwicklung, die es Ihnen ermöglicht, sich auf die Entwicklung großartiger Funktionen zu konzentrieren und gleichzeitig die Komplexität der Bereitstellung und Skalierung für Sie zu bewältigen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonErstellen einer Hauptstadt-App mit Next.js und Netlify. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!