O texto de hoje é uma dica para você, desenvolvedor web que sempre teve interesse no Next.js ou que já trabalhou com ele no passado e deseja reacender sua relação com essa ferramenta queridinha da Vercel. 😊
Meu Contexto
Minha primeira experiência com o Next.js aconteceu por volta de 2020, quando essa "nave espacial" 🚀 criada pela Vercel começou a decolar. Desde então, o cenário web adotou amplamente o TypeScript e abraçou de vez o server-side rendering. Profissionalmente, acabei me envolvendo mais com o lado "verde" da força (Vue + Nuxt) e foi lá onde passei os últimos 3 anos.
Agora, em um novo momento da minha carreira, decidi revisitar o que o Next.js oferece e como ele funciona.
Minha Escolha
Eu poderia ter optado por fazer um curso. 📚
Eu poderia simplesmente ler a documentação. 📖
Eu poderia até mesmo apenas construir algo do zero. 🏗️
Bem, fiz a minha escolha:
Reescrevi meu site pessoal, https://eduardocappellotto.com/, usando o Next.js (o código está disponível aqui: https://github.com/eduardocappellotto/cappellotto-portfolio).
Explorando os Tutoriais da Vercel
No entanto, também me veio um pensamento: os tutoriais do Nuxt feitos pela equipe central são tão úteis... E quanto aos tutoriais da Vercel?
Acontece que os tutoriais de Next.js (e também de React.js) da Vercel são excelentes e merecem mais reconhecimento! Eles te guiam na criação de pequenos projetos, ajudando a entender pontos essenciais do framework.
A Dica de Hoje: Tutoriais da Vercel
E essa é a dica de hoje: A Vercel disponibiliza ótimos tutoriais de Next.js e React.js diretamente em seu site: https://nextjs.org/learn
Peço desculpas pela falta de padronização. Aqui estão as duas partes padronizadas com listas de itens em ambas:
Trilha de React.js - Pré-requisito para a Trilha de Next.js!
Antes de mergulharmos na trilha de Next.js, é crucial adquirir uma base sólida em React. A trilha de React.js oferece uma introdução a conceitos fundamentais que você deve dominar, incluindo:
- O que é o DOM?
- Como alterar a interface do usuário com JavaScript.
- Como o React funciona.
- Trabalho com props.
- Uso de componentes.
- Gerenciamento de estado.
- Diferenças em relação ao Next.js.
Aqui está o link para a trilha de React: Trilha de React
Trilha de Next.js
Agora que você possui uma compreensão sólida de React, pode avançar para a trilha de Next.js, que aborda os seguintes tópicos:
- Estilização: Explore diferentes abordagens para estilizar sua aplicação no Next.js. 🎨
- Otimizações: Saiba como otimizar imagens, links e fontes para melhor desempenho. 🚀
- Roteamento: Crie layouts e páginas aninhadas usando o sistema de roteamento baseado em arquivos. 🌐
- Recuperação de Dados: Configure um banco de dados na Vercel e siga as melhores práticas para buscar e transmitir dados. 💼
- Pesquisa e Paginação: Implemente pesquisa e paginação utilizando Parâmetros de Pesquisa na URL. 🔍
- Mutação de Dados: Aprenda como modificar dados com as Ações de Servidor do React e revalide o cache do Next.js. ✏️
- Tratamento de Erros: Saiba como lidar com erros gerais e erros 404 não encontrados. 🚧
- Validação de Formulários e Acessibilidade: Realize a validação de formulários no servidor e aplique dicas para melhorar a acessibilidade. ♿
- Autenticação: Adicione autenticação à sua aplicação utilizando o NextAuth.js e Middlewares. 🔐
- Metadados: Acrescente metadados e prepare sua aplicação para compartilhamento nas redes sociais. 📊
Agora, você está pronto para explorar ou aprofundar seu conhecimento em Next.js e React.js, começando pela trilha de React.js como um sólido pré-requisito antes de avançar para a trilha de Next.js. 👨💻👩💻
Portanto, se você está pronto para explorar ou aprofundar seu conhecimento em Next.js e React.js, esses tutoriais da Vercel são um recurso valioso que merece sua atenção. 👨💻👩💻
Top comments (0)