ANLEITUNG FÜR NEXT.JS

Next.js
barrierefrei machen.

So baust du das Barrierefreiheits-Menü von barrierex in Next.js ein: Schritt für Schritt, mit 20-Sekunden-Video und ehrlichen Hinweisen, was Next.js erlaubt.

35 Anleitungen35 kurze KlickvideosOhne externe Video-Embeds

Next.jsScript-Einbindung

Quellen geprüft
2026-10-29

Vor dem Einbau kurz prüfen

Einbindung im gemeinsamen Layout. Nicht jede Version oder Hostingkonfiguration wurde live getestet. Mit next/script und afterInteractive nach der Hydration laden.

Deine 20-Sekunden-AnleitungStumm · mit Untertiteln

Eigene schematische Klickanleitung, keine Originalaufnahme des Anbieter-Dashboards. Bezeichnungen können je Tarif, Sprache oder Editor-Version abweichen.

SCHRITT FÜR SCHRITT

So verbindest du Next.js

Widget herunterladen

Lade barrierex-widget.js herunter. Die Datei benötigt keine Zugangsdaten und kommuniziert nicht mit einem barrierex-Dienst.

public/barrierex-widget.js

Lege barrierex-widget.js unter public/barrierex-widget.js ab. Der Browser muss die Datei über die eigene Domain laden können.

app/layout.tsx

Öffne app/layout.tsx und füge den für Next.js erzeugten Code einmal in das gemeinsame Layout ein.

Veröffentlichen & prüfen

Baue und veröffentliche deine Website. Prüfe die Lesehilfe auf zwei Unterseiten und bei Tastaturnavigation. Nutze anschließend den Installationscheck.

PASSEND ZU DEINER WEBSITE

Dein Einbaupaket.

DarstellungPositionAkzentfarbe

#7051e8

Datei nach public/barrierex-widget.js kopieren. Bei Unterpfad-Deployments den Assetpfad anpassen.

Framework-Code

// app/layout.tsx – im bestehenden Root-Layout ergänzen
import BarrierexScript from 'next/script';

// Innerhalb von <body>, nach {children}:
<BarrierexScript src="/barrierex-widget.js" strategy="afterInteractive"
  data-mode="floating" data-color="#7051e8" data-position="right" />

Widget-Datei Lokales npm-Paket Automatischer Installer

Ohne manuelles Editieren installieren

Installer-ZIP entpacken und lokal ausführen. Zuerst wird nur eine Vorschau angezeigt; --apply legt ein Backup an und schreibt die erkannte Integration. Es werden keine Zugangsdaten abgefragt oder Dateien hochgeladen.

node install.mjs --project /pfad/zum/projekt
node install.mjs --project /pfad/zum/projekt --apply

Automatisch unterstützt: eindeutige HTML-/Vite-Layouts und Next.js App-Router-Layouts. Bei unbekannten Strukturen bleibt das Projekt unverändert.

DER LETZTE SCHRITT

Ist dein Script angekommen?

Prüfe die veröffentlichte Seite. Wir suchen das Script im HTML und testen, ob die Datei erreichbar ist.

Die URL wird nicht gespeichert. Dieser Check ist kein Barrierefreiheitsnachweis.

Direkt zur Herstellerdokumentation

Menüpfade und Einschränkungen wurden aus öffentlichen Herstellerquellen recherchiert. Es wurden keine Installationen in fremden Kundenkonten vorgenommen.

Next.js: Quelle 1

NICHT SICHER, WAS DAHINTERSTECKT?

Deine URL reicht
für einen ersten Hinweis.

Die Erkennung ist ein Vorschlag aus öffentlichen HTML-Merkmalen. Bitte bestätige die Plattform, bevor du etwas einbaust.

Next.jsbarrierefrei machen.