Video Corso
Next Fundamentals
Un corso su NextJS (con TypeScript) per creare siti web e applicazioni performanti e SEO-Friendly!
Creato da Fabio Biondi e Adriano Grimaldi
PANORAMICA
Cos'è Next Fundamentals
NextJS è attualmente il framework più apprezzato per la creazione di landing page e web app in React performanti e ottimizzate per i motori di ricerca.
Il corso è attualmente in fase di sviluppo
ma il 90% del contenuto è già disponibile
Applica Server Side Rendering (SSR) e Static Generation (SSG) per creare siti / applicazioni performanti e ottimizzate per i motori di ricerca
Crea backoffice in Strapi, Firebase, AirTable e utilizza moltissime altre tecnologie per velocizzare lo sviluppo
L'unica risorsa italiana che descrive NextJS con l'utilizzo di TypeScript allo scopo di creare codice più solido e type-safed
135
Video lezioni
10
ore di materiale
2
Docenti:
Adriano Grimaldi e Fabio Biondi
A chi è rivolto?
SVILUPPATORI REACT
Per sviluppatori React, anche alle prime armi, che desiderano creare siti web performanti e ottimizzati per i motori di ricerca in NextJS e TypeScript
NON CONOSCI REACT?
Per seguire questo corso non è necessario conoscere React! Tuttavia, per sfruttare NextJS al massimo del suo potenziale ti consigliamo ovviamente di studiarlo
Punti di forza
Tutto ciò di cui hai bisogno per creare web application SEO-Friendly e performanti
Per principianti ed esperti
Un corso adatto a principianti ed esperti che avranno la possibilità di apprendere tutti i segreti del framework
Dalle basi al deploy
Dalle fondamenta (stili, font, images, routing, ...) ad argomenti più interessanti come SSR, SSG, lo sviluppo di API REST fino alle procedure di deploy
Amazing Technologies
Tailwind, Azure, Strapi, Firebase, Supabase, AirTable sono solo alcune delle tecnologie utilizzate durante il corso
Versione Aggiornata
Tutti gli esercizi e i progetti creati durante il corso utilizzano TypeScript (con Next 12.x e React 17.x)
IL PROGRAMMA
Il corso è attualmente in fase di creazione perciò il programma potrebbe subire delle variazioni
- 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 (7:38)
- 6. Full Stack Apps (4:36)
- 7. Server API (1:38)
- 8. Deploy su Vercel (2:12)
- 1. Creare un progetto Next con il supporto di TypeScript (0:29)
- 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)
- 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)
- 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)
- 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)
- 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)
- 1. Versionamento su Git, Deploy su Vercel e gestione errori della build
- 2. Impostare env variables locali e remote ( su Vercel) (3:53)
- ...altri in arrivo...
- 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)
- 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)
- 01. Creare il primo endpoint REST con API Routes
- 02. Integrazione traduzioni con Azure Cognitive Services
- 01. Creazione backend con AirTable (20:48)
- 02. Creazione backend con Strapi (in arrivo)
- 03. Creazione backend con Firebase (in arrivo)
- 04. Creazione backend con Supabase (in arrivo)
- Anteprima del progetto (2:47)
- 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)
- 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)
MINI CORSO JAVASCRIPT / TYPESCRIPT
Nel pacchetto riceverai anche un mini corso su JavaScript ES6+ e TypeScript realizzato allo scopo di fornire tutte le informazioni di cui hai bisogno per sfruttare fin da subito le potenzialità di framework e librerie JS di ultima generazione.
40 video per una durata di quasi 3 ore
- Introduzione ad ES6/TS, Babel e Webpack (8:48)
- Javascript ES6 - Cheatsheet
- var vs let - Block Scope vs Function Scope (4:06)
- Le costanti: const - Mutabilità vs Immutabilità (6:23)
- Template literals: stringhe multiline con espressioni (3:58)
- Short Object syntax (2:26)
- Destructuring Array (3:38)
- Destructuring Object - part 1 (5:47)
- Destructuring Object - part 2: nested props (3:27)
- Destructuring Object - part 3: rename & short object syntax (2:13)
- Array Spread operator: clone, merge e modifica array (3:15)
- Object Spread operator vs Object.assign (4:55)
- Arrow function (4:32)
- Array: map (4:10)
- Array: filter (2:41)
- Array: find & findIndex (3:29)
- Immutabilità in ES6, React, Angular, Redux (13:30)
- Classes, Ereditarietà e lexical this (6:41)
- Creazione progetto ES6 con webserver e npm (3:01)
- Hello ES6: il tag "script" (1:38)
- Import modules e type="module" (5:34)
- Import as (1:56)
- Import default (5:23)
- Promises (8:39)
- Fetch: comunicazione con il server (2:53)
- Async Await (2:31)
- Introduzione a TypeScript (1:29)
- Utilizzare il mio playground TypeScript (3:45)
- Utilizzare on-line playground: StackBlitz (3:19)
- Inferenza in TypeScript (2:36)
- Primitives Types (4:17)
- Tipizzare oggetti usando interface e gestione proprietà opzionali (5:55)
- Tipizzare oggetti complessi (4:14)
- Tipizzare array (3:15)
- Utilizzo di class e type per la tipizzazione (6:15)
- Classi: private vs public (1:41)
- Classi: getter & setter (3:42)
- Tipizzare funzioni (5:02)
- Type, literals e introduzione a Union types (1:56)
Le utility di Next
Next include moltissime utility per velocizzare lo sviluppo e migliorare la Developer eXperience: ottimizzazione immagini, router, strategie per la gestione di script JavaScript, un server NODE per la creazione di API REST e molto altro...
Pre-Rendering, SSR, SSG e ISR
Next offre tre modalità di pre-rendering allo scopo di ottimizzare le performance e ottimizzare per i motori di ricerca: Server Side Rendering (SSR), Static Site Generation (SSG) e Incremental Static Regeneration (ISR)
No-Code: BackEnd in AirTable
Airtable è uno strumento utilissimo per la creazione di backend senza la necessità di cnoscere un linguaggio server side. In questo video analizziamo il suo potenziale utilizzandolo per la gestione di dati di un sito web sviluppato in NextJS, React e TypeScript tramite l’utilizzo della Static Site Generation (SSG)
Landing page con NextJS
Un modulo dedicato allo sviluppo di una landing page con NextJS, Bootstrap 5, SASS ed email-js. Il progetto simula un caso d'uso tipico di NextJS: la creazione di un sito web per la vendita di un prodotto (EasyFisco) dedicato ai liberi professionisti per la gestione della fiscalità e dei clienti tramite consulenti fiscali dedicati e una web app. Il tutto sfruttando la SSG offerta da NextJS.
I DOCENTI
Questo corso è realizzato in collaborazione
con Adriano Grimaldi, sviluppatore full-stack
Fabio Biondi
Fabio Biondi, Microsoft MVP e Google Developer Expert, è uno sviluppatore freelance con più di 15 anni di esperienza nella creazione di applicazioni web enterprise.
Speaker in numerosi eventi front-end, ha inoltre fondato diverse community italiane che si occupano di Javascript, Angular e React (~30000 membri)
Attualmente si occupa principalmente di formazione e consulenza su Javascript, Typescript, Angular, React, Next, Redux, NGRX e RxJS, Git.
Adriano Grimaldi
Adriano Grimaldi è uno sviluppatore e docente frontend con alle spalle 10 anni di esperienza.
Nel 2012 crea su YouTube un canale dedicato alla programmazione (Carmhack) dove propone tutorial su diversi linguaggi di programmazione, seguendo la sua formazione professionale e le richieste degli utenti. Attualmente conta circa 3 milioni di visualizzazioni e oltre 15 mila iscritti. Nel 2018 si laurea in Informatica all’Università degli Studi di Salerno con una tesi sull'analisi e lo sviluppo dei sistemi di raccomandazione in Python. Negli ultimi anni, continuando a lavorare come sviluppatore freelance, inizia anche l'attività di mentoring e formazione frontend. Dal 2020 è docente in Boolean, una delle tech academy più rinomate d'Italia. È molto attivo anche su Instagram in cui si dedica, tra le altre cose, al mondo della blockchain.
Acquista il corso
Acquista il corso per accedere al materiale dove e quando vuoi...
per sempre!
per un periodo limitato!
In futuro il prezzo potrebbe variare
Accesso life-time
135+ video (+10 ore)
Mini corso JS / TS (~ 3 ore)
Aggiornamenti
30 gg "Soddisfatto o Rimborsato"
TEAMS & ACQUISTI MULTIPLI
Sconti fino al 60% per team e aziende che necessitano di acquistare più di una licenza d'uso
FAQ
Hai dubbi o domande? Contattami
• 10% per 2+ studenti
• 30% per 5+ studenti
• 50% per 10+ studenti
Teachable, la piattaforma americana utilizzata per erogare i corsi, si occupa di tutto il processo di pagamento e di mettere le ricevute di acquisto.
Essendo un sistema di pagamento extra EU, nel caso di acquisto con partita iva, l'iva non sarà applicata e quindi sarà tolto il 22% dal totale.
Prima di effettuare l'ordine guarda un esempio di fattura che riceverai.
Guarda un esempio di fattura
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter che trovi in homepage