Formações Front-end Next.js 14: desenvolvendo aplicações robustas com alta produtividade

Formação Next.js 14: desenvolvendo aplicações robustas com alta produtividade

Aprenda Next.js e crie aplicações complexas, modernas e eficientes

* Esta formação faz parte dos nossos cursos de Front-end

Quero Estudar na Alura
43h

Para conclusão

5
Cursos
6
Artigos

Formação Next.js 14

Com a evolução do front-end é comum o surgimento de muitas tecnologias e frameworks. Alguns vem e vão com o passar do tempo, e outras vem para ficar, como o Next.js.

Nessa formação, você vai mergulhar fundo no universo do Next.js, entendendo todos os problemas que ele resolve e, principalmente, como maximizar a sua experiência como pessoa desenvolvedora e a performance da aplicação, utilizando tudo o que o Next.js oferece em termos de caching, otimizações de imagens, pre-fetching e muito mais.

Além de explorar as capacidades visuais, você poderá desenvolver uma aplicação Full Stack, combinando várias tecnologias diferentes como: Docker, Prisma e deploy contínuo.

Quer mais motivos para estudar este conteúdo?

  • Você vai dominar um framework Full Stack para criar aplicações web rápidas e otimizadas para SEO.
  • Vai ganhar habilidades para desenvolver tanto o front-end quanto o back-end de aplicações.
  • Praticar com Docker e Prisma, ferramentas essenciais para pessoas desenvolvedoras Full Stack.
  • Aprender técnicas para melhorar a velocidade de desenvolvimento e a experiência do usuário nas aplicações.

Então, bora começar?

Por que estudar esta formação?

  • Guia de aprendizado

    Conteúdos pensados para facilitar seu estudo

  • Do básico ao avançado

    Formação completa para o mercado

  • Você dentro do mercado

    Do zero ao sonhado emprego em sua área de interesse

Comece essa formação agora mesmo e capacite-se para seu próximo projeto!

Conheça os planos

Com quem você vai aprender?

  • Vinicios Neves

    Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Lisboa e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.

  • Vinicios Neves

    Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Lisboa e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.

  • Patrícia Silva

    Sou Engenheira de Software, atualmente atuando como Fullstack Engineer e baseada em Portugal. Sou uma profissional entusiasmada que ama tecnologia. Trabalho como desenvolvedora web há mais de 15 anos. Ajudo desenvolvedores a melhorar suas habilidades e estou aberta a trocas de conhecimento com qualquer pessoa. Sou mãe de plantas e de dois meninos lindos. Adoro viajar, conhecer novas pessoas e estar em contato com a natureza. O foco e o cuidado com a experiência do usuário são o segredo do sucesso.

  • Patrícia Silva

    Sou Engenheira de Software, atualmente atuando como Fullstack Engineer e baseada em Portugal. Sou uma profissional entusiasmada que ama tecnologia. Trabalho como desenvolvedora web há mais de 15 anos. Ajudo desenvolvedores a melhorar suas habilidades e estou aberta a trocas de conhecimento com qualquer pessoa. Sou mãe de plantas e de dois meninos lindos. Adoro viajar, conhecer novas pessoas e estar em contato com a natureza. O foco e o cuidado com a experiência do usuário são o segredo do sucesso.

Passo a passo
  1. 1 Renderização do lado do servidor (Server Side Rendering)

    Eleve sua produtividade e construa aplicações robustas. Nesse passo da formação, nós vamos desenvolver uma aplicação chamada Code Connect, uma rede social para pessoas desenvolvedoras. Você vai criá-la do zero enquanto compreende e aplica conceitos de Server Side Rendering (SSR).

    Esse passo foi pensado para que você possa absorver as principais diferenças entre desenvolver uma aplicação React e uma aplicação Next. Além disso, trabalhamos juntos para evoluir o perfil do Dev em T ao desenvolver uma aplicação full stack utilizando Prisma ORM, Postgres, Docker e IaaS.

    • Curso Next.js: conheça o framework React

      08h
      • Identifique os componentes básicos utilizados em uma aplicação Next.js
      • Explique o processo de server-side rendering em Next.js
      • Utilizer a função fetch para criar chamadas API em uma aplicação Next.js, implementando a lógica para tratamento de erros e sucesso
      • Desconstrua e analise o fluxo de dados e o ciclo de vida de uma página em uma aplicação Next.js
      • Desenvolva uma aplicação Next.js que integra a renderização do lado do servidor com componentes reutilizáveis
      • Avalie criticamente as práticas de desenvolvimento e arquitetura de uma aplicação Next.js
    • Curso Next.js: construa suas aplicações com Postgres e Prisma

      08h
      • Utilize docker compose e variáveis de ambiente para configurar projetos localmente
      • Modifique um projeto existente, aplicando técnicas de refatoração
      • Descreva as principais vantagens de um ORM
      • Implemente queries e migrations com o Prisma
      • Prototipe uma aplicação fullstack utilizando Next e Postgres
    • Artigo Next.js: aprimorando performance e escalabilidade com sua API de cache | Alura

    • Artigo Next.js: criando aplicações fullstack | Alura

    • Site Next.js: Visão Atual - Hipsters Ponto Tech #399 - Hipsters Ponto TechHipsters Ponto Tech

  2. 2 Componentes do lado do cliente (Client Side Components)

    Nesse passo, vamos adicionar mais interatividade ao Code Connect misturando SSR e CSR. Além de maximizar o uso do servidor, otimizar as páginas para SEO e melhorar a experiência da pessoa desenvolvedora utilizando o Next.js e toda sua gama de ferramentas, vamos aprimorar a aplicação iniciada no passo 1.

    • Curso Next.js: construindo com Server Actions

      08h
      • Identifique as funcionalidades do Prisma para evolução de bancos de dados e a importância de revalidar o cache do Next.js para otimizar a performance da aplicação
      • Explique a criação de relacionamentos e queries no Prisma e a otimização de cache no Next.js
      • Utilize métodos de pré-definição de parâmetros, implementar Client Components e gerenciar estados de formulário
      • Analise como o useImperativeHandle e o operador ?? (Nullish Coalescing Operator) podem ser utilizados para otimizar a manipulação de estados e dados, e como combinar Server Actions com Client Components para uma arquitetura de aplicação mais coesa
      • Projete e implementar uma rota GET utilizando o Route Handler do Next.js, integrando Client Components para buscar dados de forma eficaz, enquanto manipula includes aninhados do Prisma para estruturar consultas de banco de dados complexas
      • Avalie e refatorar componentes para melhor organização visual e manutenção de código
    • Artigo Como proteger suas aplicações Next.js: práticas essenciais de segurança | Alura

    • Artigo Next: Server Actions aprendendo na prática | Alura

  3. 3 Geração de Sites Estáticos (Static Site Generation)

    Agora que você já tem uma boa bagagem com um dos frameworks mais utilizados do mercado, você vai otimizar a geração de conteúdo estático. Agora num projeto diferente, chamado Meteora, você vai mergulhar ainda mais fundo nos conceitos, configurações e boas práticas do Next.js.

    • Curso Next.js: gerando site estático com SSG

      08h
      • Conheça a estruturação de projetos em Next.js
      • Implemente técnicas de SSR e SSG
      • Crie a gestão de APIs dinâmicas
      • Integre serviços externos para atualização de dados
      • Otimize a performance e SEO
      • Realize deploy eficiente de sites estáticos
    • Artigo Next: um guia de como depurar aplicações web | Alura

  4. 4 Interagindo com Inteligência Artificial

    Agora que você já está familiarizado com os conceitos do Next.js, é o momento de avançar e explorar todo o potencial do framework. Nesta etapa da formação, você mergulhará no Vercel AI SDK e aprenderá a conectar sua aplicação à OpenAI (ou ao Ollama, utilizando o modelo Llama 3). Você desenvolverá um chatbot inteligente, compreendendo como integrar inteligência artificial ao Next.js para criar aplicações dinâmicas.

    • Curso Next.js: gerando site estático com SSG

      08h
      • Conheça a estruturação de projetos em Next.js
      • Implemente técnicas de SSR e SSG
      • Crie a gestão de APIs dinâmicas
      • Integre serviços externos para atualização de dados
      • Otimize a performance e SEO
      • Realize deploy eficiente de sites estáticos
    • Artigo Next: um guia de como depurar aplicações web | Alura

Escola

Front-end

Além dessa, a categoria Front-end conta com cursos de HTML, CSS, React, Angular, JavaScript, jQuery,e mais...

Conheça a Escola

Comece a estudar agora na maior escola de tecnologia do país

Conheça os Planos para Empresas