Next Fundamentals

NextJS 12/13
Fundamentals

Video Corso

Un corso su NextJS e TypeScript per creare siti web e applicazioni performanti e SEO-Friendly!

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.

Creato in collaborazione con Adriano Grimaldi.
135 video
10 ore
su Next v.12
1 ora
su Next v.13
2 docenti
Fabio Biondi e Adriano Grimaldi
Next Fundamentals

Il corso include:

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
4
Next v.13
5 capitoli dedicati alle ultime novità introdotte in Next V.13

A chi è rivolto

SVILUPPATORI REACT

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?

NON CONOSCI REACT?

Per seguire questo corso non è necessario conoscere perfettamente React! Tuttavia, per sfruttare NextJS al massimo del suo potenziale ti consigliamo ovviamente di studiarlo prima di acquistare questo corso

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

Amazing Technologies

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

Dalle basi al deploy

Analizzeremo le funzionalità base del framework (stili, font, images, routing, ...), prendending con Server Side Rendering (SSR) e Static Site Generation (SSG), creazione endpoint REST e procedure di deploy
Versione

Versione

Tutti gli esercizi e i progetti creati durante il corso utilizzano TypeScript (con Next 12.x e React 17.x ma totalmente compatibile con React 18.x).
Include, inoltre, molti nuovi video sulle novità introdotte in Next v.13
Argomenti trattati nel corso
Next v.12 Fundamentals
1. INTRODUZIONE A NEXT
• 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)
2. CREARE PROGETTI in NEXT, REACT e TYPESCRIPT
• 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)
3. STYLING: TECNICHE e UIKIT
• 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)
4. OTTIMIZZAZIONE IMMAGINI
• 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)
5. 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)
6. 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)
7. BUILD e DEPLOY
• 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...
8. SSR: SERVER SIDE RENDERING
• 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)
9. 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)
10. API ROUTES e CREAZIONE SERVIZI REST in NODE
• 01. Creare il primo endpoint REST con API Routes
• 02. Integrazione traduzioni con Azure Cognitive Services
11. CREAZIONE BACKOFFICE e CMS con tool di terze parti
• 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)
12. REAL-WORLD APP: SVILUPPO DI UNA LANDING PAGE
• 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)
13. REAL-WORLD APP: CREARE UN BLOG con STRAPI
• 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)
Novità 2023
Next v.13: nuove API e funzionalità
Questo mini corso di un'ora, realizzato a giugno 2023, include una panoramica sulle funzionalità introdotte in Next V.13: React Server e Client Components, la cartella 'App Router', nuove strategie per il fetch di dati e gestione stato globale in applicazioni Next
1. Next 13 Fundamentals
Durata: 06:22
01. Create a Next 13 Project
1:52
02. Layout
2:22
03. Google Font
1:00
04. Global CSS e Matadata
1:08
2. App Router
Durata: 07:29
01. Creare una Route / Page in Next 13
1:32
02. Page Metadata
1:26
03. NavigationBar
1:09
04. Nested Routes
1:12
05. Nested Layout
2:10
3. Data Fetching
Durata: 15:03
01. Static Data Fetching
2:48
02. Dynamic Data Fetching Server Side Render
1:14
03. Loading Component
2:04
04. Error Component
2:10
05. Sequential Data Fetch
1:45
06. Parallel Data Fetch
0:41
07. Reusable API
0:51
08. Suspense and Component Loading
3:30
4. Client & Server Components
Durata: 10:47
01. React Server vs Client components - Differences
2:53
02. React Server vs Client components - use cases
1:55
03. Client Component
2:00
04. Server Component
1:10
05. Client Components can contain Server Component
1:32
06. Mix Components
1:17
5. Global State Management
Durata: 13:31
01. Context and useState
4:15
02. Context & useReducer
5:18
03. State Management with Zustand
3:58

BONUS

Incluso nel prezzo un video corso propedeutico su JavaScript ES6 / TypeScript

Argomenti trattati nel corso
JavaScript & TypeScript
JavaScript ES6 Fundamentals
• 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)
Manipolazione dati e immutabilità
• 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)
imports and modules
• 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)
Async & Promise: by Andrea Simone Costa
• Promises (8:39)
• Fetch: comunicazione con il server (2:53)
• Async Await (2:31)
TypeScript: fundamentals
• 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)

Estratto dal corso

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 sarà creato sfruttando la Static Generation offerta da NextJS.

Acquista il corso

Accedi al materiale dove e quando vuoi... per sempre!

Multi Licenza

50
+ iva
/utente
  • Stessi vantaggi del piano Standard

  • Prezzo scontato per 5 o più utenti

  • Report / Progress per singolo utente

Il più venduto!

Singolo Utente

89 + iva
  • Corso Next Fundamentals
    (135 video | 10+ ore)
  • Mini Corso Next V.13
    (26 video | 1 ora)
  • Corso JavaScript / TypeScript
    (30 video | 3+ ore)
  • 15 gg soddisfatto o rimborsato
Hai bisogno della fattura?
Devi inserire i dati in fase di acquisto cliccando il checkbox "Add a business tax ID" o non sarà più possibile richiederla

FAQ

Ho qualche dubbio che il corso faccia al caso mio. Posso contattarti?
Certo, puoi scrivermi tramite il Form di Contatto
È possibile fruire il corso simultaneamente su device?
Gli accessi simultanei alla piattaforma da diversi IP verranno bloccati. Nel caso fossi interessato all’acquisto di più di una licenza d’uso sono previsti degli sconti.
Contattami per ulteriori info.
È previsto un rimborso nel caso non fossi soddisfatto?
Sono sicuro che apprezzerai i contenuti del corso ma se non fossi soddisfatto potrai comunque essere rimborsato totalmente entro 15 giorni dall'acquisto
Posso ricevere la fattura?
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.
L'iva viene applicata? La fattura è inviata da un'azienda americana
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
La possibilità di visionare il corso è limitata nel tempo?
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.
Dubbi e Domande?
Scrivimi in privato su LinkedIn o utilizza l'apposito form di contatto
Dove posso seguirti per ulteriori aggiornamenti?
Sono presente su tutti i principali social network. Trovi i link nel footer.
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter
☠️ PIRATERIA : hai visto il mio corso replicato su qualche piattaforma oppure la tua azienda condivide l'account tra più studenti?
Per favore inviami una segnalazione compilando il Form di contatto
Keep updated about latest content
videos, articles, tips and news
BETA