Parece que o vídeo da aula cortou a criação do data-layer.js e a criação do fetch de categories, o que atrapalhou o entendimento da aula. Seria interessante abordá-lo, mesmo que o código esteja disponível no GitHub.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Parece que o vídeo da aula cortou a criação do data-layer.js e a criação do fetch de categories, o que atrapalhou o entendimento da aula. Seria interessante abordá-lo, mesmo que o código esteja disponível no GitHub.
Olá, Estudante. Como vai?
Compreendo perfeitamente a sua insatisfação e você tem toda razão em pontuar isso. Quando estamos acompanhando um curso de arquitetura avançada como o Next.js, cada linha de código e cada tomada de decisão contam muito para o entendimento da engrenagem completa. Ficar sem ver o momento exato em que a camada de dados (data-layer.js) e o fetch de categorias foram estruturados quebra o fluxo de raciocínio, mesmo que o arquivo final esteja disponível para consulta no repositório do GitHub.
O papel do instrutor é justamente guiar o passo a passo para destrinchar o "porquê" de cada linha. Vou registrar essa observação e encaminhar para a nossa equipe de conteúdo avaliar a necessidade de uma edição, atualização do vídeo ou a inserção de uma nota de aula detalhada no capítulo para tapar esse buraco.
Para que você não precise interromper o seu progresso no curso e consiga compreender perfeitamente o papel desse arquivo no Server-Side Rendering (SSR) do Next.js, preparei uma explicação didática do que acontece nessa camada:
data-layer.js no Next.jsEm arquiteturas limpas de aplicações React/Next.js, o data-layer (camada de dados) serve para isolar as requisições de API (fetch) dos componentes visuais. Isso evita que o seu componente de página fique poluído com URLs, chaves de autenticação ou tratamentos de erro brutos.
O método de busca de categorias que foi cortado do vídeo segue essencialmente o seguinte padrão estrutural:
// Exemplo da estrutura do data-layer.js
const API_URL = 'https://api.exemplo.com/v1';
export async function getCategories() {
try {
const response = await fetch(`${API_URL}/categories`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error('Falha ao buscar as categorias');
}
const data = await response.json();
return data;
} catch (error) {
console.error('Erro na camada de dados (getCategories):', error);
return []; // Retorna um array vazio para evitar a quebra da página
}
}
getServerSideProps)Dentro do arquivo da sua página Home, esse método é importado para que o Next.js faça a busca no servidor antes de renderizar a página para o usuário:
import { getCategories } from '../path/to/data-layer';
// Esta função roda estritamente no servidor (SSR) a cada requisição
export async function getServerSideProps() {
const categories = await getCategories();
return {
props: {
categories, // Passa os dados limpos para o componente da página
},
};
}
Dessa forma, o seu componente de página recebe a lista de categorias pronta através das props, garantindo que o HTML venha preenchido do servidor para melhorar o SEO e a performance de carregamento.
Agradeço demais pelo seu feedback crítico sobre o corte no vídeo, ele é fundamental para mantermos a precisão técnica das aulas.
Espero que possa ter lhe ajudado!