Créer une application pour la capitale avec Next.js et Netlify

Introduction
Aujourd'hui, nous allons apprendre à créer une application pour capitale à l'aide de Next.js et Netlify. Dans le monde numérique en évolution rapide d'aujourd'hui, la création d'applications Web interactives et dynamiques est cruciale pour impliquer les utilisateurs et leur offrir une expérience transparente. Next.js, un framework React populaire, permet aux développeurs de créer sans effort de puissantes applications de rendu côté serveur (SSR). Lorsqu'elle est combinée avec Netlify, une plate-forme de développement Web moderne, vous pouvez déployer vos applications en toute simplicité et profiter de ses fonctionnalités robustes telles que le déploiement continu, les fonctions sans serveur et le CDN mondial. Dans cet article, nous explorerons comment créer une application Capital City à l'aide de Next.js et la déployer sur Netlify.

Ce que nous utilisons

• Suivant.js
• Netlify
• TypeScript
• CSS Tailwind

Prérequis
Avant de commencer, assurez-vous d'avoir installé les éléments suivants :

• Node.js (v14 ou version ultérieure)
• npm ou fil
• Git

Mise en place du projet

Tout d'abord, créons un nouveau projet Next.js. Ouvrez votre terminal et exécutez la commande suivante :

npx create-next-app capitale-city-app

Accédez au répertoire du projet :

application cd capitale-ville

Création de l'application Capital City

1. Configuration de l'API Pour notre application Capital City, nous utiliserons une API gratuite qui fournit des données sur les pays et leurs capitales. L’une de ces API est l’API REST Countries. Créez un fichier nommé api.js dans le répertoire lib pour récupérer les données de l'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. Création des composants Créons un composant CountryCard pour afficher les détails de chaque pays. Créez un fichier nommé CountryCard.js dans le répertoire des composants :

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. Récupération et affichage de données Dans votre fichier pages/index.js, récupérez les données du pays et affichez-les à l'aide du composant 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;

Déploiement sur Netlify

1. Configuration du référentiel

Initialisez un dépôt git dans votre projet :
git init
git ajouter .
git commit -m "Commit initial"

2. Déploiement sur Netlify

1. Créez un nouveau site sur Netlify : allez sur Netlify et connectez-vous. Cliquez sur "Nouveau site depuis Git".
2. Connectez-vous à votre référentiel Git : choisissez votre fournisseur Git (GitHub, GitLab, Bitbucket) et sélectionnez votre référentiel.
3. Configurez vos paramètres de construction :

• Commande Build : prochaine build
• Annuaire de publication : .next

Déployer le site : cliquez sur "Déployer le site". Netlify créera et déploiera automatiquement votre site.

3. Configuration du déploiement continu

Chaque fois que vous apportez des modifications à votre référentiel, Netlify déclenchera automatiquement une nouvelle build et déploiera la version mise à jour de votre application.

Conclusion

Félicitations ! Vous avez créé et déployé avec succès une application Capital City à l'aide de Next.js et Netlify. Cette application récupère les données de l'API REST Countries et les affiche de manière conviviale. Grâce au rendu côté serveur de Next.js et aux puissantes fonctionnalités de déploiement de Netlify, vous pouvez créer et déployer efficacement des applications Web dynamiques.

Next.js et Netlify constituent une combinaison puissante pour le développement Web moderne, vous permettant de vous concentrer sur la création de fonctionnalités exceptionnelles tout en gérant les complexités du déploiement et de la mise à l'échelle pour vous. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!