كيفية التحقق من صحة معلمات الإعدادات المحلية في عناوين URL في Next.js (موجه الصفحات) الإصدار 16

المشكلة

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

الحل

التحقق من صحة معلمات اللغة الواردة مقابل قائمة اللغات المدعومة قبل وصول الطلب إلى مكونات الصفحة. استخدم وسيط 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.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 - الصفحة غير موجودة</h1>
      <p>الصفحة التي تبحث عنها غير موجودة.</p>
    </div>
  );
}

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