Executando verificação de segurança...
18

7 libs incríveis para elevar seu projeto em Next.js

Caso você goste de conteúdo em vídeo, aproveite para se inscrever no meu canal para não perder nenhum conteúdo novo!
VIDEO IMAGE

Agora bora para o conteúdo!

https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXlvbHYxcWoxOHBraDg5dWFuNm05emRndzNrd3pjaDBnNWVuMXJrbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/t3sZxY5zS5B0z5zMIz/giphy-downsized-large.gif

Não é mais segredo entre os desenvolvedores que o Next.js é realmente um produto incrível.

Quer saber como elevar seu front-end feito em Next.js para o próximo nível?

Vou te passar 7 libs muito úteis para você utilizar em seus projetos pessoais. E aqui não existe bala de prata, ok? É apenas a minha opinião... SIMBORA!

https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExY2E4ZmZoczdoaDExbWw0ZGZzN3M1YWZqMDgyaGhmOHNrbXlneWNqcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/CjmvTCZf2U3p09Cn0h/giphy.gif

1. Prisma

Prisma não é específico do Next.js. É um ORM para trabalhar com seu banco de dados.

ORM é um wrapper unificado para consultas de banco de dados.

Ele mantém uma boa estrutura e permite alternar rapidamente entre diferentes provedores de banco de dados.

Embora existam muitos ORMs que você pode usar, o Prisma ele oferece suporte ao TypeScript para suas consultas, tornando tudo 100x mais rápido. Next.js abraçou o TypeScript em sua configuração padrão, tornando-o uma combinação perfeita.

Outro ORM também bem legal que está crescendo muito na comunidade é o Drizzle. Diferente do Prisma, ele é mais SQL-like.

Outros ORMs e estruturas de dados tendem a desviar/abstrair você do SQL, o que leva a uma curva de aprendizado dupla – a necessidade de conhecer tanto o SQL quanto a API da estrutura.

O Drizzle é o oposto.

Ele é muito semelhante ao SQL, para que você possa ter curva de aprendizado zero ou nenhuma e acesso a todo o poder do SQL.

2. Shadcn-ui

Este item é um pouco mais pessoal, mas Shadcnui veio para tratar uma dor latente de UI’s. Tem um vídeo no canal onde eu explico mais sobre as vantagens e desvantagens, mas com essa UI ficou muito mais fácil de você trabalhar com grandes projetos e grandes sistemas.

3. Trigger dev

Imagine um processo que precisa ser executado todos os dias às 5hrs da tarde... Como implementar cron em Next.js?

https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMTZ6bjg3bXExY3E5M3k3bHg0c3d3azRjM2NwenQ1Y3B3NGhmZzU3ZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/8lQyyys3SGBoUUxrUp/giphy.gif

Algumas pessoas vão dizer que é impossível, mas é possível graças ao Trigger Dev. Eles oferecem Background Jobs para aplicações. Não necessariamente só para Next.js, mas para qualquer outra aplicação que você deseja implementar cron.

4. NextAuth

Suponha que você queira implementar qualquer autenticação de provedor de serviços, como Facebook/Google/GitHub (oAuth). Nesse caso, você deve criar sua implementação para cada provedor ou utilizar um serviço externo como kide ou Clerk.

Caso você queira fazer tudo sozinho e não utilizar um serviço de terceiro, você pode utilizar o NextAuth, que fornece uma implementação fácil para que você possa adicioná-los facilmente, fornecendo apenas as chaves corretas.

5. Trpc

End-to-end typesafe

Caso você não queira criar uma API tradicional, trpc é muito bom para criar back-end, justamente porque ele é end-to-end typesafe. Tem um vídeo aqui no canal onde eu ensino a criar um projeto com monorepo em Next e trpc, vale a pena dar uma olhada depois. Mas ele é muito útil, principalmente para você que curte TS, porque você não vai ter o trabalho de tipar o seu front e o seu back-end e com isso se concentrar em outras partes importantes.

6. ZOD e React Hook Form

Zod é um validador de objetos (servidor e cliente).

Você pode colocar regras diferentes em um objeto e validá-lo posteriormente, como nome de usuário e senha, ou coisas mais complexas.

Zod não é específico do Next.js.

Já o React Hook Form é específico para React.

React Hook Form é um excelente projeto para validação de cliente (mostrando erros nas entradas, gerenciando o estado da entrada e enviando).

7. React-Query

É uma ferramenta incrivelmente útil para desenvolvedores que procuram melhorar a performance e a usabilidade de seus aplicativos baseados em React.

Ele faz o gerenciamento automático de estado não precisa se preocupar com o gerenciamento manual do estado de suas requisições API ou o cache de dados, a biblioteca faz isso automaticamente.

Suporte à paginação e ao carregamento por demanda, tem um vídeo aqui também no canal que ensino utilizar infinite scroll com essa lib e é extremamente simples a integração com ela.

https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaTljc29mc293Mzh6Z2M0OXNjNDc0c2lkZGI2bHhieTJydHlsZ2hiNCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/WIo9wmSckGHhnipiym/giphy.gif

E isso, cada dia que passa tem mais tecnologias surgindo entao até a próxima!

Espero que eu tenha te ajudado em algo, boa sorte na sua jornada!

Caso você tenha gostado desse conteúdo, da uma olhada la no youtube, e se fazer sentido para você se inscreva =)

Até a próxima!
https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTgzaGt5M3ZxcXMzem5yOHFuZjVnbHQ2c3dpMmV2Z2p1ZjhlM3I1cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/cMPdlbcUKl3xkMCyD3/giphy.gif

Carregando publicação patrocinada...
1
0
1
1
1
1