נגישות ב-Next.js: הסקריפט בפריסת השורש

אתר Next.js הוא לא עמוד HTML אחד. אם מדביקים את הסקריפט בתוך קומפוננטה של עמוד, מעבר בין מסלולים עלול לטעון אותו שוב. Negish צריך להיטען פעם אחת מהפריסה שעוטפת את כל האתר. אתר סטטי בלי Next נשאר במדריך ה-HTML. אפליקציית Vite בלי Next נמצאת במדריך React.

חשוב: הסרגל מתאים את התצוגה לגולש. הוא אינו מחליף הנגשה בקוד, בדיקה מקצועית או הצהרת נגישות, ואינו מבטיח עמידה בת״י 5568 או ב-WCAG.

App Router

ב-app/layout.tsx, בתוך body, אחרי התוכן:

import Script from "next/script";

<Script
  src="הכתובת-המלאה-מתוך-האזור-האישי/widget.js"
  data-site="המפתח-האישי"
  strategy="afterInteractive"
/>

מעתיקים את הכתובת והמפתח מהאזור האישי, לא מהדוגמה הזו. strategy="afterInteractive" קרוב ל-defer: העמוד לא מחכה לסקריפט כדי להציג תוכן. לא שמים את הרכיב ב-head דרך next/head ישן, ולא בתוך template.tsx שנוצר מחדש בניווט אם אתם לא בטוחים שהוא רץ פעם אחת. פריסת השורש היא המקום.

Pages Router

ב-pages/_app.tsx אפשר להשתמש באותו next/script. לא ב-_document בתוך עמוד ספציפי. אם יש גם app וגם pages באותו פרויקט, מוודאים שהסקריפט לא הוגדר בשניהם.

מה הפריסה לא פותרת

דיאלוג שנכתב כ-div בלי מלכודת פוקוס, תפריט שנסגר רק בלחיצה בחוץ, ותמונות next/image עם alt ריק כשיש בהן מידע. הסרגל לא רואה את קוד הריאקט שלכם ולא מוסיף שמות. אחרי הגדלת טקסט בודקים שהפריסה לא חותכת כפתור קבוע. מטא-נתונים ושפת המסמך נקבעים ב-html lang. אם השפה אנגלית באתר עברי, נועלים את שפת הסרגל לעברית לפי מדריך העברית.

מדיניות CSP ב-Next, אם הגדרתם כותרות, צריכה להתיר את מקור הסקריפט. בלי זה הכפתור לא יופיע והמסוף יראה חסימה.

פריסה, מטמון, ומדיניות תוכן

הרכיב Script בפריסת השורש נטען פעם אחת. אם אחרי מעבר מסלול מופיע כפתור שני, הסקריפט יושב בקומפוננטה של עמוד או ב-template שנבנה מחדש. מעבירים אותו ל-layout. לא עוטפים אותו ב-use client רק בשבילו. ב-Pages Router המקום הוא _app, לא עמוד בודד, ולא פעמיים אם גם app קיים.

כותרות אבטחה ב-Next חוסמות מקור שלא הותר. מוסיפים את הדומיין של הווידג'ט. lang על תגית ה-html קובע את מצב השפה האוטומטי. אתר עברי עם lang אנגלי יפתח סרגל אנגלי עד שתתקנו או תנעלו שפה. דיאלוגים ותפריטים בקוד שלכם נשארים לתיקון. הסרגל לא רואה את הקומפוננטות.

מעבר מסלול ורענון

עוברים בין שני מסלולים וסופרים כפתורים. אחד הוא התוצאה הנכונה. שניים אומרים שהסקריפט לא בפריסת השורש. מרעננים את העמוד ובודקים שהבחירה בסרגל נשארה. אחר כך בודקים lang על ה-html. אתר עברי שמסומן באנגלית יקבל סרגל אנגלי במצב אוטומטי.

דיאלוג שנכתב אצלכם נבדק בנפרד: פתיחה, סגירה, החזרת פוקוס. הסרגל לא יתקן אותו. אם יש CSP, מוסיפים את מקור הסקריפט לפני שמחפשים באג בקומפוננטה.

לפני שמאשימים את הקומפוננטה

בודקים שלושה דברים בסדר הזה: הסקריפט יושב רק בפריסת השורש, אין עותק שני ב-_app אם יש גם תיקיית app, ומדיניות האבטחה מתירה את המקור. רק אחר כך מחפשים באג בקומפוננטה. מעבר בין מסלולים שמייצר כפתור נוסף הוא סימן למיקום לא נכון, לא סימן שצריך עוד עותק. שפת המסמך על תגית ה-html נבדקת באותו מעבר.

שאלות נפוצות

שני כפתורים אחרי מעבר עמוד

הסקריפט מחובר לקומפוננטה שנבנית שוב. מעבירים אותו לפריסת השורש בלבד.

האם צריך "use client" מסביב ל-Script?

לא. הרכיב Script של Next עובד בפריסת שרת. אין צורך במעטפת לקוח רק בשבילו.

החובה על האתר, אם היא חלה, נשארת במאמר החובה. הרשמה וקבלת מפתח.

חשוב: הסרגל מתאים את התצוגה לגולש. הוא אינו מחליף הנגשה בקוד, בדיקה מקצועית או הצהרת נגישות, ואינו מבטיח עמידה בת״י 5568 או ב-WCAG.