Course Preview

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

IL PROGRAMMAACQUISTA
logo

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

instagram Profile
1
Performance & SEO

Applica Server Side Rendering (SSR) e Static Generation (SSG) per creare siti / applicazioni performanti e ottimizzate per i motori di ricerca

2
3d party libraries

Crea backoffice in Strapi, Firebase, AirTable e utilizza moltissime altre tecnologie per velocizzare lo sviluppo

3
TypeScript

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

SVILUPPATORI REACT

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

NON CONOSCI REACT?

Punti di forza

Tutto ciò di cui hai bisogno per creare web application SEO-Friendly e performanti

Per principianti ed esperti

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 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

Amazing Technologies

Tailwind, Azure, Strapi, Firebase, Supabase, AirTable sono solo alcune delle tecnologie utilizzate durante il corso

Versione Aggiornata

Versione Aggiornata

Tutti gli esercizi e i progetti creati durante il corso utilizzano TypeScript (con Next 12.x e React 17.x)

logo

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)
logo

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)
INTRO

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...

...
...
TEORIA

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)

TUTORIAL

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)

...
...
USE CASE

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.

GLI AUTORI DEL CORSO

I DOCENTI

Questo corso è realizzato in collaborazione
con Adriano Grimaldi, sviluppatore full-stack

Fabio Biondi
GOOGLE EXPERT & MICROSOFT MVP

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.

fabiobiondi.io

  • linkedin Profile
  • facebook Profile
  • twitter Profile
  • instagram Profile
  • Twitch Profile
  • YouTube Profile
Adriano Grimaldi
INSTRUCTOR & CONTENT CREATOR

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.

  • LinkedIn Profile
  • instagram Profile
  • YouTube Profile
...

Acquista il corso

Acquista il corso per accedere al materiale dove e quando vuoi...
per sempre!

SINGOLO UTENTE
129 + iva

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"

ACQUISTA

TEAMS & ACQUISTI MULTIPLI

Sconti fino al 60% per team e aziende che necessitano di acquistare più di una licenza d'uso

CONTATTAMI

FAQ

Hai dubbi o domande? Contattami

Gli accessi simultanei alla piattaforma da diversi IP verranno bloccati. Nel caso fossi interessato all’acquisto di più di una licenza d’uso abbiamo previsto delle promozioni:

• 10% per 2+ studenti
• 30% per 5+ studenti
• 50% per 10+ studenti
Sono sicuro che apprezzerai i contenuti del corso ma se non fossi soddisfatto potrai comunque essere rimborsato totalmente entro 30 giorni dall'acquisto
In fase di acquisto, è necessario inserire la partita iva (utilizzando IT come prefisso, ad es. IT1234567890) cliccando sul pulsante "+ ADD BUSINESS DETAILS" e inserire i dati per la fatturazione.
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.
Il mio corso è fruibile tramite la piattaforma Teachable, azienda con sede negli Stati Uniti. Per questo motivo: se richiedi la fattura e inserisci la partita iva in fase di acquisto NON verrà applicata l'iva. Al contrario, il costo per i privati sarà comprensivo di IVA
Guarda un esempio di fattura
No! La licenza d’uso non ha nessuna scadenza. Una volta acquistato il corso potrai fruire dei contenuti del corso ed eventuali aggiornamenti senza limiti di tempo.
Scrivimi su Facebook, LinkedIn o utilizza l'apposito form di contatto
Sono presente su tutti i principali social network. Trovi i link nella barra di navigazione in alto o nel footer.
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter che trovi in homepage