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
• Manuscrit
• Tailwind CSS

Conditions préalables
Avant de commencer, assurez-vous d'avoir installé les éléments suivants :

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

Configuration 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 :

cd capitale-application-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 (
    

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

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 (
    

      
Capital City App
      

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

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 : accédez à 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 de construction : prochaine construction
• Répertoire 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 version et déploiera la version mise à jour de votre application.

Conclusion

Toutes nos 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 !