Semplice, Potente, Divertente:
Il t3 stack in azione.
Come utilizzare al meglio Next.js, TypeScript, tRPC, Prisma, Tailwind CSS e NextAuth.js.
Con un esempio pratico, scopriremo che la combinazione di queste tecnologie offre un'eccezionale Developer Experience.
Alfonso & Riccardo
2024
develrock è una software house nata nel 2023 con un’anima full remote.
Sviluppiamo software e prodotti digitali, ad esempio applicazioni mobile, gestionali, e-commerce.
Abbiamo anche creato un nostro prodotto interno che consente di gestire ed erogare corsi online integrando il progetto open source Jitsi.
Le tecnologie che utilizziamo sono principalmente React Native, Laravel, T3 stack.
La nostra azienda
2024
Cosa vedremo
Prisma
Un'API intuitiva e type-safe per interrogare il database
NextAuth.js
Un modo semplice, flessibile, sicuro e scalabile per gestire l’autenticazione e le sessioni
Tailwind CSS
Un framework CSS con approccio utility-first
2024
il t3 stack in azione
tRPC
Una libreria per creare API end-to-end con type safety, senza complicazioni
Next.js
Un framework per creare applicazioni React, leggermente “opinionated” ma fortemente ottimizzato
Next.js
2024
il t3 stack in azione
React
Next.js può ottimizzare automaticamente le immagini ed il codice (turbopack + SWC), migliorando i tempi di caricamento e le prestazioni.
Node.js
È possibile usare lo stesso codice per il frontend e per il backend, semplificando lo sviluppo e la manutenzione dell’applicazione.
Type safety
SSR
Next.js offre un supporto completo a TypeScript, permettendoti di sfruttare i vantaggi di tipizzazione statica per un codice più robusto e affidabile, con una migliore automazione e refactoring.
2024
Next.js può generare pagine HTML statiche sul server, migliorando le prestazioni e l'esperienza SEO.
Può anche generare siti web completamente statici, che possono essere ospitati su qualsiasi servizio di hosting web o caricati su una CDN.
il t3 stack in azione - next.js
tRPC
2024
il t3 stack in azione
Remote procedure call (RPC)
Semplifica la comunicazione tra client e server, rendendo il codice più modulare e riutilizzabile.��Permette di eseguire funzioni su un server remoto come se fossero chiamate localmente e nasconde la complessità della comunicazione di rete
Shared codebase
Type safety
Avendo le funzioni remote nella stessa codebase, è possibile scrivere codice più velocemente e con maggiore precisione sfruttando l’autocompletamento dell’IDE ed il controllo dei tipi.
La tipizzazione statica di TypeScript garantisce la sicurezza e l'affidabilità dei dati scambiati con l'API.
È possibile convalidare automaticamente i dati in entrata e in uscita, prevenendo errori e garantendo la coerenza dei dati.
React Query
tRPC è un wrapper attorno a @tanstack/react-query.
Gestisce automaticamente lo stato delle richieste e la cache dei dati, semplificando la gestione dei dati in tempo reale.
2024
il t3 stack in azione - tRPC
Prisma
2024
il t3 stack in azione
DB Agnostic
Visual database browser
Offre un sistema di migrazioni per gestire le modifiche al modello di dati nel tempo.
Questo permette di aggiornare il database in modo sicuro e affidabile, ed è possibile annullare le modifiche in caso di problemi.
Offre un browser di database visuale che facilita l'esplorazione e la gestione dei dati.
Con Prisma Studio è possibile visualizzare lo schema del database, le tabelle e i dati contenuti.
Type safety
Genera classi TypeScript in base al modello dei dati, garantendo la sicurezza dei tipi.
Permette di ottenere l’autocompletamento del codice.
Migrations
2024
È compatibile con diversi database, tra cui PostgreSQL, MySQL, MariaDB, SQL Server e MongoDB.
Questo permette di scegliere il database più adatto alle proprie esigenze, ed è possibile cambiare database senza dover riscrivere il codice.
il t3 stack in
azione - prisma
NextAuth.js
2024
il t3 stack in azione
Personalizzazione
L'interfaccia utente può essere personalizzata per adattarsi al design dell'app.
Sicurezza
Implementa le migliori pratiche di sicurezza: cookie server-only firmati e prefixed, protezione da CSRF, Tab syncing, auto-revalidation, keepalive.
Providers
NextAuth.js supporta diversi provider di autenticazione OAuth, come Google, Facebook e GitHub.
�Permette di aggiungere provider personalizzati e offre un'esperienza di autenticazione coerente per ognuno di essi.
2024
il t3 stack in
azione - nextauth.js
Semplicità
Implementa le migliori pratiche di sicurezza: cookie server-only firmati e prefixed, protezione da CSRF, Tab syncing, auto-revalidation, keepalive.
Tailwind CSS
2024
il t3 stack in azione
I preset sono un vero e priorio design system.�La palette colori crea armonia in ogni combinazione, Le tonalità sono precise.
Il sistema di dimensioni è progettato per far sì che gli elementi della pagina si completino a vicenda.
Utility classes
Invece di fornire componenti predefiniti, Tailwind fornisce un set di classi CSS di basso livello che possono essere combinate per creare qualsiasi elemento di design.
Questo approccio offre una grande flessibilità e controllo creativo, e non è necessario pensare ai nomi delle classi.
Performance
Le classi CSS sono ottimizzate e il framework genera solo il codice CSS necessario.
Questo permette di migliorare la velocità di caricamento del sito web.
Design system
Versatilità
Ci sono sempre più librerie di componenti "headless" che forniscono componenti predefiniti da adattare utilizzando TailwindCSS, consentendo di godere di tutti i benefici senza essere vincolati a una libreria specifica.
2024
il t3 stack in
azione - tailwind css
Azione!
2024
il t3 stack in azione
Crediti
https://github.com/develrock
https://create.t3.gg
https://trpc.io
https://next-auth.js.org
https://www.prisma.io
2024
il t3 stack in azione
https://www.kumospace.com