Complete Next.js com React & Node - Belo aplicativo de portfólio

Construa aplicativos da web sem servidor com Next.js. Aprenda Hooks. Implante no Vercel. Next.js (Next JS 10+), React (React 16+) e Node.

Este curso é adequado para você?

Se você planeja iniciar sua carreira como desenvolvedor ou melhorar suas habilidades de programação, este curso é adequado para você. Aprenda a construir um site de portfólio deslumbrante que você pode compartilhar com seus colegas ou futuros empregadores. Obtenha tudo o que você precisa para começar o desenvolvimento web em um único curso! Comece com tecnologias de desenvolvimento web até tópicos mais avançados, até que sua aplicação seja implantada no Heroku ou Vercel e acessível online na internet. Este recurso é a única coisa que você precisa para começar o desenvolvimento web com Next.js, React e Node. Você ganhará a confiança e as habilidades necessárias para criar seus próprios projetos durante este curso. Você desenvolverá a mentalidade certa para se candidatar a uma carreira de desenvolvedor e melhorar frameworks modernos como Next.js, React.js e Node.

O que é o Next.js?

Next.js é um framework React que fornece infraestrutura e uma experiência de desenvolvimento simples para aplicativos renderizados no lado do servidor (SSR). Ele oferece um sistema de roteamento baseado em páginas intuitivo com suporte para rotas dinâmicas. O Next.js suporta tanto a geração estática (SSG) quanto a renderização no lado do servidor (SSR) em uma base por página.

Estrutura do curso:

[Projeto 1]: Aplicativo de Recursos (Iniciantes)

[Projeto 2]: Aplicativo de Portfólio (Iniciantes/Intermediário)

[Projeto 3]: Aplicativo de Filmes (Código legado, Iniciantes)

[Projeto 4]: Aplicativo de Portfólio (Código legado, Iniciantes/Intermediário)

No que vamos trabalhar?

Projeto de Recursos

Este projeto aborda conceitos básicos. Você aprenderá como o React e o Next JS funcionam. Você entenderá o estado e as props. O objetivo principal deste projeto é ajudá-lo a entender os conceitos básicos que o prepararão para a segunda aplicação.

Projeto de Portfólio

Primeiro, vamos integrar o layout base do aplicativo. Vamos dividir o layout em pequenos pedaços e criar componentes reutilizáveis, como uma barra de navegação, cartão de portfólio e muitos outros. Explicaremos como funciona a renderização no lado do servidor, diferentes técnicas de busca de dados e as diferenças e benefícios de buscar no servidor versus no cliente. A primeira grande funcionalidade em que trabalharemos é a autenticação. O provedor Auth0 lidará com a autenticação, mas haverá muito trabalho a ser feito. Os usuários se registrarão e farão login e experimentarão recursos disponíveis apenas para usuários autenticados. Você aprenderá como restringir o acesso a páginas e gerenciar o estado de autenticação em toda a sua aplicação, resultando em alterações na interface do usuário do layout do aplicativo. Em seguida, trabalharemos nas funcionalidades do portfólio. Implementaremos a funcionalidade de criar um portfólio e explicaremos como gerenciar facilmente formulários. Em seguida, veremos a funcionalidade de atualização, onde mostraremos como preencher os campos de entrada com dados existentes. No final da seção, trabalharemos na funcionalidade de exclusão. Todas as funcionalidades serão reativas e atualizarão a visualização em tempo real. Você também aprenderá como criar páginas estáticas rápidas com as novas funções do Next.js. A funcionalidade do blog será a maior. Os usuários criarão blogs usando um editor de ardosia que oferece diferentes opções de formatação. Cada blog será inicialmente salvo como um blog rascunho, e será responsabilidade do usuário publicá-lo. Para esse fim, criaremos uma página de painel exibindo todos os blogs do usuário para publicar ou criar um rascunho a partir do blog. Todos os blogs publicados serão destacados na página de blogs e criados como páginas estáticas para melhor desempenho. Também criaremos funcionalidades de exclusão e atualização. Em seguida, trabalharemos em melhorias de SEO (otimização de mecanismos de pesquisa). Explicaremos o básico de SEO e como fazê-lo funcionar com o Next.js. A última seção abordará a implantação. O servidor de API Express será implantado no Heroku. O aplicativo de portfólio Next.js será implantado na plataforma serverless Vercel, tornando nossa aplicação super rápida na internet.

O que você vai aprender

- Desenvolver aplicativos da web sem servidor e clássicos com o mais recente Next JS & React - Compreender conceitos da web claramente criando aplicativos do mundo real - Criar aplicativos com SEO (Otimização de Mecanismos de Pesquisa) e compatíveis com Isomórficos - Estabelecer-se no campo do emocionante ambiente de desenvolvimento web Next e React.