Consumindo API do github usando o Axios e Nextjs - Parte 1

Olá, seja muito bem vindo(a), no artigo de hoje nós vamos consumir, de forma simples, a API do Github, com elas iremos construir um card com informações pegas do nosso perfil.

Primeiro vamos criar uma pasta no nosso computador e iniciar nosso projeto com o seguinte comando no terminal:

yarn init -y

Com isso teremos nosso package.json criado automaticamente, depois vamos colocar o seguinte comando no terminal: 

yarn add next react react-dom

Após a instalação das dependências com o comando acima, precisamos de um .gitgnore, podemos construir um automático com npx gitignore node. Por fim, antes de iniciar o desenvolvimento, vamos instalar o Axios no projeto com o comando yarn add axios.

Agora vamos lá, primeiro vamos criar uma pasta chamada “pages” e adicionar um arquivo index.js dentro dele. Agora precisamos testar se o nosso projeto está funcionando com um famoso “Hello World”, para isso colocamos o código a seguir no index.js e abrimos uma janela localhost para visualizar a frase.

export default function Home () {
 return (
<h1>Hello World</h1>
 )
}

Com isso temos nosso arquivo principal, o index, funcionando. No código acima o que fizemos foi criar uma função que retorna uma tag h1 com nossa frase, sendo que colocamos uma exportação padrão (export default) para que a função seja importada por padrão quando nosso index.js for “lido”.

Vamos criar uma pasta chamada src, dentro dela adicionar uma pasta chamada services e por fim um arquivo chamado api-github.js dentro desta pasta. Neste arquivo vamos importar o Axios e criar uma constante para colocar o url base da api dentro dele.

import axios from "axios";

const apiGithub = axios.create({
 baseURL: "https://api.github.com",
});

export default apiGithub;

O que precisamos agora é inicialmente criar nosso card, para isso vou usar o código do nosso artigo tutorial anterior: https://francileudo-frontend.blogspot.com/2022/10/construindo-uma-borda-gradiente-em-um.html. Primeiro colocaremos o código html do card dentro da tag <></> no return do index.js, dessa forma:

export default function Home () {
 return (
<>
 <div className="card-after">
  <div className="card">

  </div>
 </div>
</>
 )
}

Agora, antes de codificar o conteúdo dentro do card, vamos pegar o css do card e adicionar abaixo da div externa dentro da tag <style jsx></style>, podemos usar essa tag no Nextjs para colocar css dentro do javascript, não surte pq tudo está em um arquivo só (html, css e javascript), rsrs.

export default function Home () {
 return (
<>
 <div className="card-after">
  <div className="card">

  </div>
 </div>

 <style jsx>{`
  * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
  }
  .card-after {
   background: linear-gradient(to left, #2bf791 0%, #53b0ea 100%);
   width: 190px;
   height: 254px;
   padding: 5px;
   border-radius: 1rem;
  }
  .card {
   background: #000;
   width: 180px;
   height: 244px;
   padding: 10px;
   border-radius: 1rem;
  }
 `}</style>
</>
 )
}

Como o artigo está ficando longo, irei parar por aqui e realizar o consumo no próximo artigo, como atividade deixo para você a construção de um html e css para receber os dados da api do github, que serão: a imagem de perfil, nome, nickname e bio. Deixo um abraço e até o próximo artigo.

Artigo Original: https://francileudo-frontend.blogspot.com/2022/11/consumindo-api-do-github-usando-o-axios.html