Supporto Amplify per Next.js

Amplify supporta la distribuzione e l'hosting di app web renderizzate SSR () lato server create utilizzando Next.js. Next.js è un framework React con cui sviluppare. SPAs JavaScript Puoi distribuire app create con Next.js 14 con funzionalità come l'ottimizzazione delle immagini e il middleware.

Gli sviluppatori possono utilizzare Next.js per combinare la generazione di siti statici (SSG) e SSR in un unico progetto. SSGle pagine vengono prerenderizzate in fase di compilazione e SSR le pagine vengono prerenderizzate al momento della richiesta.

Il prerendering può migliorare le prestazioni e l'ottimizzazione dei motori di ricerca. Poiché Next.js esegue il prerendering di tutte le pagine sul server, il HTML contenuto di ogni pagina è pronto quando raggiunge il browser del client. Inoltre, questo contenuto può essere caricato più velocemente. Tempi di caricamento più rapidi migliorano l'esperienza dell'utente finale con un sito Web e influiscono positivamente sul SEO posizionamento del sito. Il prerendering migliora SEO anche in quanto consente ai bot dei motori di ricerca di trovare e scansionare facilmente i contenuti di un sito Web. HTML

Next.js fornisce un supporto analitico integrato per misurare varie metriche delle prestazioni, come Time to first byte (TTFB) e First contentful paint (). FCP Per ulteriori informazioni su Next.js, consulta Guida introduttiva sul sito Web Next.js.

supporto delle funzionalità Next.js

Amplify Hosting compute gestisce completamente il rendering lato server SSR () per le app create con Next.js 12, 13 e 14. Se hai distribuito un'app Next.js su Amplify prima del rilascio di Amplify Hosting compute, l'app utilizza il provider precedente di Amplify, Classic (solo Next.js 11). SSR Amplify Hosting compute non supporta le app create utilizzando Next.js versione 11 o precedente. Ti consigliamo vivamente di migrare le tue app Next.js 11 al provider di elaborazione gestito Amplify Hosting. SSR

L'elenco seguente descrive le funzionalità specifiche supportate dal provider di elaborazione Amplify HostingSSR.

Funzionalità supportate

• Pagine renderizzate lato server () SSR

• Pagine statiche

• APIpercorsi

• Percorsi dinamici

• Cattura tutti i percorsi

• SSG(Generazione statica)

• Rigenerazione statica incrementale () ISR

• Routing di sottopercorsi internazionalizzato (i18n)

• Routing di domini internazionalizzato (i18n)

• Rilevamento automatico delle impostazioni locali internazionalizzato (i18n)

• Middleware

• Variabili di ambiente

• Ottimizzazione delle immagini

• Directory delle app Next.js 13

Caratteristiche non supportate

• Edge API Routes (il middleware Edge non è supportato)

• Rigenerazione statica incrementale su richiesta () ISR

• Streaming di Next.js

• Esecuzione di middleware su risorse statiche e immagini ottimizzate

Immagini Next.js

La dimensione massima di output di un'immagine non può superare 4,3 MB. È possibile archiviare un file di immagine più grande da qualche parte e utilizzare il componente Next.js Image per ridimensionarlo e ottimizzarlo in un formato Webp o in un AVIF formato e quindi utilizzarlo in una dimensione più piccola.

Si noti che la documentazione di Next.js consiglia di installare il modulo di elaborazione delle immagini Sharp per consentire il corretto funzionamento dell'ottimizzazione delle immagini in produzione. Tuttavia, ciò non è necessario per le implementazioni Amplify. Amplify implementa automaticamente Sharp per te.