Autoplay
Autocomplete
Previous Lesson
Complete and Continue
NextJS (TypeScript version)
NextJS: panoramica
1. Cos'è Next e perché utilizzarlo (1:40)
2. Panoramica delle utility (2:43)
3. Styling (5:13)
4. Introduzione al router (1:52)
5. SSR vs SSG (8:12)
6. Full Stack Apps (4:36)
7. Server API (1:38)
8. Deploy su Vercel (2:12)
1. Introduzione a Next / TypeScript
1. Creare un progetto Next con supporto TypeScript (UPDATE NEXT v.13) (1:17)
2. La struttura di un progetto Next / TS (2:43)
3. Avviare un progetto Next (0:46)
4. La pagina di default di un progetto Next (1:27)
2. Styling: global, local, 3rd party
1. Inline styling e formattazione JSX (2:33)
2. Classi CSS globali ( il file globals.css ) (1:32)
3. Il file _app.tsx (2:10)
4. CSS Module e CSS locale: utilizzo e dietro le quinte (6:32)
5. Utilizzare CSS module nei componenti (2:54)
6. Local CSS con Styled JSX (3:23)
7. Global CSS, media query e pseudo-classes con Styled JSX (1:56)
8. Integrare la libreria "Animate.css" (3:01)
9. Integrazione di "Bootstrap CSS" (1:15)
10. Installare e Configurare "Tailwind" CSS (4:30)
3. Image Component
1. Immagini, assets e la cartella public (1:31)
2. Next Image Component, Static Import vs String Path (2:41)
3. Image layout: intrinsic (1:05)
4. Image layout: responsive (1:16)
5. Image layout: fixed (0:30)
6. Image layout: fill (0:56)
7. Image ObjectFit - cover and contain (1:05)
8. Visualizzare un Placeholder "blur" prima del caricamento (2:06)
9. Impostare la qualità dell'immagine (1:16)
10. L'evento onLoadingComplete (0:55)
11. Configurare Next per accedere ad host esterni (1:32)
4. Router
1. La pagina Home: panoramica (1:47)
2. Creare nuove route (1:14)
3. Tailwind @apply e riutilizzo classi CSS tra le route (2:48)
4. Nested Routes (2:12)
5. Dynamic Routes (1:38)
6. recuperare parametri dall'url con useRouter (1:11)
7. Il file _app.tsx per condividere elementi JSX tra route (2:33)
8. Navbar e Footer Components (4:41)
9. Link Component: navigazione tra pagine (4:56)
10. NavItem Component, passhref e forwardRef (7:41)
11. Link: replace property (1:31)
12. La pagina di errore 404 (1:51)
5. Approfondimenti
1. Lighthouse e analisi performance, seo, accessibilità e best practices (2:01)
2.Il componente Head - titolo e meta description (1:35)
3. Build e analisi performance con LightHouse (1:49)
4. Otteniamo 100% su LighHouse creando il file _document.tsx (3:44)
5. Inserire un Google Font in una singola pagina (1:51)
6. Inserire un Google Font globale (0:51)
7. Il componente Script e il caricamento di librerie tramite CDN (3:49)
8. Script Strategies: beforeInteractive, afterInteractive e lazyOnLoad (4:27)
9. Script - Eseguire azioni dopo il caricamento e gestire errori (1:03)
6. Build & Deploy
1. Versionamento su Git, Deploy su Vercel e gestione errori della build (5:21)
2. Impostare env variables locali e remote ( su Vercel) (3:53)
7. SSR - Server Side Rendering
Pre-Rendering, SSR vs SSG: intro (7:38)
01. descrizione del progetto (1:25)
02. SSR, axios, api REST e model (3:54)
03. La funzione getServerSideProps (2:43)
04_rendering della pagina e tipizzazione proprietà (2:57)
05.tailwind.config.ts: configurazione hostname per caricamento immagini (1:30)
06. InferGetServerSidePropsType - Tipizzare le proprietà della pagina (1:50)
07. Gestione Errori (1:03)
08. Redirect in caso d'errore (0:57)
09. Permanent - status 307 e 308 (1:15)
10. Dynamic Route - Parte 1 (2:28)
11. Dynamic Route - Parte 2 (6:55)
12. Build e analisi performance con LightHouse (2:54)
13. Debug di funzioni SSR - parte 1 - log su terminale (2:18)
14. Debug di funzioni SSR - parte 2 - Chrome Inspect (1:38)
15. Debug di funzioni SSR - parte 3 - WebStorm Debugger (1:03)
8. SSG - Static Site Generation
01_introduzione alla Static Site Generation (SSG) (1:39)
02. SSG con la funzione getStaticProps (1:50)
03. SSG, dynamic paths e dynamic route (3:57)
04. StaticPaths - dynamic path - fallback: false (1:09)
05. StaticPaths - dynamic path - fallback: true (4:47)
06. StaticPaths - dynamic path - fallback: blocking (0:41)
07. SSG - generare nuove pagine dinamicamente (5:01)
9. API Routes e creazione servizi REST in Node
01. Creare il primo endpoint REST con API Routes (2:58)
02. Integrazione traduzioni con Azure Cognitive Services (7:38)
10. Creazione Backoffice e CMS
Creare backend con AirTable (20:54)
TODO: Integrazione con Supabase
TODO: Integrazione con Firebase
TODO: Integrazione con Strapi
11. Sviluppo di una landing page
Anteprima del progetto (2:50)
Installazione di Bootstrap e SASS (2:00)
CSS globale e partials (3:26)
Il file _document (3:19)
Creiamo la barra di navigazione (13:02)
Impostiamo il Footer (11:25)
Come importare lo script di Bootstrap 5 (4:17)
Creiamo un layout comune a tutte le pagine (4:42)
Il componente Header: catturiamo l'attenzione dell'utente (9:08)
SASS: modifica delle variabili di progetto (5:36)
Installazione e configurazione di json-server (2:47)
Utilizzo di getStaticProps (6:37)
Mostriamo le Features (10:02)
Un componente statico: Details (9:47)
Call To Action: il componente Invitation (5:17)
Il componente Pricing: gestire più richieste HTTP (20:38)
Alcune correzioni sui file SASS (6:30)
Domande frequenti: il componente FAQ (20:02)
La pagina di contatti (19:31)
Invio della mail con email-js (10:11)
Aggiungiamo le media-query (1:17)
Gestire i meta-tag: il componente Head (3:10)
Build e analisi con Lighthouse (6:49)
Deploy con Vercel e MyJSONServer (5:29)
12. Creazione Blog in Next e Strapi
Back Office: creazione del progetto Strapi (4:38)
Back Office: uno sguardo alla dashboard (4:24)
Back Office: creazione dell'entità Post (6:58)
Back Office: utilizzo del Content Manager (4:23)
Back Office: creazione delle entità Categoria e Tag (3:46)
Back Office: gestione delle relazioni (4:32)
Back Office: prima query con Postman e gestione permessi (3:56)
Back Office: il parametro populate (5:24)
Back Office: i parametri filter e sort (8:56)
Creazione del progetto e anteprima (4:35)
Gestione dello stile globale (4:59)
Il file _document e impostazione layout di base (4:03)
Creazione di Navbar e Footer statici (5:08)
Tipizzare i response di Strapi: Navbar dinamica (12:23)
Gestire le API in un unico file: rendiamo il Footer dinamico (6:08)
Rendiamo la Navbar responsiva (3:20)
Aggiungiamo i Post Recenti sul Footer (9:12)
Utilizzo di getServerSideProps (14:31)
Anteprima del post con il componente PostPreview (7:09)
Pagina di dettaglio del Post (13:32)
Pagina di dettaglio di Categorie e Tags (10:38)
Aggiungiamo lo slider sulla Home (12:22)
Aggiungiamo uno slider sul dettaglio del post (3:52)
Build e analisi app con Lighthouse (6:22)
Deploy Strapi su Heroku e app Next su Vercel (15:09)
2. La struttura di un progetto Next / TS
Complete and Continue