-
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 imagem que fica
do lado do nosso texto, na aba.
-
Então, quando não tem essa imagem,
é um pouco estranho,
-
passa alguma desconfiança
de que aquele site
-
talvez não esteja atualizado
-
ou não tenha manutenção
muito constante.
-
E o navegador também utiliza isso
para o próprio nome dele,
-
"Favicon",
são ícones de favoritos.
-
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.
-
Vamos dar uma olhadinha
sobre como o Next entende isso
-
e como a gente consegue inserir
essa imagem dentro do nosso site.
-
Então, aqui já no nosso site,
ele rodando o nosso "localhost",
-
a gente vê o mesmo logo
que a gente está usando aqui,
-
ali, do lado da nossa aba,
o nosso "Favicon" rodando.
-
Como a gente faz isso?
-
No Next, 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 na pasta "public"
e ele já reconhece.
-
Agora, e se não temos
um arquivo ".ico"?
-
Vai ser o nosso caso
já que usamos o "png",
-
precisamos adicionar uma pequena
configuração no metadata,
-
que vou mostrar
para vocês agora.
-
Aqui no nosso projeto,
a gente já tem na pasta "public"
-
o nosso "favicon.png",
-
e aí, a gente pode vir na nossa
pasta "app", "site", "layout",
-
e adicionar essa propriedade aqui
que vai dentro do nosso metadado.
-
Então, coloquei uma vírgula,
porque é um outro objeto, "icons".
-
E, aqui, eu coloco o caminho
para esse "Favicon".
-
É bem simples.
-
Adicionando isso,
ele entende que queremos
-
usar o "Favicon" no formato png,
-
e não precisa colocar o caminho
que está porque 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, no nosso site de fato.
-
Venho aqui no terminal,
derrubo-o e, mais uma vez,
-
vamos lá:
"npx vercel deploy --prod"
-
Vai iniciar nosso
processo de deploy.
-
Já temos o link para inspecionar
o 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 "Prisma" com sucesso,
-
instalou a "daisyUI", 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 postagens, estão prontinhas.
-
Se a gente pedir,
ele entrega rapidamente.
-
E deploy completo.
-
Se eu voltar lá em "visitar",
ele autentica 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,
já entrega de novo porque carregou.
-
Na hora que subiu o site,
já está tudo prontinho.
-
O navegador pediu,
ele já devolve prontinho.
-
Dessa forma, já temos listagem
e detalhes de posts funcionando.
-
Então, você pode, em casa,
criar mais posts, testar 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.
