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

ملاحظة: إذا كنت تتطلع إلى تحويل تطبيق React.js إلى Next.js بدلاً من ذلك، فراجع مقالتي الأخرى حول كيفية تحويل React.js إلى Next.js.

لماذا تحويل Next.js إلى React.js؟

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

فهم الاختلافات

قبل الغوص في عملية التحويل، من الضروري فهم الاختلافات الرئيسية بين Next.js وReact.js:

• العرض من جانب الخادم مقابل العرض من جانب العميل: يدعم Next.js SSR وSSG، في حين أن React.js مخصص بشكل أساسي للمسؤولية الاجتماعية للشركات.
• التوجيه: يحتوي Next.js على نظام توجيه مدمج قائم على الملفات. في React.js، ستحتاج إلى استخدام مكتبة مثل React Router.
• مسارات واجهة برمجة التطبيقات: يسمح لك Next.js بإنشاء مسارات واجهة برمجة التطبيقات داخل نفس المشروع. في React.js، يمكنك عادةً فصل الواجهة الأمامية والخلفية.

خطوات تحويل Next.js إلى React.js

لنبدأ بالدليل التفصيلي حول كيفية تحويل تطبيق Next.js إلى React.js.

1. قم بإعداد تطبيق React.js جديد

أولاً، قم بإنشاء مشروع React.js جديد باستخدام أداة مثل إنشاء تطبيق React (CRA) أو Vite.

استخدام إنشاء تطبيق React:

npx create-react-app my-react-app
cd my-react-app

استخدام فايت:

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

2. نقل التبعيات

انسخ التبعيات وتبعيات التطوير من package.json الخاص بمشروع Next.js إلى package.json الخاص بمشروع React.js الجديد. قم بتشغيل تثبيت npm أو تثبيت الغزل لتثبيتهما.

3. ترحيل المكونات والصفحات

انسخ محتويات مكونات Next.js وأدلة الصفحات إلى دليل src الخاص بمشروع React.js. نظرًا لأن Next.js يستخدم دليل الصفحات للتوجيه، فستحتاج إلى تعديل هذه البنية.

4. تنفيذ التوجيه باستخدام React Router

يعالج Next.js التوجيه تلقائيًا بناءً على دليل الصفحات. في React.js، ستحتاج إلى إعداد التوجيه يدويًا.

تثبيت جهاز التوجيه React:

npm install react-router-dom

إعداد المسارات في src/App.js:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
// Import other components as needed

function App() {
  return (
    } />
        } />
        {/* Add other routes */}
      
  )
}

export default App

5. ضبط طرق جلب البيانات

في Next.js، يتم جلب البيانات باستخدام getServerSideProps، أو getStaticProps، أو getInitialProps. في React.js، ستحتاج إلى التعامل مع جلب البيانات داخل مكوناتك، عادةً باستخدام useEffect وuseState.

مثال:

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data') // Update the API endpoint as needed
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [])

  return 
{/* Render your data */}
}

export default Home

6. التعامل مع مسارات API

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

خيارات:

• إنشاء واجهة خلفية منفصلة: استخدم Node.js أو Express أو أي إطار عمل خلفي لإعداد نقاط نهاية واجهة برمجة التطبيقات.
• استخدام واجهات برمجة التطبيقات الخارجية: إذا أمكن، قم بضبط الواجهة الأمامية لاستهلاك واجهات برمجة التطبيقات الخارجية مباشرة.

7. تحديث متغيرات البيئة

يستخدم Next.js متغيرات البيئة مسبوقة بـ NEXT_PUBLIC_ للمتغيرات من جانب العميل. في React.js، أنشئ ملف .env في جذر مشروعك وأضف المتغيرات البادئة باستخدام REACT_APP_.

مثال:

REACT_APP_API_URL=https://api.example.com

يمكنك الوصول إليها في التعليمات البرمجية الخاصة بك باستخدامprocess.env.REACT_APP_API_URL.

8. قم بإزالة التكوينات المحددة لـ Next.js

احذف أي تكوينات محددة لـ Next.js مثل next.config.js. قم أيضًا بإزالة أي عمليات استيراد أو حزم خاصة بـ Next.js لم تعد هناك حاجة إليها.

9. اختبر طلبك

قم بتشغيل تطبيق React.js للتأكد من أن كل شيء يعمل كما هو متوقع.

npm start

راجع كل مسار ووظيفة للتحقق من نجاح التحويل.

خاتمة

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

باتباع هذا الدليل حول كيفية تحويل Next.js إلى React.js، يجب أن يكون لديك انتقال سلس.

شكرا على القراءة! إذا كنت مهتمًا بالعكس، فراجع مقالتي حول كيفية تحويل تطبيق React.js إلى Next.js. لمزيد من التحديثات حول المشاريع أو المقالات الجديدة، تابعني على تويتر: @jake_prins.