M

MLOG

العربية

استكشف تصديرات Next.js الثابتة للتطبيقات التي تعمل من جانب العميل فقط. تعرف على الفوائد والقيود والإعداد والتقنيات المتقدمة لإنشاء تجارب ويب سريعة وآمنة ومتاحة عالميًا.

تصديرات Next.js الثابتة: بناء تطبيقات من جانب العميل فقط

Next.js هو إطار عمل React قوي يمكّن المطورين من بناء تطبيقات ويب عالية الأداء وقابلة للتطوير وصديقة لمحركات البحث. بينما يشتهر Next.js بقدراته على التصيير من جانب الخادم (SSR) وتوليد المواقع الثابتة (SSG)، فإنه يوفر أيضًا المرونة لإنشاء تطبيقات من جانب العميل فقط باستخدام التصديرات الثابتة. يتيح لك هذا النهج الاستفادة من مزايا أدوات وهيكلية Next.js أثناء نشر تطبيق من جانب العميل بشكل بحت. سيرشدك هذا المقال عبر كل ما تحتاج لمعرفته حول بناء تطبيقات من جانب العميل فقط باستخدام تصديرات Next.js الثابتة، مغطيًا المزايا والقيود وعملية الإعداد والتقنيات المتقدمة.

ما هي تصديرات Next.js الثابتة؟

تشير التصديرات الثابتة في Next.js إلى عملية توليد نسخة ثابتة بالكامل من تطبيقك أثناء عملية البناء. هذا يعني أن جميع ملفات HTML و CSS و JavaScript يتم تصييرها مسبقًا وتكون جاهزة للتقديم مباشرة من خادم ملفات ثابت (على سبيل المثال، Netlify، Vercel، AWS S3، أو خادم ويب تقليدي). على عكس التطبيقات المصيرة من جانب الخادم، لا يوجد خادم Node.js مطلوب لمعالجة الطلبات الواردة. بدلاً من ذلك، يتم تسليم التطبيق بأكمله كمجموعة من الأصول الثابتة.

عند استهداف تطبيق من جانب العميل فقط، يقوم Next.js بتوليد هذه الأصول الثابتة مع افتراض أن كل السلوك الديناميكي سيتم التعامل معه بواسطة JavaScript من جانب العميل. هذا مفيد بشكل خاص لتطبيقات الصفحة الواحدة (SPAs) التي تعتمد بشكل أساسي على التوجيه من جانب العميل، واستدعاءات API، وتفاعلات المستخدم.

لماذا تختار التصديرات الثابتة للتطبيقات من جانب العميل؟

يوفر بناء تطبيقات من جانب العميل باستخدام تصديرات Next.js الثابتة العديد من المزايا المقنعة:

قيود التصديرات الثابتة

بينما توفر التصديرات الثابتة فوائد عديدة، من المهم أن تكون على دراية بقيودها:

إعداد Next.js للتصديرات الثابتة

إليك دليل خطوة بخطوة حول كيفية إعداد Next.js للتصديرات الثابتة:

1. إنشاء مشروع Next.js جديد

إذا لم يكن لديك مشروع Next.js بالفعل، فأنشئ واحدًا باستخدام الأمر التالي:

npx create-next-app my-client-app

اختر الخيارات التي تناسب احتياجاتك أثناء عملية الإعداد (على سبيل المثال، TypeScript، ESLint).

2. تكوين `next.config.js`

افتح ملف `next.config.js` في جذر مشروعك وأضف التكوين التالي:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // see https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig

يخبر الخيار `output: 'export'` Next.js بتوليد تصدير ثابت لتطبيقك. يوصى عمومًا بتعيين `trailingSlash: true` لضمان بنية URL متسقة وتجنب مشكلات تحسين محركات البحث المحتملة.

3. تحديث `package.json`

عدّل قسم `scripts` في ملف `package.json` الخاص بك لتضمين سكربت بناء للتصديرات الثابتة:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  }
}

سيقوم هذا السكربت أولاً ببناء تطبيق Next.js الخاص بك ثم تصديره إلى دليل ثابت.

4. تنفيذ التوجيه من جانب العميل

بما أنك تبني تطبيقًا من جانب العميل، ستحتاج إلى تنفيذ التوجيه من جانب العميل باستخدام وحدة `next/router` أو مكتبة خارجية مثل `react-router-dom`. إليك مثال باستخدام `next/router`:

import { useRouter } from 'next/router';
import Link from 'next/link';

function HomePage() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page!</p>
      <button onClick={handleClick}>Go to About Page</button>

      <Link href="/about">
         <a>Go to About Page (using Link)</a>
      </Link>
    </div>
  );
}

export default HomePage;

تذكر استخدام مكون `Link` من `next/link` للتنقل الداخلي لضمان انتقالات سلسة من جانب العميل.

5. التعامل مع جلب البيانات من جانب العميل

في تطبيق من جانب العميل، يجب أن تتم جميع عمليات جلب البيانات على جانب العميل باستخدام تقنيات مثل خطافات `useEffect` أو `useState`. على سبيل المثال:

import { useState, useEffect } from 'react';

function DataPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!data) return <p>No data to display</p>;

  return (
    <div>
      <h1>Data Page</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;

6. بناء وتصدير تطبيقك

قم بتشغيل سكربت البناء لتوليد التصدير الثابت:

npm run build

سيؤدي هذا إلى إنشاء دليل `out` (أو `public` حسب إصدار Next.js) يحتوي على ملفات HTML و CSS و JavaScript الثابتة لتطبيقك.

7. نشر موقعك الثابت

يمكنك الآن نشر محتويات دليل `out` إلى مزود استضافة ثابت مثل Netlify أو Vercel أو AWS S3 أو GitHub Pages. يقدم معظم المزودين نشرًا بسيطًا بالسحب والإفلات أو أدوات سطر أوامر لأتمتة العملية.

تقنيات متقدمة لتطبيقات Next.js من جانب العميل

إليك بعض التقنيات المتقدمة لتحسين تطبيقات Next.js من جانب العميل:

1. تقسيم الكود والتحميل الكسول

استخدم الاستيراد الديناميكي (`import()`) لتقسيم الكود الخاص بك إلى أجزاء أصغر يتم تحميلها عند الطلب. يمكن أن يؤدي هذا إلى تحسين أوقات التحميل الأولية بشكل كبير، خاصة للتطبيقات الكبيرة.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

2. تحسين الصور

استخدم مكون `next/image` لتحسين الصور. يقوم هذا المكون تلقائيًا بتحسين الصور للأجهزة وأحجام الشاشات المختلفة، مما يحسن الأداء وتجربة المستخدم. يدعم التحميل الكسول، والصور المتجاوبة، وتنسيقات الصور المختلفة.

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="My Image"
      width={500}
      height={300}
    />
  );
}

3. Service Workers

قم بتنفيذ service worker لتمكين الوظائف في وضع عدم الاتصال بالإنترنت وتحسين الأداء. الـ service worker هو سكربت يعمل في الخلفية ويمكنه اعتراض طلبات الشبكة وتخزين الأصول مؤقتًا ودفع الإشعارات. يمكن لمكتبات مثل `next-pwa` تبسيط عملية إضافة service worker إلى تطبيق Next.js الخاص بك.

4. متغيرات البيئة

استخدم متغيرات البيئة لتكوين تطبيقك لبيئات مختلفة (مثل التطوير، والمرحلة التجريبية، والإنتاج). يوفر Next.js دعمًا مدمجًا لمتغيرات البيئة من خلال ملف `.env` وكائن `process.env`. كن حذرًا من عدم كشف معلومات حساسة في كود جانب العميل. استخدم متغيرات البيئة بشكل أساسي لإعدادات التكوين التي تكون آمنة للكشف.

5. المراقبة والتحليلات

ادمج خدمة مراقبة وتحليلات (مثل Google Analytics، Sentry، أو New Relic) لتتبع مقاييس الأداء وتحديد الأخطاء والحصول على رؤى حول سلوك المستخدم. سيساعدك هذا على تحسين تطبيقك وتحسين تجربة المستخدم بمرور الوقت.

6. التحسين لمحركات البحث في تطبيقات جانب العميل

بينما توفر التصديرات الثابتة بنية HTML أولية، ضع في اعتبارك هذه الاستراتيجيات لتحسين محركات البحث في التطبيقات التي تعتمد بشكل كبير على جانب العميل:

اعتبارات التدويل (i18n)

عند بناء تطبيق من جانب العميل لجمهور عالمي، يعد التدويل (i18n) أمرًا بالغ الأهمية. إليك بعض أفضل الممارسات:

اختيار النهج الصحيح: التصدير الثابت مقابل التصيير من جانب الخادم

يعتمد قرار استخدام التصديرات الثابتة أو التصيير من جانب الخادم على المتطلبات المحددة لتطبيقك. ضع في اعتبارك العوامل التالية:

أمثلة من العالم الحقيقي

إليك بعض الأمثلة من العالم الحقيقي للتطبيقات التي يمكن أن تستفيد من تصديرات Next.js الثابتة:

مثال: موقع شركة دولية

تخيل شركة لها مكاتب في نيويورك ولندن وطوكيو. يريدون موقعًا إلكترونيًا متاحًا باللغات الإنجليزية والفرنسية واليابانية. يمكن أن يكون تصدير Next.js الثابت، مع نظام إدارة محتوى بدون رأس ومكتبات i18n، مثاليًا. سيقوم نظام إدارة المحتوى بتخزين المحتوى المترجم، وسيقوم Next.js بجلبه وتصييره من جانب العميل، ويمكن نشر الموقع الثابت عالميًا على شبكة توصيل المحتوى (CDN) للوصول السريع.

الخاتمة

توفر تصديرات Next.js الثابتة طريقة قوية لبناء تطبيقات من جانب العميل فقط مع الاستفادة من مزايا إطار عمل Next.js. من خلال فهم المزايا والقيود وعملية الإعداد والتقنيات المتقدمة، يمكنك إنشاء تجارب ويب سريعة وآمنة ومتاحة عالميًا تلبي متطلباتك المحددة. سواء كنت تبني صفحة هبوط بسيطة أو تطبيق صفحة واحدة معقدًا، يمكن أن تكون التصديرات الثابتة أداة قيمة في ترسانة تطوير الويب الخاصة بك.