JavaScript: Next.js 8.1 lernt AMP

Das Framework für serverseitig gerenderte React-Anwendungen bietet im neuen Release Funktionen zum Erstellen von AMP-Websites.

In Pocket speichern vorlesen Druckansicht 2 Kommentare lesen
JavaScript: Next.js 8 zielt auf Serverless Computing
Lesezeit: 2 Min.
Von
  • Matthias Parbel

Die Macher von Next.js haben Version 8.1 des Frameworks zum Erstellen serverseitiger Anwendungen mit React vorgelegt. Während im vorangegangenen Major Release der Serverless-Modus im Fokus stand, mit dem Entwickler Anwendungen für Serverless Computing erstellen können, ist die Implementierung von AMP die zentrale Neuerung im nun herausgegebenen Update.

Als eine strengere Version von HTML ist AMP darauf ausgelegt, Websites mit verlässlicherer Performance und besserer Skalierbarkeit zu versehen. Google macht sich diese Vorteile unter anderen beim Laden von Websites in die Ergebnislisten seiner mobilen Suche zu Nutze. Um die AMP-Seiten dabei schneller rendern zu können, greifen Suchmaschinen wie Google oder Bing in der Regel auf einen dedizierten AMP Cache zurück.

Die Unterstützung für AMP in Next.js ist für einzelne Websites ausgelegt, sodass Entwickler AMP Schritt für Schritt in ihrer Projekt integrieren können. Dabei stehen zwei Ansätze zur Verfügung: hybride AMP-Seiten, die einer klassischen HTML-Page eine AMP-Version zur Seite stellen, und die sogenannten AMP-first-Seiten. Die hybride Vorgehensweise empfiehlt sich beispielsweise für bereits existierende Websites, die um eine AMP-Version für das Ausspielen auf Mobilgeräten ergänzt werden sollen – etwa im Fall von Mobile Search. Auf der Standardseite bleiben dabei typische Next.js-Funktionen wie Client-side Routing erhalten. Um eine AMP-Page einzubinden, nutzen Entwickler die Funktion withAmp mit der Option hybrid: true:

// pages/index.js
function HomePage() {
return <p>Welcome to AMP + Next.js.</p>
}

export default withAmp(HomePage, { hybrid: true })

Alternativ lassen sich Websites mit withAmp auch generell als AMP-First Pages anlegen, um von deren Vorteilen auch für Desktop-Browser profitieren zu können. Sind Anwender in ihrem Projekt nicht auf die Next.js Runtime angewiesen, lässt sich mit AMP-First gegebenenfalls die Entwicklung insgesamt beschleunigen. Allerdings dürfen dann zum Bau der Website nur AMP-kompatible Komponenten verwendet werden. Als Beispiele für AMP-First Pages im produktiven Einsatz dienen der Next.js-Blog sowie die Dokumentationswebseiten.

Weitere Informationen zum Erstellen von AMP-Seiten mit Next.js lassen sich dem NextJS-Blog entnehmen. Der unter MIT-Lizenz veröffentlichte Sourcecode findet sich auf GitHub. Eine Kurzanleitung auf der Projektsite hilft bei den ersten Schritten mit Next.js und AMP. (map)