####################################################################################################
01. Criando projeto Next.js: 
   [Commit: Criando projeto Next.js](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/1a8e17766a7e94adedb1fbe3b2b4cc1ab1aefbcb)

Nesta aula, vamos aprender sobre o Next.js, um framework famoso do ecossistema React. O Next.js é um framework que traz uma série de funcionalidades comuns para aplicações React, com uma convenção maior. Ele possui muitas convenções e regras sobre como estruturar a aplicação, escrever código e utilizar bibliotecas. O Next.js é recomendado pela própria documentação do React para a construção de novas aplicações. Vamos criar um projeto utilizando o Next.js e explorar a estrutura de pastas e arquivos gerados. Também vamos configurar o ESLint para melhorar a qualidade do código.

####################################################################################################
02. Rotas e layouts: 
   [Commit: Rotas e layouts](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/60996a6060d482a0cc5ec8f8ce61ade217d63b86)

Nesta aula, vamos entender as convenções do Next.js. O roteamento no Next é baseado em arquivos, ou seja, cada arquivo dentro da pasta "app" gera automaticamente uma nova rota na aplicação. Por exemplo, se criarmos uma pasta chamada "catalog" e dentro dela um arquivo "page.tsx" com o conteúdo do catálogo, teremos uma nova rota "/catalog". Além disso, podemos criar diferentes layouts para diferentes partes da aplicação. O arquivo "layout.tsx" é um layout global que envolve toda a aplicação, mas também podemos criar layouts específicos para determinadas pastas.

####################################################################################################
03. Grupos e rotas dinâmicas: 
   [Commit: Grupos e rotas dinâmicas](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/2463b45e7e10855ac69d8eaceb144e7205d85d3a)

Nesta parte da aula, exploramos algumas funcionalidades interessantes do Next.js relacionadas a páginas e layouts. Uma das coisas que vimos foi a herança de layout entre páginas dentro de uma mesma pasta. Também aprendemos a criar grupos de páginas usando parênteses ou colchetes, permitindo compartilhar um layout entre elas sem que o nome do grupo apareça na URL. Além disso, vimos como criar rotas parametrizadas usando colchetes e como acessar esses parâmetros dentro do componente da página. Também descobrimos um hack para receber múltiplos parâmetros na URL usando reticências. Essas funcionalidades são úteis para criar rotas dinâmicas e personalizadas em nossas aplicações.

####################################################################################################
04. Arquitetura do Next.js: 
   Neste vídeo, vamos entender a diferença entre criar uma aplicação com o Next.js e uma aplicação React tradicional. Em uma aplicação React tradicional, o usuário acessa diretamente o front-end, que é construído com JavaScript, CSS e HTML. No entanto, o usuário precisa esperar o carregamento desses arquivos, o que pode resultar em uma tela em branco até que tudo seja carregado. Somente após o carregamento do JavaScript, a aplicação começa a funcionar e pode buscar dados da API, por exemplo. 

Já o Next.js introduz o conceito de Server Side Rendering (SSR), onde o servidor Node.js busca os arquivos necessários para renderizar apenas a página que o usuário está acessando. Isso significa que o HTML é montado pelo servidor e enviado pronto para o usuário, não sendo necessário o carregamento completo do JavaScript no navegador. O Next.js também permite buscar dados da API no servidor, facilitando a transição de dados entre a API e a aplicação. 

Essa arquitetura do Next.js possibilita o uso de funcionalidades avançadas do React, como os Server Components, que revolucionam o desenvolvimento front-end. O Next.js é o único framework que suporta essa nova arquitetura do React, tornando-o uma escolha recomendada para criar aplicações React atualmente.

####################################################################################################
05. React Server Components: 
   [Commit: React Server Components](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/8b7aaf0a64e275480082b8615037d94c42e01b00)

Nesta aula, aprendemos sobre os Server Components e Client Components no Next.js. Os Server Components são componentes criados dentro do Node e são exibidos como HTML puro para o usuário, sem qualquer JavaScript associado. Isso evita o envio de JavaScript desnecessário para o navegador. No entanto, os Server Components têm limitações, pois não podem executar funcionalidades que dependem de JavaScript no lado do cliente, como ouvir eventos. Para isso, usamos Client Components, que são componentes que possuem interatividade e enviam o JavaScript necessário para o navegador. A diferença é que os Client Components passam por um processo de hidratação, onde o HTML é convertido em um HTML interativo com JavaScript.

####################################################################################################
06. Fetch de dados nos componentes: 
   [Commit: Fetch de dados nos componentes](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/9d6a7efa07b38e6e9ac3fe24d41ca4f5d404fd85)

Nesta aula, exploramos o uso de Server Components no Next.js. Ao utilizar Server Components, o HTML só é devolvido para o usuário após o servidor terminar de criar o componente. Isso permite que os componentes sejam assíncronos, possibilitando a utilização de `await` dentro deles. Com isso, podemos fazer chamadas assíncronas para APIs ou outras operações, como carregar dados iniciais. Essa abordagem melhora a experiência do usuário, pois os dados já estarão disponíveis no HTML renderizado pelo servidor, evitando a necessidade de aguardar o carregamento no lado do cliente. Além disso, o uso de Server Components facilita a indexação nos mecanismos de busca, tornando a aplicação mais amigável para SEO. No entanto, é importante ter cuidado com o tempo de carregamento dos componentes, pois operações assíncronas podem impactar no desempenho da aplicação.

####################################################################################################
07. Loading e Streaming SSR: 
   [Commit: Loading e Streaming SSR](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/c536d781f3b97c47feb028fbae0a0573ee97059e)

Nesta aula, exploramos um pouco mais sobre o conceito de carregamento assíncrono no Next.js. Foi mostrado como criar um arquivo de carregamento específico para cada página da aplicação, permitindo personalizar a mensagem exibida durante o carregamento. Além disso, foi explicado que o arquivo de carregamento herda o layout da aplicação, garantindo uma experiência consistente para o usuário. Também foi introduzido o conceito de Streaming SSR, que permite exibir parcialmente o conteúdo de uma página enquanto os dados são carregados, proporcionando um feedback visual instantâneo para o usuário.

####################################################################################################
08. Abstraindo Client components: 
   [Commit: Abstraindo Client components](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/0ce6a8178c5a054c326398eb6291ab553db4e503)

Nesta aula, discutimos sobre o uso do `async` em componentes do React. Foi explicado que, ao utilizar o `async` em um componente do tipo client component, que é um componente reativo que pode sofrer atualizações, pode causar problemas, pois o código dentro desse componente pode ser executado várias vezes, sempre que houver uma alteração no estado ou no componente pai. Foi sugerido que, em vez disso, devemos fazer o fetch de dados em componentes do tipo client component usando estratégias como o `useEffect` ou bibliotecas como o ReactQuery. Também foi mencionado a importância de abstrair ao máximo os client components, isolando a interatividade em componentes separados para enviar menos JavaScript para o navegador.

####################################################################################################
09. Client Boundaries e Encadeamento: 
   [Commit: Client Boundaries e Encadeamento](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/ddefd7da9a55704b53cb619858068b9dacd17c88)

Nesta aula, aprendemos sobre o conceito de Client Components e Server Components no React. Quando um componente possui a diretiva `'use-client'`, todos os componentes declarados dentro dele serão tratados como Client Components. Isso significa que eles serão enviados para o navegador e executados no lado do cliente. No entanto, é possível ter um Server Component dentro de um Client Component usando a propriedade `children`. Isso permite que o componente seja executado no servidor, mas usado dentro do componente do cliente. Essa nova arquitetura do React visa enviar menos JavaScript para o navegador, tornando as aplicações mais performáticas.

####################################################################################################
10. Árvore de componentes no Next.js: 
   Nesta aula, discutimos a diferença entre server components e client components. Server components são ideais para páginas que contêm uma grande quantidade de HTML e CSS, pois enviam menos conteúdo para o navegador. Já os client components são mais adequados para elementos interativos, como um carrinho de compras, que precisa ser atualizado em tempo real. Também aprendemos sobre a importância do uso do contexto para compartilhar informações entre componentes. Ao final da aula, fizemos um exercício prático para visualizar a estrutura de componentes no Next.js.

####################################################################################################
11. Suspense API no React: 
   [Commit: Suspense API no React](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/42026fdbf540c47f2d63693be2b6c668fff62560)

Nesta aula, aprendemos sobre a Suspense API do React. O Suspense é um componente que pode ser usado para envolver outros componentes que demoram a ser carregados. Ele recebe uma propriedade chamada Fallback, que define o que será mostrado enquanto o componente ainda não foi carregado. Podemos criar seções de carregamento na página usando o Suspense, como um Spinner ou uma Skeleton Screen. Além disso, vimos que o Next.js aguarda todos os componentes assíncronos dentro de uma página serem carregados antes de exibir o conteúdo, mas podemos evitar isso usando a Suspense API.

####################################################################################################
01. Criando projeto Next.js: 
   [Commit: Criando projeto Next.js](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/1a8e17766a7e94adedb1fbe3b2b4cc1ab1aefbcb)

Nesta aula, vamos aprender sobre o Next.js, um framework famoso do ecossistema React. O Next.js é um framework que traz uma série de funcionalidades comuns para aplicações React, com uma convenção maior. Ele possui muitas convenções e regras sobre como estruturar a aplicação, escrever código e utilizar bibliotecas. O Next.js é recomendado pela própria documentação do React para a construção de novas aplicações. Vamos criar um projeto utilizando o Next.js e explorar a estrutura de pastas e arquivos gerados. Também vamos configurar o ESLint para melhorar a qualidade do código.

####################################################################################################
02. Rotas e layouts: 
   [Commit: Rotas e layouts](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/60996a6060d482a0cc5ec8f8ce61ade217d63b86)

Nesta aula, vamos entender as convenções do Next.js. O roteamento no Next é baseado em arquivos, ou seja, cada arquivo dentro da pasta "app" gera automaticamente uma nova rota na aplicação. Por exemplo, se criarmos uma pasta chamada "catalog" e dentro dela um arquivo "page.tsx" com o conteúdo do catálogo, teremos uma nova rota "/catalog". Além disso, podemos criar diferentes layouts para diferentes partes da aplicação. O arquivo "layout.tsx" é um layout global que envolve toda a aplicação, mas também podemos criar layouts específicos para determinadas pastas.

####################################################################################################
03. Grupos e rotas dinâmicas: 
   [Commit: Grupos e rotas dinâmicas](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/2463b45e7e10855ac69d8eaceb144e7205d85d3a)

Nesta parte da aula, exploramos algumas funcionalidades interessantes do Next.js relacionadas a páginas e layouts. Uma das coisas que vimos foi a herança de layout entre páginas dentro de uma mesma pasta. Também aprendemos a criar grupos de páginas usando parênteses ou colchetes, permitindo compartilhar um layout entre elas sem que o nome do grupo apareça na URL. Além disso, vimos como criar rotas parametrizadas usando colchetes e como acessar esses parâmetros dentro do componente da página. Também descobrimos um hack para receber múltiplos parâmetros na URL usando reticências. Essas funcionalidades são úteis para criar rotas dinâmicas e personalizadas em nossas aplicações.

####################################################################################################
04. Arquitetura do Next.js: 
   Neste vídeo, vamos entender a diferença entre criar uma aplicação com o Next.js e uma aplicação React tradicional. Em uma aplicação React tradicional, o usuário acessa diretamente o front-end, que é construído com JavaScript, CSS e HTML. No entanto, o usuário precisa esperar o carregamento desses arquivos, o que pode resultar em uma tela em branco até que tudo seja carregado. Somente após o carregamento do JavaScript, a aplicação começa a funcionar e pode buscar dados da API, por exemplo. 

Já o Next.js introduz o conceito de Server Side Rendering (SSR), onde o servidor Node.js busca os arquivos necessários para renderizar apenas a página que o usuário está acessando. Isso significa que o HTML é montado pelo servidor e enviado pronto para o usuário, não sendo necessário o carregamento completo do JavaScript no navegador. O Next.js também permite buscar dados da API no servidor, facilitando a transição de dados entre a API e a aplicação. 

Essa arquitetura do Next.js possibilita o uso de funcionalidades avançadas do React, como os Server Components, que revolucionam o desenvolvimento front-end. O Next.js é o único framework que suporta essa nova arquitetura do React, tornando-o uma escolha recomendada para criar aplicações React atualmente.

####################################################################################################
05. React Server Components: 
   [Commit: React Server Components](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/8b7aaf0a64e275480082b8615037d94c42e01b00)

Nesta aula, aprendemos sobre os Server Components e Client Components no Next.js. Os Server Components são componentes criados dentro do Node e são exibidos como HTML puro para o usuário, sem qualquer JavaScript associado. Isso evita o envio de JavaScript desnecessário para o navegador. No entanto, os Server Components têm limitações, pois não podem executar funcionalidades que dependem de JavaScript no lado do cliente, como ouvir eventos. Para isso, usamos Client Components, que são componentes que possuem interatividade e enviam o JavaScript necessário para o navegador. A diferença é que os Client Components passam por um processo de hidratação, onde o HTML é convertido em um HTML interativo com JavaScript.

####################################################################################################
06. Fetch de dados nos componentes: 
   [Commit: Fetch de dados nos componentes](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/9d6a7efa07b38e6e9ac3fe24d41ca4f5d404fd85)

Nesta aula, exploramos o uso de Server Components no Next.js. Ao utilizar Server Components, o HTML só é devolvido para o usuário após o servidor terminar de criar o componente. Isso permite que os componentes sejam assíncronos, possibilitando a utilização de `await` dentro deles. Com isso, podemos fazer chamadas assíncronas para APIs ou outras operações, como carregar dados iniciais. Essa abordagem melhora a experiência do usuário, pois os dados já estarão disponíveis no HTML renderizado pelo servidor, evitando a necessidade de aguardar o carregamento no lado do cliente. Além disso, o uso de Server Components facilita a indexação nos mecanismos de busca, tornando a aplicação mais amigável para SEO. No entanto, é importante ter cuidado com o tempo de carregamento dos componentes, pois operações assíncronas podem impactar no desempenho da aplicação.

####################################################################################################
07. Loading e Streaming SSR: 
   [Commit: Loading e Streaming SSR](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/c536d781f3b97c47feb028fbae0a0573ee97059e)

Nesta aula, exploramos um pouco mais sobre o conceito de carregamento assíncrono no Next.js. Foi mostrado como criar um arquivo de carregamento específico para cada página da aplicação, permitindo personalizar a mensagem exibida durante o carregamento. Além disso, foi explicado que o arquivo de carregamento herda o layout da aplicação, garantindo uma experiência consistente para o usuário. Também foi introduzido o conceito de Streaming SSR, que permite exibir parcialmente o conteúdo de uma página enquanto os dados são carregados, proporcionando um feedback visual instantâneo para o usuário.

####################################################################################################
08. Abstraindo Client components: 
   [Commit: Abstraindo Client components](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/0ce6a8178c5a054c326398eb6291ab553db4e503)

Nesta aula, discutimos sobre o uso do `async` em componentes do React. Foi explicado que, ao utilizar o `async` em um componente do tipo client component, que é um componente reativo que pode sofrer atualizações, pode causar problemas, pois o código dentro desse componente pode ser executado várias vezes, sempre que houver uma alteração no estado ou no componente pai. Foi sugerido que, em vez disso, devemos fazer o fetch de dados em componentes do tipo client component usando estratégias como o `useEffect` ou bibliotecas como o ReactQuery. Também foi mencionado a importância de abstrair ao máximo os client components, isolando a interatividade em componentes separados para enviar menos JavaScript para o navegador.

####################################################################################################
09. Client Boundaries e Encadeamento: 
   [Commit: Client Boundaries e Encadeamento](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/ddefd7da9a55704b53cb619858068b9dacd17c88)

Nesta aula, aprendemos sobre o conceito de Client Components e Server Components no React. Quando um componente possui a diretiva `'use-client'`, todos os componentes declarados dentro dele serão tratados como Client Components. Isso significa que eles serão enviados para o navegador e executados no lado do cliente. No entanto, é possível ter um Server Component dentro de um Client Component usando a propriedade `children`. Isso permite que o componente seja executado no servidor, mas usado dentro do componente do cliente. Essa nova arquitetura do React visa enviar menos JavaScript para o navegador, tornando as aplicações mais performáticas.

####################################################################################################
10. Árvore de componentes no Next.js: 
   Nesta aula, discutimos a diferença entre server components e client components. Server components são ideais para páginas que contêm uma grande quantidade de HTML e CSS, pois enviam menos conteúdo para o navegador. Já os client components são mais adequados para elementos interativos, como um carrinho de compras, que precisa ser atualizado em tempo real. Também aprendemos sobre a importância do uso do contexto para compartilhar informações entre componentes. Ao final da aula, fizemos um exercício prático para visualizar a estrutura de componentes no Next.js.

####################################################################################################
11. Suspense API no React: 
   [Commit: Suspense API no React](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/42026fdbf540c47f2d63693be2b6c668fff62560)

Nesta aula, aprendemos sobre a Suspense API do React. O Suspense é um componente que pode ser usado para envolver outros componentes que demoram a ser carregados. Ele recebe uma propriedade chamada Fallback, que define o que será mostrado enquanto o componente ainda não foi carregado. Podemos criar seções de carregamento na página usando o Suspense, como um Spinner ou uma Skeleton Screen. Além disso, vimos que o Next.js aguarda todos os componentes assíncronos dentro de uma página serem carregados antes de exibir o conteúdo, mas podemos evitar isso usando a Suspense API.

####################################################################################################
01. Criando projeto Next.js: 
   [Commit: Criando projeto Next.js](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/1a8e17766a7e94adedb1fbe3b2b4cc1ab1aefbcb)

Nesta aula, vamos aprender sobre o Next.js, um framework famoso do ecossistema React. O Next.js é um framework que traz uma série de funcionalidades comuns para aplicações React, com uma convenção maior. Ele possui muitas convenções e regras sobre como estruturar a aplicação, escrever código e utilizar bibliotecas. O Next.js é recomendado pela própria documentação do React para a construção de novas aplicações. Vamos criar um projeto utilizando o Next.js e explorar a estrutura de pastas e arquivos gerados. Também vamos configurar o ESLint para melhorar a qualidade do código.

####################################################################################################
02. Rotas e layouts: 
   [Commit: Rotas e layouts](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/60996a6060d482a0cc5ec8f8ce61ade217d63b86)

Nesta aula, vamos entender as convenções do Next.js. O roteamento no Next é baseado em arquivos, ou seja, cada arquivo dentro da pasta "app" gera automaticamente uma nova rota na aplicação. Por exemplo, se criarmos uma pasta chamada "catalog" e dentro dela um arquivo "page.tsx" com o conteúdo do catálogo, teremos uma nova rota "/catalog". Além disso, podemos criar diferentes layouts para diferentes partes da aplicação. O arquivo "layout.tsx" é um layout global que envolve toda a aplicação, mas também podemos criar layouts específicos para determinadas pastas.

####################################################################################################
03. Grupos e rotas dinâmicas: 
   [Commit: Grupos e rotas dinâmicas](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/2463b45e7e10855ac69d8eaceb144e7205d85d3a)

Nesta parte da aula, exploramos algumas funcionalidades interessantes do Next.js relacionadas a páginas e layouts. Uma das coisas que vimos foi a herança de layout entre páginas dentro de uma mesma pasta. Também aprendemos a criar grupos de páginas usando parênteses ou colchetes, permitindo compartilhar um layout entre elas sem que o nome do grupo apareça na URL. Além disso, vimos como criar rotas parametrizadas usando colchetes e como acessar esses parâmetros dentro do componente da página. Também descobrimos um hack para receber múltiplos parâmetros na URL usando reticências. Essas funcionalidades são úteis para criar rotas dinâmicas e personalizadas em nossas aplicações.

####################################################################################################
04. Arquitetura do Next.js: 
   Neste vídeo, vamos entender a diferença entre criar uma aplicação com o Next.js e uma aplicação React tradicional. Em uma aplicação React tradicional, o usuário acessa diretamente o front-end, que é construído com JavaScript, CSS e HTML. No entanto, o usuário precisa esperar o carregamento desses arquivos, o que pode resultar em uma tela em branco até que tudo seja carregado. Somente após o carregamento do JavaScript, a aplicação começa a funcionar e pode buscar dados da API, por exemplo. 

Já o Next.js introduz o conceito de Server Side Rendering (SSR), onde o servidor Node.js busca os arquivos necessários para renderizar apenas a página que o usuário está acessando. Isso significa que o HTML é montado pelo servidor e enviado pronto para o usuário, não sendo necessário o carregamento completo do JavaScript no navegador. O Next.js também permite buscar dados da API no servidor, facilitando a transição de dados entre a API e a aplicação. 

Essa arquitetura do Next.js possibilita o uso de funcionalidades avançadas do React, como os Server Components, que revolucionam o desenvolvimento front-end. O Next.js é o único framework que suporta essa nova arquitetura do React, tornando-o uma escolha recomendada para criar aplicações React atualmente.

####################################################################################################
05. React Server Components: 
   [Commit: React Server Components](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/8b7aaf0a64e275480082b8615037d94c42e01b00)

Nesta aula, aprendemos sobre os Server Components e Client Components no Next.js. Os Server Components são componentes criados dentro do Node e são exibidos como HTML puro para o usuário, sem qualquer JavaScript associado. Isso evita o envio de JavaScript desnecessário para o navegador. No entanto, os Server Components têm limitações, pois não podem executar funcionalidades que dependem de JavaScript no lado do cliente, como ouvir eventos. Para isso, usamos Client Components, que são componentes que possuem interatividade e enviam o JavaScript necessário para o navegador. A diferença é que os Client Components passam por um processo de hidratação, onde o HTML é convertido em um HTML interativo com JavaScript.

####################################################################################################
06. Fetch de dados nos componentes: 
   [Commit: Fetch de dados nos componentes](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/9d6a7efa07b38e6e9ac3fe24d41ca4f5d404fd85)

Nesta aula, exploramos o uso de Server Components no Next.js. Ao utilizar Server Components, o HTML só é devolvido para o usuário após o servidor terminar de criar o componente. Isso permite que os componentes sejam assíncronos, possibilitando a utilização de `await` dentro deles. Com isso, podemos fazer chamadas assíncronas para APIs ou outras operações, como carregar dados iniciais. Essa abordagem melhora a experiência do usuário, pois os dados já estarão disponíveis no HTML renderizado pelo servidor, evitando a necessidade de aguardar o carregamento no lado do cliente. Além disso, o uso de Server Components facilita a indexação nos mecanismos de busca, tornando a aplicação mais amigável para SEO. No entanto, é importante ter cuidado com o tempo de carregamento dos componentes, pois operações assíncronas podem impactar no desempenho da aplicação.

####################################################################################################
07. Loading e Streaming SSR: 
   [Commit: Loading e Streaming SSR](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/c536d781f3b97c47feb028fbae0a0573ee97059e)

Nesta aula, exploramos um pouco mais sobre o conceito de carregamento assíncrono no Next.js. Foi mostrado como criar um arquivo de carregamento específico para cada página da aplicação, permitindo personalizar a mensagem exibida durante o carregamento. Além disso, foi explicado que o arquivo de carregamento herda o layout da aplicação, garantindo uma experiência consistente para o usuário. Também foi introduzido o conceito de Streaming SSR, que permite exibir parcialmente o conteúdo de uma página enquanto os dados são carregados, proporcionando um feedback visual instantâneo para o usuário.

####################################################################################################
08. Abstraindo Client components: 
   [Commit: Abstraindo Client components](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/0ce6a8178c5a054c326398eb6291ab553db4e503)

Nesta aula, discutimos sobre o uso do `async` em componentes do React. Foi explicado que, ao utilizar o `async` em um componente do tipo client component, que é um componente reativo que pode sofrer atualizações, pode causar problemas, pois o código dentro desse componente pode ser executado várias vezes, sempre que houver uma alteração no estado ou no componente pai. Foi sugerido que, em vez disso, devemos fazer o fetch de dados em componentes do tipo client component usando estratégias como o `useEffect` ou bibliotecas como o ReactQuery. Também foi mencionado a importância de abstrair ao máximo os client components, isolando a interatividade em componentes separados para enviar menos JavaScript para o navegador.

####################################################################################################
09. Client Boundaries e Encadeamento: 
   [Commit: Client Boundaries e Encadeamento](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/ddefd7da9a55704b53cb619858068b9dacd17c88)

Nesta aula, aprendemos sobre o conceito de Client Components e Server Components no React. Quando um componente possui a diretiva `'use-client'`, todos os componentes declarados dentro dele serão tratados como Client Components. Isso significa que eles serão enviados para o navegador e executados no lado do cliente. No entanto, é possível ter um Server Component dentro de um Client Component usando a propriedade `children`. Isso permite que o componente seja executado no servidor, mas usado dentro do componente do cliente. Essa nova arquitetura do React visa enviar menos JavaScript para o navegador, tornando as aplicações mais performáticas.

####################################################################################################
10. Árvore de componentes no Next.js: 
   Nesta aula, discutimos a diferença entre server components e client components. Server components são ideais para páginas que contêm uma grande quantidade de HTML e CSS, pois enviam menos conteúdo para o navegador. Já os client components são mais adequados para elementos interativos, como um carrinho de compras, que precisa ser atualizado em tempo real. Também aprendemos sobre a importância do uso do contexto para compartilhar informações entre componentes. Ao final da aula, fizemos um exercício prático para visualizar a estrutura de componentes no Next.js.

####################################################################################################
11. Suspense API no React: 
   [Commit: Suspense API no React](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/42026fdbf540c47f2d63693be2b6c668fff62560)

Nesta aula, aprendemos sobre a Suspense API do React. O Suspense é um componente que pode ser usado para envolver outros componentes que demoram a ser carregados. Ele recebe uma propriedade chamada Fallback, que define o que será mostrado enquanto o componente ainda não foi carregado. Podemos criar seções de carregamento na página usando o Suspense, como um Spinner ou uma Skeleton Screen. Além disso, vimos que o Next.js aguarda todos os componentes assíncronos dentro de uma página serem carregados antes de exibir o conteúdo, mas podemos evitar isso usando a Suspense API.

####################################################################################################
01. Criando projeto Next.js: 
   [Commit: Criando projeto Next.js](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/1a8e17766a7e94adedb1fbe3b2b4cc1ab1aefbcb)

Nesta aula, vamos aprender sobre o Next.js, um framework famoso do ecossistema React. O Next.js é um framework que traz uma série de funcionalidades comuns para aplicações React, com uma convenção maior. Ele possui muitas convenções e regras sobre como estruturar a aplicação, escrever código e utilizar bibliotecas. O Next.js é recomendado pela própria documentação do React para a construção de novas aplicações. Vamos criar um projeto utilizando o Next.js e explorar a estrutura de pastas e arquivos gerados. Também vamos configurar o ESLint para melhorar a qualidade do código.

####################################################################################################
02. Rotas e layouts: 
   [Commit: Rotas e layouts](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/60996a6060d482a0cc5ec8f8ce61ade217d63b86)

Nesta aula, vamos entender as convenções do Next.js. O roteamento no Next é baseado em arquivos, ou seja, cada arquivo dentro da pasta "app" gera automaticamente uma nova rota na aplicação. Por exemplo, se criarmos uma pasta chamada "catalog" e dentro dela um arquivo "page.tsx" com o conteúdo do catálogo, teremos uma nova rota "/catalog". Além disso, podemos criar diferentes layouts para diferentes partes da aplicação. O arquivo "layout.tsx" é um layout global que envolve toda a aplicação, mas também podemos criar layouts específicos para determinadas pastas.

####################################################################################################
03. Grupos e rotas dinâmicas: 
   [Commit: Grupos e rotas dinâmicas](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/2463b45e7e10855ac69d8eaceb144e7205d85d3a)

Nesta parte da aula, exploramos algumas funcionalidades interessantes do Next.js relacionadas a páginas e layouts. Uma das coisas que vimos foi a herança de layout entre páginas dentro de uma mesma pasta. Também aprendemos a criar grupos de páginas usando parênteses ou colchetes, permitindo compartilhar um layout entre elas sem que o nome do grupo apareça na URL. Além disso, vimos como criar rotas parametrizadas usando colchetes e como acessar esses parâmetros dentro do componente da página. Também descobrimos um hack para receber múltiplos parâmetros na URL usando reticências. Essas funcionalidades são úteis para criar rotas dinâmicas e personalizadas em nossas aplicações.

####################################################################################################
04. Arquitetura do Next.js: 
   Neste vídeo, vamos entender a diferença entre criar uma aplicação com o Next.js e uma aplicação React tradicional. Em uma aplicação React tradicional, o usuário acessa diretamente o front-end, que é construído com JavaScript, CSS e HTML. No entanto, o usuário precisa esperar o carregamento desses arquivos, o que pode resultar em uma tela em branco até que tudo seja carregado. Somente após o carregamento do JavaScript, a aplicação começa a funcionar e pode buscar dados da API, por exemplo. 

Já o Next.js introduz o conceito de Server Side Rendering (SSR), onde o servidor Node.js busca os arquivos necessários para renderizar apenas a página que o usuário está acessando. Isso significa que o HTML é montado pelo servidor e enviado pronto para o usuário, não sendo necessário o carregamento completo do JavaScript no navegador. O Next.js também permite buscar dados da API no servidor, facilitando a transição de dados entre a API e a aplicação. 

Essa arquitetura do Next.js possibilita o uso de funcionalidades avançadas do React, como os Server Components, que revolucionam o desenvolvimento front-end. O Next.js é o único framework que suporta essa nova arquitetura do React, tornando-o uma escolha recomendada para criar aplicações React atualmente.

####################################################################################################
05. React Server Components: 
   [Commit: React Server Components](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/8b7aaf0a64e275480082b8615037d94c42e01b00)

Nesta aula, aprendemos sobre os Server Components e Client Components no Next.js. Os Server Components são componentes criados dentro do Node e são exibidos como HTML puro para o usuário, sem qualquer JavaScript associado. Isso evita o envio de JavaScript desnecessário para o navegador. No entanto, os Server Components têm limitações, pois não podem executar funcionalidades que dependem de JavaScript no lado do cliente, como ouvir eventos. Para isso, usamos Client Components, que são componentes que possuem interatividade e enviam o JavaScript necessário para o navegador. A diferença é que os Client Components passam por um processo de hidratação, onde o HTML é convertido em um HTML interativo com JavaScript.

####################################################################################################
06. Fetch de dados nos componentes: 
   [Commit: Fetch de dados nos componentes](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/9d6a7efa07b38e6e9ac3fe24d41ca4f5d404fd85)

Nesta aula, exploramos o uso de Server Components no Next.js. Ao utilizar Server Components, o HTML só é devolvido para o usuário após o servidor terminar de criar o componente. Isso permite que os componentes sejam assíncronos, possibilitando a utilização de `await` dentro deles. Com isso, podemos fazer chamadas assíncronas para APIs ou outras operações, como carregar dados iniciais. Essa abordagem melhora a experiência do usuário, pois os dados já estarão disponíveis no HTML renderizado pelo servidor, evitando a necessidade de aguardar o carregamento no lado do cliente. Além disso, o uso de Server Components facilita a indexação nos mecanismos de busca, tornando a aplicação mais amigável para SEO. No entanto, é importante ter cuidado com o tempo de carregamento dos componentes, pois operações assíncronas podem impactar no desempenho da aplicação.

####################################################################################################
07. Loading e Streaming SSR: 
   [Commit: Loading e Streaming SSR](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/c536d781f3b97c47feb028fbae0a0573ee97059e)

Nesta aula, exploramos um pouco mais sobre o conceito de carregamento assíncrono no Next.js. Foi mostrado como criar um arquivo de carregamento específico para cada página da aplicação, permitindo personalizar a mensagem exibida durante o carregamento. Além disso, foi explicado que o arquivo de carregamento herda o layout da aplicação, garantindo uma experiência consistente para o usuário. Também foi introduzido o conceito de Streaming SSR, que permite exibir parcialmente o conteúdo de uma página enquanto os dados são carregados, proporcionando um feedback visual instantâneo para o usuário.

####################################################################################################
08. Abstraindo Client components: 
   [Commit: Abstraindo Client components](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/0ce6a8178c5a054c326398eb6291ab553db4e503)

Nesta aula, discutimos sobre o uso do `async` em componentes do React. Foi explicado que, ao utilizar o `async` em um componente do tipo client component, que é um componente reativo que pode sofrer atualizações, pode causar problemas, pois o código dentro desse componente pode ser executado várias vezes, sempre que houver uma alteração no estado ou no componente pai. Foi sugerido que, em vez disso, devemos fazer o fetch de dados em componentes do tipo client component usando estratégias como o `useEffect` ou bibliotecas como o ReactQuery. Também foi mencionado a importância de abstrair ao máximo os client components, isolando a interatividade em componentes separados para enviar menos JavaScript para o navegador.

####################################################################################################
09. Client Boundaries e Encadeamento: 
   [Commit: Client Boundaries e Encadeamento](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/ddefd7da9a55704b53cb619858068b9dacd17c88)

Nesta aula, aprendemos sobre o conceito de Client Components e Server Components no React. Quando um componente possui a diretiva `'use-client'`, todos os componentes declarados dentro dele serão tratados como Client Components. Isso significa que eles serão enviados para o navegador e executados no lado do cliente. No entanto, é possível ter um Server Component dentro de um Client Component usando a propriedade `children`. Isso permite que o componente seja executado no servidor, mas usado dentro do componente do cliente. Essa nova arquitetura do React visa enviar menos JavaScript para o navegador, tornando as aplicações mais performáticas.

####################################################################################################
10. Árvore de componentes no Next.js: 
   Nesta aula, discutimos a diferença entre server components e client components. Server components são ideais para páginas que contêm uma grande quantidade de HTML e CSS, pois enviam menos conteúdo para o navegador. Já os client components são mais adequados para elementos interativos, como um carrinho de compras, que precisa ser atualizado em tempo real. Também aprendemos sobre a importância do uso do contexto para compartilhar informações entre componentes. Ao final da aula, fizemos um exercício prático para visualizar a estrutura de componentes no Next.js.

####################################################################################################
11. Suspense API no React: 
   [Commit: Suspense API no React](https://github.com/rocketseat-education/ignite-reactjs-next-app-router-fundamentals/commit/42026fdbf540c47f2d63693be2b6c668fff62560)

Nesta aula, aprendemos sobre a Suspense API do React. O Suspense é um componente que pode ser usado para envolver outros componentes que demoram a ser carregados. Ele recebe uma propriedade chamada Fallback, que define o que será mostrado enquanto o componente ainda não foi carregado. Podemos criar seções de carregamento na página usando o Suspense, como um Spinner ou uma Skeleton Screen. Além disso, vimos que o Next.js aguarda todos os componentes assíncronos dentro de uma página serem carregados antes de exibir o conteúdo, mas podemos evitar isso usando a Suspense API.