Introdução
Hoje aprenderemos como construir um aplicativo para uma capital usando Next.js e Netlify. No mundo digital acelerado de hoje, a criação de aplicações web interativas e dinâmicas é crucial para envolver os usuários e proporcionar-lhes uma experiência perfeita. Next.js, uma estrutura React popular, permite que os desenvolvedores criem aplicativos poderosos renderizados no lado do servidor (SSR) sem esforço. Quando combinado com o Netlify, uma plataforma moderna de desenvolvimento web, você pode implantar seus aplicativos com facilidade e aproveitar seus recursos robustos, como implantação contínua, funções sem servidor e CDN global. Neste artigo, exploraremos como construir um aplicativo Capital City usando Next.js e implantá-lo no Netlify.

O que estamos usando

• Próximo.js
• Netlificar
• Datilografado
• CSS do Tailwind

Pré-requisitos
Antes de começarmos, certifique-se de ter o seguinte instalado:

• Node.js (v14 ou posterior)
• npm ou fio
• Git

Configurando o projeto

Primeiro, vamos criar um novo projeto Next.js. Abra seu terminal e execute o seguinte comando:

npx create-next-app capital-city-app

Navegue até o diretório do projeto:

cd aplicativo da capital

Criando o aplicativo Capital City

1. Configurando a API Para nosso aplicativo Capital City, usaremos uma API gratuita que fornece dados sobre países e suas capitais. Uma dessas APIs é a API REST Países. Crie um arquivo chamado api.js no diretório lib para buscar dados da 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. Criando os Componentes Vamos criar um componente CountryCard para exibir detalhes individuais de cada país. Crie um arquivo chamado CountryCard.js no diretório de componentes:

import React from 'react';

const CountryCard = ({ country }) => {
  return (
    

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

export default CountryCard;

1. Busca e exibição de dados Em seu arquivo pages/index.js, busque os dados do país e exiba-os usando o componente 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;

Implantando no Netlify

1. Configurando o Repositório

Inicialize um repositório git em seu projeto:
git inicialização
git adicionar.
git commit -m "Commit inicial"

2. Implantando no Netlify

1. Crie um novo site no Netlify: Vá para Netlify e faça login. Clique em "Novo site do Git".
2. Conecte-se ao seu repositório Git: Escolha seu provedor Git (GitHub, GitLab, Bitbucket) e selecione seu repositório.
3. Defina suas configurações de compilação:

• Comando de compilação: próxima compilação
• Diretório de publicação: .next

Implantar o site: clique em "Implantar site". O Netlify criará e implantará seu site automaticamente.

3. Configurando implantação contínua

Sempre que você enviar alterações para seu repositório, o Netlify acionará automaticamente uma nova compilação e implantará a versão atualizada do seu aplicativo.

Conclusão

Parabéns! Você construiu e implantou com sucesso um aplicativo Capital City usando Next.js e Netlify. Este aplicativo busca dados da API REST Countries e os exibe de maneira amigável. Com a renderização do lado do servidor do Next.js e os poderosos recursos de implantação do Netlify, você pode criar e implantar aplicativos da web dinâmicos com eficiência.

Next.js e Netlify formam uma combinação poderosa para o desenvolvimento web moderno, permitindo que você se concentre na construção de ótimos recursos enquanto lida com as complexidades de implantação e escalonamento para você. Boa codificação!