كيفية نشر تطبيق Next.js على cPanel (الدليل)

تعلم كيفية نشر تطبيق Next.js على cPanel بطريقة سلسة وفعالة. سأوجهك خطوة بخطوة في هذه العملية.

قبل الخوض في التفاصيل ، دعنا نكشف عن ماهية Next.js و cPanel ، فقط في حال كنت جديدًا على هذه المصطلحات.

ما هو Next.js

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

ما هو cPanel

الانتقال إلى cPanel. فكر في الأمر على أنه برنامج يبسط إدارة الخادم. إنه يجلب إلى طاولتك مجموعة من الأدوات. يعد مدير الملفات ومدير قاعدة البيانات ومدير اسم المجال مجرد أمثلة قليلة.

الآن بعد أن كوننا صداقات مع Next.js و cPanel ، فلنبدأ مهمتنا الرئيسية: نشر تطبيق Next.js على cPanel. بافتراض أن لديك تطبيق Next.js ، ومضيف ويب مع cPanel ، واسم مجال مرتبط ، دعنا نمضي قدمًا.

انشر تطبيق Next.js على cPanel

الخطوة 1 : ابدأ بإعداد خادم Next.js مخصص. أنت بحاجة إلى ملف server.js في الدليل الجذر لمشروعك ، معبأ بالشفرة المطلوبة. ابحث عن دليل Next.js الرسمي للحصول على المساعدة.

 const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const hostname = 'localhost' const port = 3000 // when using middleware `hostname` and `port` must be provided below const app = next({ dev, hostname, port }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer(async (req, res) => { try { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { await app.render(req, res, '/a', query) } else if (pathname === '/b') { await app.render(req, res, '/b', query) } else { await handle(req, res, parsedUrl) } } catch (err) { console.error('Error occurred handling', req.url, err) res.statusCode = 500 res.end('internal server error') } }) .once('error', (err) => { console.error(err) process.exit(1) }) .listen(port, () => { console.log(`> Ready on http://${hostname}:${port}`) }) })

الخطوة الثانية : قم بتعديل ملف package.json. هذه الخطوة تجعل البيئة "جاهزة للإنتاج" وتنشط ملف server.js.

 { "scripts": { "start": "NODE_ENV=production node server.js" } }

الخطوة 3 : حان الوقت لإنشاء تطبيق Next.js الخاص بك. يمكنك القيام بذلك باستخدام الأمر npm run build أو yarn run build في Terminal.

الخطوة 4 : بعد الإنشاء ، حدد موقع ملفات مشروع Next.js في مدير الملفات. إذا كنت لا ترى الملفات المخفية ، فقم بتشغيل الرؤية. تجنب مجلدات node_modules و .git و README.md و .gitignore. حدد جميع الملفات والمجلدات الأخرى ، وأنشئ ملف ZIP.

الخطوة 5 : الآن ، قم بتسجيل الدخول إلى استضافة الويب cPanel. قم بتحميل واستخراج ملف ZIP إلى المجلد الجذر لاسم المجال الخاص بك.

الخطوة 6 : ملفات مشروعك جاهزة. توجه إلى قسم البرامج في cPanel. انقر فوق Setup Node.js App ، متبوعًا بزر + إنشاء التطبيق. قم بإعداد تطبيق Node.js ، مع الأخذ في الاعتبار إصدار Node.js ووضع تطبيق الإنتاج وجذر التطبيق وعنوان URL وملف بدء التشغيل (server.js).

قم بالإنهاء بالنقر على "إنشاء". بمجرد إنشائه ، أوقفه لفترة من الوقت. قم بالتمرير لأسفل إلى قسم ملفات التكوين المكتشفة. قم بتشغيل تثبيت NPM للحصول على جميع حزم Node.js. أخيرًا ، انقر فوق START APP.

ها أنت ذا! افتح اسم المجال الخاص بك في متصفحك. تطبيق Next.js الخاص بك يعمل الآن. عمل رائع على النشر الناجح!

كانت مشاركة طريقة نشر تطبيقات Next.js على cPanel ممتعة. حظا سعيدا وترميزا سعيدا!

إيجابيات وسلبيات نشر NextJs على cPanel

يأتي نشر تطبيق Next.js على cPanel مع مجموعة متنوعة من الفوائد. فيما يلي بعض الإيجابيات والسلبيات التي يجب مراعاتها.

الايجابيات :

1. سهل الاستخدام : يوفر cPanel واجهة رسومية سهلة الاستخدام ، مما يبسط عملية النشر.
2. الأتمتة : تتضمن cPanel العديد من الأدوات الآلية التي يمكنها التعامل مع المهام مثل إنشاء قواعد البيانات وإدارة ملفات مواقع الويب وإعداد البريد الإلكتروني والمزيد.
3. تعدد الاستخدامات : تدعم cPanel مجموعة واسعة من التطبيقات ، بما في ذلك تطبيقات Node.js مثل تلك التي تم إنشاؤها باستخدام Next.js.

سلبيات :

1. مرونة محدودة : على الرغم من سهولة استخدام cPanel ، إلا أنها قد تحد أحيانًا من المرونة والتحكم في بيئة الخادم لديك نظرًا لواجهتها المبسطة.
2. مشكلات التوافق المحتملة : أبلغ بعض المستخدمين عن مشكلات عند نشر تطبيقات Next.js على أنظمة الاستضافة المشتركة ، مثل الوقوع في أخطاء أثناء عملية الإنشاء.

أسئلة وأجوبة

مصادر أخرى

أفضل موفري استضافة Next.JS

أفضل موفري استضافة Node.js

خاتمة

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

إلدو روشي

بصفتي أحد مؤسسي Codeless ، أحضر خبرة في تطوير WordPress وتطبيقات الويب ، بالإضافة إلى سجل حافل لإدارة الاستضافة والخوادم بفعالية. يدفعني شغفي لاكتساب المعرفة وحماسي لبناء واختبار تقنيات جديدة إلى الابتكار والتحسين باستمرار.

خبرة:

تطوير الشبكة،

تصميم المواقع

إدارة نظام Linux ،

SEO

خبرة:

15 عامًا من الخبرة في تطوير الويب من خلال تطوير وتصميم بعض أكثر سمات WordPress شيوعًا مثل Specular و Tower و Folie.

تعليم:

لديّ درجة علمية في الفيزياء الهندسية وماجستير في علوم المواد والإلكترونيات البصرية.

تويتر ، لينكد إن