Perchè usare Next.js per un semplice blog personale? Questa è la prima domanda che potresti porti leggendo questo articolo. All'inizio infatti questo era un semplice sito in React.js con delle transizioni e i link ai miei contatti.
L'idea iniziale della sezione blog era quella di scrivere dei brevi articoli per raccontare le librerie o i framework che avrei utilizzato dalla fine del corso in Epicode in poi; siccome ho avuto l'idea di aggiungere la possibilità di aggiungere dei commenti per gli utenti, mi sono scontrato con la necessità di integrare un database per salvare i commenti e quindi anche le credenziali degli utenti.
All'inizio avevo pensato di integrare un classico backend Java per realizzare degli endpoint e salvare i dati online, ma poi ho scoperto che grazie a Supabase potevo ridurre enormemente la complessità del lavoro di creazione del back end, e che Next.js grazie al suo server side rendering potevo integrare il resto della business logic.
Sono partito da una nuova stesura del sito usando inoltre Tailwind CSS al posto di Bootstrap, anche se ho tenuto la dipendenza perchè ho creato alcuni componenti a partire da questo framework. Dopodichè ho aggiunto i vari endpoint per autenticazione e postare.
Dopo aver testato una prima versione, ho creato un nuovo frontend usando unicamente Tailwind CSS; ho inoltre realizzato una serie di componenti da 0, modulari e riusabili.
Infine ho dovuto fare alcune modifiche al backend per integrare il nuovo frontend e per risolvere alcuni bug creati dal passaggio da una versione e l'altra, poi ho aggiunto nuove funzioni per gestire il paging della pagina principale, la visualizzazione degli ultimi utenti che generano attività sul sito, modificare e cancellare post e commenti.
Sono molto soddisfatto di questo progetto perchè è stato un ottimo laboratorio per imparare le differenze tra Next e React e come gestire un backend senza usare un'altra applicazione, riducendo inoltre i costi.
Ho integrato un sistema di autenticazione con Next.js che permette agli utenti di registrarsi, accedere e gestire i loro dati. Ho utilizzato un sistema basato su JWT Token e Cookies che autorizza gli utenti a postare e commentare. Per verificare inoltre la veridicità dell'email alla registrazione si riceve un link di verifica. Le password con cui gli utenti sono salvati sono hashate con bcrypt, quindi le password sono al sicuro.
Ho usato un sacco di librerie interessanti, e siccome sto iniziando anche a scrivere una text coverage ho aggiunto anche Jest di recente. Ho usato Framer Motion per le transizioni tra le pagine, Redux, dotenv, l'SDK di cloudinary, nodemailer oltre che le ovvie librerie Next e React.
