Next.js 8.1 ist da

AMP in Next.js 8.1 integriert: AMP-Seiten mit React erstellen
Keine Kommentare

AMP ist inzwischen ein weit verbreitetes Format für die Darstellung von Websites auf Mobilgeräten. Mit Next.js 8.1 ist nun eine direkte Integration des Formats in das JavaScript-Framework erfolgt, die Entwicklern die Arbeit an AMP-Seiten erleichtern soll.

AMP breitet sich immer weiter aus. Nach den klassischen mobilen Seiten ist das Format nun auch für die Gestaltung von E-Mails verfügbar. Dazu wurde die HTML-Variante in Gmail integriert und soll auf Outlook.com eingeführt werden. Und nicht nur das: Auch in der JavaScript-Welt scheint AMP auf dem Vormarsch zu sein. So wurde AMP nun in die neuste Version des JavaScript-Frameworks Next.js implementiert, das zusammen mit React genutzt wird.

AMP in Next.js 8.1

Mit Next.js 8.1 ist es nun möglich, AMP-Pages direkt aus React-Komponenten zu erstellen. Dazu kann zwischen AMP-first und hybriden Seiten gewählt werden. Die Entwickler von Next.js haben sich für eine seitenbasierte Integration von AMP entschieden. So könne AMP inkrementell in Projekte eingeführt werden, statt gleich einen gesamten Webauftritt umbauen zu müssen.

Um eine hybride AMP-Seite zu erstellen, die für die Anzeige in Suchergebnissen genutzt wird, muss folgender Code in eine bestehende Seite eingefügt werden:

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

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

In diesem Fall wird weiterhin das klassische HTML für den direkten Website-Traffic genutzt und nur um eine AMP-Version ergänzt. Um zu markieren, dass die erzeugte AMP-Seite das primäre Ziel für alle Websitenutzer darstellen soll, wird { hybrid: true } weggelassen. Auch innerhalb von React-Komponenten kann eine Differenzierung zwischen dem AMP-Modus und klassischem Rendering vorgenommen werden.

Next.js 8.1 bringt darüber hinaus einen Validator für AMP Pages mit. Mit dem Tool wird bereits während der Entwicklung geprüft, ob das HTML validen AMP-Code darstellt. Auch beim Export erfolgt noch einmal ein solcher Test. Werden hier Fehler gefunden, wird der Export abgebrochen.

Weitere Informationen zur Integration von AMP in Next.js 8.1 können dem Blogpost zum Release entnommen werden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -