-
A credibilidade do nosso site é outra parte muito importante quando a
-
gente fala de otimização para motores de busca.
-
E uma dessas partes é o favicon, que é aquela imagenzinha que fica
-
ali do lado do nosso texto, na aba ali.
-
Então, quando a gente não tem essa imagem, é um pouco estranho, já
-
passa alguma desconfiança de que aquele site talvez não esteja
-
atualizado, ou não tenha uma atenção muito constante.
-
E o navegador também utiliza isso para quando o próprio nome dele, de
-
favicon, são ícones de favorito.
-
Então, ele aparece na listagem de favoritos, ou quando o navegador
-
agrupa, ele usa para identificar.
-
Então, aquilo gera um reconhecimento de marca para o nosso site.
-
Então, vamos dar uma olhadinha sobre como o Next entende isso, e como
-
que a gente consegue inserir essa imagem dentro do nosso site.
-
Então, aqui já no nosso site, ele rodando o nosso local host, a gente
-
vê o mesmo logo que a gente está usando aqui, ali, do lado da
-
nossa aba, o nosso favicon rodando.
-
Como que a gente faz isso?
-
No Next, ele tem uma forma de trabalhar bem simples com favicon, que
-
a gente colocando o arquivo .ico, que é a extensão padrão de favicon,
-
jogamos a pasta public, ele já reconhece.
-
Agora, e se a gente não tem um arquivo .ico, que vai ser o
-
nosso caso, a gente está usando o png, a gente precisa adicionar uma
-
pequena configuração no metadata, que eu vou mostrar para vocês
-
agora.
-
Então, aqui no nosso projeto, a gente já tem na pasta public o nosso
-
favicon.png, e aí, a gente pode vir aqui no nosso pastinha app, site,
-
layout, e adicionar essa propriedade aqui, ele vai dentro do nosso
-
metadado, então eu coloquei uma vírgula, que ele é um outro objeto
-
icons, e aqui eu coloco o caminho para esse favicon.
-
É bem simples, então adicionando isso, ele já entende que a gente
-
quer usar aquele favicon no formato png, e não precisa colocar o
-
caminho que ele está, porque ele está na public, então é na pasta
-
raiz do projeto.
-
Dessa forma, ele já entra lá.
-
Então agora, vamos fazer o build para a gente ver se também está
-
funcionando na nossa hospedagem, nosso site rodando de fato.
-
Então, eu vim aqui no terminal, derrubar o terminal, e mais uma vez,
-
vamos lá, npx vercel deploy, tracinho, tracinho, prod, ele vai
-
iniciar nosso processo de deploy, já temos o link para inspecionar
-
aqui nosso processo, podemos sempre acompanhá-lo pelo build logs,
-
para ver se dá tudo certinho, ver todas as etapas do build, gerou
-
nosso banco de dados, conectou com o Prisma com sucesso, instalou a
-
DayZ UI, está começando a gerar nossas páginas estáticas, aqui a
-
gente também consegue ver aquela questão das nossas páginas
-
estáticas, por padrão, e geradas dinamicamente, de forma estática,
-
então ele já subiu todas as nossas postagens, estão prontinhas, se a
-
gente pedir, ele entrega rapidamente, e deploy completo, se eu voltar
-
lá, visita, ele autentica a gente na Vercel, abriu, Favecon
-
funcionando, clicou em posts, olha a rapidez, porque já está tudo
-
pronto, então é tudo muito rápido aqui, se eu clicar em qualquer
-
post, ele já entrega de novo, porque carregou, na hora que ele subiu
-
o site, já está tudo prontinho, o navegador pediu, ele já devolve,
-
prontinho.
-
Então, dessa forma, já temos listagem de posts e detalhes de posts,
-
tudo funcionando, então você pode, em casa, criar mais posts, testar
-
um pouquinho mais, colocar outros posts com outros conteúdos, testar
-
validações, para garantir que tanto a listagem, quanto os detalhes do
-
post, estejam funcionando do jeito que a gente espera.
