Next.js 8.1

Heute freuen wir uns, bekannt zu geben, dass wir die Next.js-Erfahrung auf die Erstellung von AMP-Seiten erweitert haben.

• Was ist AMP?
• AMP in Next.js
• Hybrid-AMP-Seiten
• AMP-First-Seiten
• AMP-Validierung

Was ist AMP?

AMP ist ein Standard für die Erstellung hochleistungsfähiger Websites, der den Rendering-Overhead minimiert und in bekannten Suchmaschinen mit erweitertem Verhalten indexiert werden kann. AMP-Seiten werden beispielsweise direkt in die mobilen Suchergebnisse von Google geladen und durch ein Blitzsymbol gekennzeichnet.

Next.js Google-Suchergebnis

AMP HTML ist eine striktere Version von HTML, die einige Einschränkungen auferlegt, um eine zuverlässigere Leistung und bessere Skalierbarkeit zu erreichen. Einige HTML-Tags werden durch AMP-spezifische HTML-Tags ersetzt, um eine bessere Erfahrung als das entsprechende HTML-Tag zu bieten. Zum Beispiel bietet das amp-img-Tag volle srcset-Unterstützung, selbst in Browsern, die es noch nicht unterstützen.

AMP-Seiten werden automatisch von unterstützenden Suchmaschinen entdeckt. Diese Suchmaschinen implementieren im Allgemeinen einen AMP-Cache (z.B. Google und Bing). AMP-Caches helfen der Seite, schneller aus ihren Suchergebnissen gerendert zu werden.

AMP in Next.js

Heute freuen wir uns, bekannt zu geben, dass wir die Next.js-Erfahrung auf die Erstellung von AMP-Seiten erweitert haben. Das bedeutet, dass Sie jetzt die Leistung von React-Komponenten nutzen können, um AMP-Seiten zu erstellen. Die AMP-Unterstützung wird auf Seitenbasis definiert, was eine schrittweise Einführung von AMP ermöglicht. Es gibt zwei Möglichkeiten, AMP in Next.js zu aktivieren: eine Hybrid-AMP-Seite oder eine AMP-First-Seite.

Hybrid-AMP-Seiten

Hybrid-AMP-Seiten ermöglichen es Ihnen, eine begleitende AMP-Version einer traditionellen Seite zu haben, sodass Suchmaschinen die AMP-Version der Seite in den mobilen Suchergebnissen anzeigen können, während die bestehende Version der Seite erhalten bleibt. Dies ermöglicht die Verwendung von AMP in Ihrer Anwendung, während Sie weiterhin Next.js-Funktionen wie clientseitiges Routing für das Hauptnutzererlebnis nutzen können.

Um sich für eine Hybrid-AMP-Seite anzumelden, verwenden Sie die Funktion withAmp mit der Option hybrid: true:

function HomePage() {
  return <p>Willkommen bei AMP + Next.js.</p>;
}
 
export default withAmp(HomePage, { hybrid: true });

Ein Beispiel für das Hybrid-AMP-Muster, das in der Produktion verwendet wird, ist Reddit. Jeder Thread wird im Google AMP-Cache gespeichert, um eine schnelle Benutzererfahrung im mobilen Web zu bieten, während die Vollversion von Reddit für Desktops und nachfolgende Navigationen erhalten bleibt.

Bild von Reddit, das AMP für bessere SEO nutzt

Bild von Reddit im AMP-Viewer

AMP-First-Seiten

AMP-First-Seiten werden sowohl für den primären Traffic der Website als auch für Suchmaschinen-Traffic bereitgestellt. Durch die Verwendung von AMP-First-Seiten bringen wir das schnelle Erlebnis von AMP auf die Hauptwebsite, einschließlich Desktop.

Um AMP-First-Seiten zu implementieren, umschließen Sie Seiten mit der Funktion withAmp:

import { withAmp } from 'next/amp';
function HomePage() {
  return <p>Willkommen bei AMP + Next.js.</p>;
}
 
export default withAmp(HomePage);

Wenn Sie die Next.js-Laufzeit nicht benötigen, könnte die Verwendung von AMP-First-Seiten die Entwicklung beschleunigen. AMP-First erfordert, dass Sie nur AMP-kompatible Komponenten zum Erstellen Ihrer Seiten verwenden. AMP-First-Seiten werden derzeit in Produktion auf nextjs.org/docs und nextjs.org/blog verwendet.

Unterscheidung des AMP-Renderings in Komponenten

Jede React-Komponente in Ihrem Projekt kann useAmp nutzen, um zwischen AMP- und Nicht-AMP-Rendering-Modus zu unterscheiden. Dies ermöglicht es Ihnen, eine <Image>-Komponente zu implementieren, die Logik zwischen <img> und <amp-img> teilt:

import { useAmp } from 'next/amp';
 
export function Image({ src, width, height }) {
  const isAmp = useAmp();
  return isAmp ? (
    <amp-img src={src} width={width} height={height} />
  ) : (
    <img src={src} width={width} height={height} />
  );
}

import { withAmp } from 'next/amp';
import { Image } from '../components/image';
 
function HomePage() {
  return (
    <>
      <p>Hallo! Willkommen bei AMP + Next.js.</p>
      <Image src="https://placehold.it/120" width="120" height="120" />
    </>
  );
}
 
export default withAmp(HomePage, { hybrid: true });

Automatisches Neuladen für die AMP-Entwicklung

In der Entwicklung verfolgen wir anstelle von Hot-Module-Replacement alle Änderungen an der Seite, auf der Sie sich befinden, und laden die Seite nur neu, wenn sie geändert wurde. Der Grund, warum wir vollständiges Neuladen anstelle von Hot-Module-Replacement verwenden, ist sicherzustellen, dass Sie immer ein frisches Server-seitiges Rendering Ihrer AMP-Seite sehen.

AMP-Validierung

Um sicherzustellen, dass nur gültige AMP-Seiten erzeugt werden, validieren wir sie automatisch mit amphtml-validator während der Entwicklung. Fehler und Warnungen werden im Terminal angezeigt, in dem Sie Next.js gestartet haben.

Seiten werden auch während next export validiert, und alle Probleme werden im Terminal ausgegeben. Jeder AMP-Fehler führt dazu, dass next export fehlschlägt, weil der Export kein gültiges AMP ist.

Lernen Sie, AMP mit Next.js zu verwenden

Zusätzlich zum Erlernen der Verwendung von Next.js haben wir einen neuen Abschnitt hinzugefügt, um zu lernen, wie man AMP in Next.js verwendet.

Alternativ können Sie mit dem AMP-Beispiel beginnen:

npx create-next-app --example amp amp-app