كيفية التحقق من صحة معاملات اللغة في عناوين URL في Next.js (Pages Router) v16

المشكلة

عندما تصبح رموز اللغات جزءًا من بنية عنوان URL، فإنها تتحول إلى مدخلات مستخدم يجب التحقق من صحتها. يمكن للزائر كتابة /xx/about أو /gibberish/contact بنفس سهولة كتابة لغة صالحة مثل /en/about. بدون التحقق من الصحة، قد يتعطل التطبيق أو يعرض محتوى معطلاً أو يظهر رسائل خطأ مربكة. يحتاج المستخدمون الذين يواجهون عناوين URL بلغات غير صالحة إلى مسار واضح للمضي قدمًا - إما من خلال إعادة التوجيه إلى لغة صالحة أو استجابة "غير موجود" مناسبة تساعدهم على فهم ما حدث من خطأ.

الحل

تحقق من صحة معاملات اللغة الواردة مقابل قائمة اللغات المدعومة قبل أن يصل الطلب إلى مكونات الصفحة. استخدم middleware في Next.js لاعتراض الطلبات، والتحقق مما إذا كانت اللغة في عنوان URL تطابق قيمة مدعومة، والاستجابة بشكل مناسب. بالنسبة للغات غير الصالحة، أعد توجيه المستخدم إلى اللغة الافتراضية أو أعد كتابة الطلب لعرض صفحة 404. يضمن هذا أن رموز اللغات الصالحة فقط تستمر في عرض المحتوى، بينما يتم التعامل مع الرموز غير الصالحة بشكل سلس دون كسر تجربة المستخدم.

الخطوات

1. تحديد اللغات المدعومة في إعدادات Next.js

قم بتكوين إعدادات i18n في next.config.js للإعلان عن اللغات التي يدعمها تطبيقك وأي لغة تعمل كلغة افتراضية.

module.exports = {
  i18n: {
    locales: ["en", "fr", "de"],
    defaultLocale: "en",
    localeDetection: false,
  },
};

تعيين localeDetection إلى false يمنع عمليات إعادة التوجيه التلقائية بناءً على تفضيلات المتصفح، مما يمنحك التحكم الكامل في التعامل مع اللغات.

2. إنشاء middleware للتحقق من صحة معاملات اللغة

أنشئ ملف middleware.ts في جذر مشروعك أو داخل مجلد src إذا كنت تستخدم واحدًا.

import { NextRequest, NextResponse } from "next/server";

const SUPPORTED_LOCALES = ["en", "fr", "de"];
const DEFAULT_LOCALE = "en";

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  const pathnameHasLocale = SUPPORTED_LOCALES.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
  );

  if (!pathnameHasLocale) {
    return;
  }

  const localeInPath = pathname.split("/")[1];

  if (!SUPPORTED_LOCALES.includes(localeInPath)) {
    const url = request.nextUrl.clone();
    url.pathname = pathname.replace(`/${localeInPath}`, `/${DEFAULT_LOCALE}`);
    return NextResponse.redirect(url);
  }
}

export const config = {
  matcher: ["/((?!_next|api|favicon.ico|.*\\..*).*)"],
};

تستخرج الوسيطة اللغة من مسار عنوان URL، وتتحقق منها مقابل مصفوفة اللغات المدعومة، وتعيد توجيه اللغات غير الصالحة إلى اللغة الافتراضية مع الحفاظ على بقية المسار.

3. معالجة اللغات غير الصالحة باستجابة 404

إذا كنت تفضل عرض صفحة 404 بدلاً من إعادة التوجيه، أعد كتابة الطلب إلى صفحة 404 المخصصة.

import { NextRequest, NextResponse } from "next/server";

const SUPPORTED_LOCALES = ["en", "fr", "de"];

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  const pathnameHasLocale = SUPPORTED_LOCALES.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
  );

  if (!pathnameHasLocale) {
    return;
  }

  const localeInPath = pathname.split("/")[1];

  if (!SUPPORTED_LOCALES.includes(localeInPath)) {
    const url = request.nextUrl.clone();
    url.pathname = "/404";
    return NextResponse.rewrite(url);
  }
}

export const config = {
  matcher: ["/((?!_next|api|favicon.ico|.*\\..*).*)"],
};

أنشئ صفحة 404 مخصصة في pages/404.js والتي يتم إنشاؤها بشكل ثابت في وقت البناء.

4. إنشاء صفحة 404 مخصصة

export default function Custom404() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
}

تُعرض هذه الصفحة عندما تعيد الوسيطة كتابة طلبات اللغة غير الصالحة، مما يوفر للمستخدمين رسالة واضحة بأن عنوان URL المطلوب غير متاح.