Il corso include:

Performance & SEO

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

3d party libraries

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

TypeScript

L'unica risorsa italiana che descrive NextJS con l'utilizzo di TypeScript allo scopo di creare codice più solido e type-safed

Next v.13

5 capitoli dedicati alle ultime novità introdotte in Next V.13

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

Un corso adatto a principianti ed esperti che avranno la possibilità di apprendere tutti i segreti del framework

Amazing Technologies

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

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

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'è Next e perché 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, accessibilità 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 proprietà (2:57)

• 05. tailwind.config.ts: configurazione hostname per caricamento immagini (1:30)

• 06. InferGetServerSidePropsType - Tipizzare le proprietà 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