Aprenda Next.js

01. Introdução ao Next.js

Comece a aprender o Next.js. Nessa seção você vai ter contato com a base teórica e começar a desenvolver os seus primeiros projetos.

Você vai aprender

  • create-next-app
  • next/font
  • next/image
  • App router
  • Nested routes
  • next/link
  • Fetch de dados
  • Server Components

Quem vai te ensinar

Roberto Cestari
Ícaro Harry

Progresso nessa seção (0/11)

Essa trilha está em construção

Estamos preparando muita coisa boa!

Você pode acessá-la e fazer os conteúdos disponíveis, mas tenha em mente que alguns conteúdos ainda serão gravados.

Que tal começar pela prática?

Nós acreditamos que a prática é a melhor forma de aprender! Tente fazer um projeto básico antes mesmo de ver nossas aulas. Apesar de ser desconfortável, isso vai te ajudar a entender melhor quando você começar a se aprofundar na teoria.

Você pode tentar resolver esse projeto sozinho(a) ou assistir nossa resolução passo-a-passo.

Aprenda com a mão na massa!

Mini projeto:

O que você vai aprender:
create-next-app next/font next/image App router Nested routes next/link Server Components

Construa sua base teórica

Comece a aprender o básico do Next.js fazendo o nosso workshop!
Em breve

Aprenda o básico do Next.js

Workshop:

O que você vai aprender:
create-next-app Estilização com Tailwind next/font next/image App router Nested routes next/link Fetch de dados Server Components

Agora vamos fazer o nosso primeiro projeto? Ele é um projeto completo onde você vai poder desenvolver todas as habilidades básicas do Next.js

Você pode tentar fazer sozinho(a) ou assistir nossa resolução.

Gratuito

Colocando a teoria em prática

Mini projeto: Lista de países com Next.js

Aprenda Next.js criando uma lista de países usando a Countries API.

O que você vai aprender:
create-next-app Estilização com Tailwind next/font next/image App router Nested routes Fetch de dados Server Components

Estilização no Next.js

Na resolução do projeto da lista de países, você deve ter notado que usamos o Tailwind pra estilizar a aplicação.

Existem também outras formas de aplicar estilos no Next.js. Explore as principais estratégias de estilização na documentação oficial do Next.js.

A documentação oficial está em inglês. Recomendamos que você leia a versão oficial para treinar o seu inglês. Caso a língua seja uma barreira, você pode usar o Google Tradutor

Roteamento no Next.js

A partir da versão 13 do framework, foi introduzido o “app router”. Aprenda mais sobre o seu funcionamento pela documentação.

Fetch de dados

Existem formas diferentes de buscar informações para serem exibidas na sua aplicação. O Next.js separa isso em 4 categorias: fetch no client, fetch no client com bibliotecas, fetch no server e fetch no server com bibliotecas.

Agora que você aprofundou seus conhecimentos. Vamos fazer um outro projeto? Você pode tentar fazê-lo, ou acompanhar nossa resolução oficial. Mas lembre-se, quanto mais você avançar na trilha, mais você deve praticar autonomia para fazer os projetos!

Continue praticando!

Mini projeto:

O que você vai aprender:
TailwindCSS Next.js React APIs

Opcional

Caso você queira reforçar ainda mais o conteúdo desta seção, você pode fazer o curso oficial do Next.js.

02. Next.js intermediário

Vamos aprofundar um pouco mais no Next.js. Nessa seção começaremos a criar aplicações com inputs do usuário.

Você vai aprender

  • Redis
  • Server Actions
  • Streaming
  • Skeletons
  • Partial Prerendering
  • Tratamento de erros
  • Busca e paginação
  • Next.js Fullstack

Quem vai te ensinar

Roberto Cestari
Ícaro Harry

Progresso nessa seção (0/5)

Vamos aprofundar no Next.js?

Agora que você já estudou e praticou a base do framework, podemos começar a explorar assuntos mais avançados.
Em breve

Server Components e Server Actions

Workshop:

O que você vai aprender:
Server Actions Streaming Skeletons Partial Prerendering Tratamento de erros Busca e paginação

Server Actions

Uma das principais funcionalidades que chegou a partir da versão 13 do Next.js são as Server Actions. Com elas, você consegue executar código no seu servidor e fazer mutação nos dados. Entenda mais sobre elas na documentação oficial do Next.js

Entenda melhor os Server Components

Por trás das Server Actions, estão os Server Components. Essa feature pertence ao React e o Next foi o primeiro framework a implementá-la.

Assista esse workshop para entender mais sobre Server Components e formas de renderização do React.

Aprofundando nos Server Components

Workshop:

O que você vai aprender:
React Server Components Client Side Rendering Static Site Generation Incremental Static Regeneration Server Side Rendering Hydration

Hora de praticar

Nesse projeto vamos praticar todas as funcionalidades que vimos até agora para criar um app fullstack com o Next.js
Gratuito

App full-stack com Next.js

Mini projeto: Gerenciador de hábitos com Next.js

Aprenda a versão 13+ do Next criando esse app super útil! Utilize Server Components e Server Actions para aprender mais sobre essas tecnologias.

O que você vai aprender:
Redis Nested routes Fetch de dados Server Components Server Actions Tratamento de erros Vercel KV Streaming e Suspense

Opcional

Aprenda como funciona essa nova funcionalidade para pré carregar partes da sua página no servidor.

03. Autenticação no Next.js

Aprenda as principais formas de autenticação no Next.js.

Você vai aprender

  • Autenticação
  • NextAuth (Auth.js)
  • Clerk
  • Lucia
  • Auth0
  • Kinde
  • Supabase
  • Stytch

Quem vai te ensinar

Roberto Cestari

Progresso nessa seção (0/9)

A principal lib de autenticação no Next.js

Existem diversas formas de trabalhar Autenticação e Autorização no Next.js. A principal delas é utilizando a biblioteca NextAuth (ou Auth.js).

Aprenda a usar o NextAuth

Workshop:

O que você vai aprender:
Autenticação NextAuth (Auth.js) Login com Github Login com Magic Link

Praticando NextAuth

Coloque a mão na massa implementando um projeto com autenticação no NextAuth.

Aprenda a implementar um login com Github

Mini projeto:

O que você vai aprender:
NextAuth (Auth.js) Login com Github

Aprofundando no tópico de autenticação

Saiba mais detalhes sobre como o Next.js lida com autenticação e autorização.

Outras formas de autenticação

Além do NextAuth, existem outras bibliotecas/serviços que podem ser usados. Explore um pouco sobre eles e veja suas principais vantagens e desvantagens

04. Tópicos extras do Next.js

Aprenda como criar blogs, e-commerce e outros tópicos importantes como acessibilidade e caching.

Você vai aprender

  • MDX
  • Next Commerce
  • Acessibilidade
  • SEO
  • Cache

Quem vai te ensinar

Felipe Muller

Progresso nessa seção (0/6)

Criando um blog com o Next.js

Aprenda a utilizar o Next.js para criar um blog e hospede-o gratuitamente na Vercel.

Aprenda a fazer o próprio blog

Mini projeto:

O que você vai aprender:
Next.js MDX

Criando um e-commerce com o Next.js

Aprenda a utilizar o Next.js para criar um e-commerce integrado com a Shopify.

Rankeie suas páginas no Google

Aprenda a otimizar como suas páginas vão rankear nas engines de busca como o Google.

Assista esse vídeo que explica detalhadamente os principais pontos relativos a SEO no Next.js.

Acessibilidade

Aprenda a aplicar os principais conceitos de acessibilidade no Next.js

Técnicas de caching

Uma das formas utilizadas no Next.js para ganhar em performance e eficiência é o uso extensivo de cache. Aprenda mais sobre isso na documentação oficial.