كيفية إنشاء ونشر محفظة مطور باستخدام Next.js

حافظة المطورين عبارة عن مجموعة من نماذج العمل والمشاريع التي تعرض مهاراتك وخبراتك. تميّزك المحفظة القوية عن المرشحين الآخرين عند البحث عن وظائف. ولكن ليس هذا فقط: يمكن أن تكون الحافظة أيضًا أداة قيمة للتواصل ، وتتبع ما تعلمته ، وترسيخ نفسك كخبير في الموضوع.

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

إليك عرض توضيحي مباشر لمحفظة المطورين التي ستنشئها باستخدام Next.js.

يمكنك الوصول إلى مستودع GitHub الخاص بهذا المشروع إذا كنت ترغب في إلقاء نظرة فاحصة ، أو يمكنك تنفيذ مشروع بدء أعمال Next.js الذي قمت بإنشائه. تحتوي حافظة المبتدئين على أكواد أساسية مثل الأنماط ، ورابط Font Awesome CDN ، والصور ، والبنية الأساسية.

المتطلبات / المتطلبات الأساسية

هذا هو نوع "المتابعة" من البرامج التعليمية. سيكون من الأسهل بالنسبة لك الترميز إذا كان لديك:

• معرفة أساسية بـ HTML و CSS و JavaScript
• القليل من المعرفة بـ React وربما Next.js
• Node.js و npm (مدير حزمة Node) أو الغزل المثبت على جهاز الكمبيوتر الخاص بك

لماذا Next.js؟

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

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

• بناء مواقع التجارة الإلكترونية : يعد Next.js مناسبًا تمامًا لبناء مواقع التجارة الإلكترونية التي تتطلب عرضًا من جانب الخادم لتحسين تحسين محركات البحث وتحسين الأداء.

• بناء تطبيقات الويب التقدمية (PWAs) : يدعم Next.js إنشاء تطبيقات الويب التقدمية ، وهي تطبيقات ويب تعمل مثل التطبيقات الأصلية ويمكن تثبيتها على جهاز المستخدم.

كيفية إعداد بيئة تطوير Next.js

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

 npx [email protected] my-portfolio

ستظهر مطالبة تطلب منك تأكيد بعض التبعيات الإضافية. ثم يمكنك تشغيل npm run dev لجعل تطبيقك متاحًا على localhost: 3000 .

عند إنشاء مشروع Next.js باستخدام الأمر npx ، فإنه يقوم تلقائيًا بتدعيم بنية المجلد بالأدلة الرئيسية التالية:

1. الصفحات : يحتوي هذا المجلد على صفحات التطبيق ، والتي يتم توجيهها تلقائيًا بناءً على اسم الملف الخاص بها. على سبيل المثال ، ستكون الصفحات / index.js هي الصفحة الرئيسية ، بينما ستكون الصفحات / about.js هي الصفحة المتعلقة.
2. عام : يحتوي هذا المجلد على ملفات ثابتة يمكن عرضها مباشرة ، مثل الصور والخطوط والأصول الأخرى.
3. المكونات : هذا المجلد اختياري ويحتوي على مكونات واجهة مستخدم قابلة لإعادة الاستخدام يمكن استخدامها عبر التطبيق.
4. الأنماط : هذا المجلد اختياري أيضًا ويحتوي على أنماط عامة يمكن تطبيقها عبر التطبيق.

يمكن أيضًا إنشاء أدلة وملفات أخرى اعتمادًا على التكوين والميزات المحددة ، ولكن هذه هي الدلائل الأساسية لمشروع Next.js الأساسي.

بالنسبة لهذا البرنامج التعليمي ، سيظهر كل شيء نقوم ببنائه في صفحة الفهرس (موقع الويب الخاص بنا المكون من صفحة واحدة) ، وستقوم بتضمين مكونات لأقسام مختلفة مثل البطل ، وحول ، والمشاريع ، وغيرها.

كيفية إنشاء محفظة مطور متجاوبة باستخدام Next.js

تتكون المحفظة عادة من مكونات مثل هذه:

• مكون Navbar
• مكون البطل
• حول المكون
• مكون المهارات
• مكون المشاريع
• مكون الاتصال
• مكون التذييل

من المتوقع ظهور مكونات Navbar و Footer على كافة الصفحات إذا كانت الحافظة تحتوي على أكثر من صفحة واحدة. يمكن تحقيق ذلك في Next.js من خلال تحديد تخطيط.

تحديد التخطيطات في Next.js

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

ابدأ بإنشاء مجلد مكونات في دليل src (المصدر) لمشروع Next.js الخاص بك. بعد ذلك ، قم بإنشاء مكونات Navbar و Footer التي سيتم استخدامها داخل مكون Layout.

إليك مكون Navbar في Navbar.jsx :

 // components/Navbar.jsx import Link from "next/link"; const Navbar = () => { return ( <div className="nav-container"> <div className="logo"> <Link href="/"> Joe's Portfolio </Link> </div> <a href="" className="cta-btn">Resume</a> </div> ) } export default Navbar;

إليك مكون التذييل في Footer.jsx:

 // components/Footer.jsx const Footer = () => { return ( <> <hr/> <div className="footer-container"> <p> {new Date().getFullYear()} Joel's Portfolio </p> <div className="social_icons"> <a href="https://twitter.com/olawanle_joel" aria-label="Twitter" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-twitter"></i> </a> <a href="https://github.com/olawanlejoel" aria-label="GitHub" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/olawanlejoel/" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-linkedin"></i> </a> </div> </div> </> ) } export default Footer;

ملاحظة: لكي تعمل أيقونات Font Awesome ، يجب عليك إما تثبيت Font Awesome في مشروعك أو استخدام CDN الخاص به. يمكنك إضافة رابط CDN إلى ملف _document.js الخاص بك مثل هذا:

 // pages/_document.js import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( <Html lang="en"> <Head> <meta charSet="utf-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); }

ملاحظة: إذا قمت بالارتباط في إصدار مختلف من Font Awesome عبر CDN ، فستحتاج إلى التبديل فوق تجزئة integrity المناسبة لهذا الإصدار.

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

سيقبل مكون Layout خاصية <code> children </code> ، مما يسمح لك بالوصول إلى محتوى صفحات Next.js الخاصة بك.

 // components/Layout.jsx import Navbar from './navbar'; import Footer from './footer'; const Layout = ({ children }) => { return ( <> <Navbar /> <main>{children}</main> <Footer /> </> ) } export default Layout;

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

 // pages/_app.js import '@/styles/globals.css'; import Layout from '../components/layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> ); }

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

حان الوقت الآن لمنح موقع الويب الخاص بمحفظتك المحتوى المناسب.

مكونات محفظة البناء

يمكنك الآن إنشاء مكونات فردية لكل قسم من حافظة مطوريك. سيتم استيراد كل هذه المكونات إلى صفحة الفهرس الخاصة بمشروع Next.js الخاص بك ، بحيث يمكن عرضها عند بدء مشروعك باستخدام npm run dev .

مكون البطل

مكون Hero هو القسم الأول أسفل Navbar ، والغرض الرئيسي منه هو جذب انتباه المستخدم ومنحهم فكرة عما يدور حوله موقع الويب أو التطبيق.

 // components/Hero.jsx import Image from "next/image"; const Hero = () => { return ( <div className="hero-container"> <Image src='/images/profile.jpeg' className="profile-img" width={300} height={300} alt="Joe's personal headshot" /> <div className="hero-text"> <h1>Hey, I'm Joe </h1> <p> I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between. </p> <div className="social-icons"> <a href="https://twitter.com/olawanle_joel" aria-label="Twitter" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-twitter"></i> </a> <a href="https://github.com/olawanlejoel" aria-label="GitHub" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/olawanlejoel/" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer" > <i className="fa-brands fa-linkedin"></i> </a> </div> </div> </div> ) } export default Hero;

في الكود أعلاه ، ستلاحظ أنه يتم استخدام مكون الصورة Next.js بدلاً من علامة HTML img لإضافة الصورة لأنها تتيح التحسين التلقائي للصورة وتغيير حجمها وغير ذلك الكثير.

في مكون "حول" ، ستلاحظ أيضًا أنه تمت إضافة فقرة بسيطة لتقول القليل عن المطور جنبًا إلى جنب مع بعض الرموز الاجتماعية من Font Awesome لإضافة روابط اجتماعية.

هذا ما يجب أن يبدو عليه المكون البطل:

يمكنك إضافة المزيد من المحتوى إلى المكون Hero أو تعديل الأنماط في ملف styles / globals.css أو حتى إعادة إنشاء هذا القسم بطريقتك الخاصة.

حول المكون

يهدف المكون "حول" إلى إخبار القراء أو الأشخاص الذين يزورون محفظتك بمزيد من المعلومات عنك في أي عدد تريده من الفقرات. إذا كنت ترغب في معرفة المزيد عن نفسك ، يمكنك إنشاء صفحة مخصصة "نبذة عني" وإضافة زر في هذا القسم لقراءة المزيد عن نفسك.

 // components/About.jsx import Image from "next/image"; const About = () => { return ( <div className="about-container"> <h2>About Me</h2> <div className="flex-about"> <div className="about-text"> <p> As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality. </p> <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.</p> </div> <div className="about-img"> <Image src='/images/about.jpeg' className="profile-img" width={300} height={500}/> </div> </div> </div> ) } export default About;

يحتوي الكود أعلاه على فقرتين من النص حول المطور وصورة للمطور. هذا ما يُتوقع أن يبدو عليه قسم "حول":

يمكنك دائمًا تعديل الأنماط لإضافة المزيد من الصور والمزيد.

مكون المهارات

يهدف مكون المهارات إلى إظهار بعض التقنيات أو التقنيات الأكثر استخدامًا التي استخدمها المطور في الماضي.

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

 // components/Skills.jsx const Skills = () => { return ( <div className="skills-container"> <h2>Skills</h2> <div className="grid-skills"> <div className="skill-card html"> <i className="fa-brands fa-html5 html-icon"></i> <p>HTML</p> </div> <div className="skill-card css"> <i className="fa-brands fa-css3-alt css-icon"></i> <p>CSS</p> </div> <div className="skill-card js"> <i className="fa-brands fa-js-square js-icon"></i> <p>JavaScript</p> </div> <div className="skill-card react"> <i className="fa-brands fa-react react-icon"></i> <p>React</p> </div> <div className="skill-card node"> <i className="fa-brands fa-node-js node-icon"></i> <p>Node</p> </div> <div className="skill-card python"> <i className="fa-brands fa-python python-icon"></i> <p>Python</p> </div> </div> </div> ) } export default Skills;

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

مكون المشاريع

يعد مكون المشروع أحد الأقسام المهمة في محفظة المطورين. تقدم المشاريع دليلًا ملموسًا على مهارات وقدرات المطور وتعرض قدرته على تطبيق معرفته على مشاكل العالم الحقيقي.

سيتضمن كل مشروع وصفًا موجزًا ​​للمشروع ، ورابطًا لكود مصدره (نستخدم روابط GitHub هنا) ، وأي تفاصيل أخرى ترغب في إضافتها.

يمكنك إنشاء مصفوفة للاحتفاظ بتفاصيل كل مشروع ثم استيرادها إلى المكون الخاص بك لتجنب ترميزها.

لنقم بإنشاء ملف data.js لتخزين مجموعة بيانات المشروع. يمكنك تخزين هذا الملف في مجلد المكون أو مجلد الصفحات / api . بالنسبة لهذا العرض التوضيحي ، سأخزنه في مجلد المكونات. ستحتوي هذه المصفوفة على كائن لكل مشروع ، وسيحتوي الكائن على اسم المشروع ووصفه ورابط GitHub.

 // components/data.js export const projectData = [ { id: 1, title: 'Todo List App', description: 'A simple Todo List App built with JavaScript. All datas are stored in localstorage. It helps users check list out their plans and tick as they do them.', gitHubLink: 'https://github.com/olawanlejoel/Todo-List-App', }, { id: 2, title: 'Books Library App', description: 'A simple Book Library App built with JavaScript. It helps readers have a good list of books they are either currently reading or have finished reading.', gitHubLink: 'https://github.com/olawanlejoel/Book-Library', }, { id: 3, title: 'Quotes Generator', description: 'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.', gitHubLink: 'https://github.com/olawanlejoel/random-quote-generator', }, { id: 4, title: 'Password Generator', description: 'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.', gitHubLink: 'https://github.com/olawanlejoel/Password-Generator', }, { id: 5, title: 'Twitter UI Clone', description: 'Simple Twitter UI clone built with TailwindCSS and Vue Js. This covers only the homepage of Twitter UI. This is cool to get started with TailwindCSS as it helps understand basic concepts.', gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone', }, ];

يمكنك الآن إنشاء مكون مشروع لاستخدام هذه البيانات عن طريق التكرار بسهولة. يمكنك استخدام أي طريقة تكرار JavaScript ، ولكن في هذا البرنامج التعليمي ، يمكنك استخدام طريقة مصفوفة map() للتكرار خلال مصفوفة البيانات بعد استيرادها إلى مكون المشاريع.

 // components/Projects.jsx import { projectData } from './data.js'; const Projects = () => { return ( <div className="projects-container"> <h2>Projects</h2> <div className="projects-grid"> {projectData && projectData.map((project) => ( <div className="project-card" key={project.id}> <div className="project-header"> <i className="fa-regular fa-folder-open folder-icon"></i> <div className="small-icons"> <a href={project.gitHubLink}><i className="fa-brands fa-github"></i></a> </div> </div> <h3>{project.title}</h3> <p>{project.description}</p> </div> )) } </div> </div> ) } export default Projects;

في الكود أعلاه ، نجحت في تجنب التكرار من خلال التكرار عبر المصفوفة لإخراج جميع المشاريع في مكون المشاريع ، مما يسهل صيانة وإضافة المزيد من المشاريع.

مكون الاتصال

أحد أسباب إنشاء محفظة مطور هو إمكانية وصول العملاء المحتملين إليك. تتمثل إحدى الطرق في أن يقوم الأشخاص بإرسال بريد إلكتروني إليك ، وهو ما سنقوم بتسهيله في مكون الاتصال هذا.

 // components/Contact.jsx const Contact = () => { return ( <div className="contact-container"> <h2>Get In Touch</h2> <p>If you want us to work together, have any questions or want me to speak at your event, my inbox is always open. Whether I just want to say hi, I'll try my best to get back to you! Cheers!</p> <a href="mailto:[email protected]" className='cta-btn'>Say Hello</a> </div> ) } export default Contact;

ضع عنوان بريدك الإلكتروني في a بحيث يقوم الزر بتشغيل تطبيق بريد إلكتروني برسالة موجهة إليك.

لقد نجحت الآن في إنشاء جميع المكونات لتطبيق محفظتك. ستكون الخطوة التالية هي إضافتهم إلى صفحة الفهرس الخاصة بك. انتقل إلى ملف pages / index.js - الذي تم إنشاؤه افتراضيًا - واستبدل الكود الخاص به بما يلي.

 // pages/index.js import Hero from '@/components/Hero'; import About from '@/components/About'; import Skills from '@/components/Skills'; import Projects from '@/components/Projects'; import Contact from '@/components/Contact'; import Head from 'next/head'; const Home = () => { return ( <> <Head> <title>Joel's Portfolio</title> <meta name="description" content="Joel's Portfolio" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <div> <Hero /> <About /> <Skills /> <Projects /> <Contact /> </div> </> ); }; export default Home;

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

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

 npm i sharp

يمكنك الآن نشر تطبيقك ، وستعمل الصور بشكل صحيح مع التحسين الكامل الذي يوفره Next.js.

كيفية نشر تطبيق Next.js على Kinsta

بمجرد أن تصبح راضيًا عن محفظتك التي تعرض أفضل أعمال التطوير لديك والمعلومات الأساسية ، فمن المحتمل أن ترغب في مشاركتها مع الآخرين ، أليس كذلك؟ دعونا نرى كيفية القيام بذلك باستخدام منصة استضافة التطبيقات GitHub و Kinsta.

ادفع الرمز الخاص بك إلى GitHub

هناك طرق مختلفة لدفع الرموز إلى GitHub ، لكن دعنا نستخدم Git في هذا البرنامج التعليمي. يستخدم Git على نطاق واسع في تطوير البرامج لأنه يوفر طريقة موثوقة وفعالة لإدارة تغييرات التعليمات البرمجية ، والتعاون في المشاريع ، والحفاظ على محفوظات الإصدار.

يمكنك تحميل الكود الخاص بك على GitHub باتباع الخطوات التالية:

أولاً ، قم بإنشاء مستودع جديد (تمامًا مثل مجلد محلي لتخزين التعليمات البرمجية الخاصة بك). يمكنك القيام بذلك عن طريق تسجيل الدخول إلى حساب GitHub الخاص بك ، والنقر فوق الزر + في الزاوية اليمنى العليا من الشاشة وتحديد مستودع جديد من القائمة المنسدلة كما هو موضح في الصورة أدناه.

ستكون الخطوة التالية هي إعطاء اسم للمستودع الخاص بك ، وإضافة وصف (اختياري) ، وتحديد ما إذا كنت تريد أن يكون المستودع الخاص بك عامًا أو خاصًا. ثم انقر فوق إنشاء مستودع . يمكنك الآن دفع التعليمات البرمجية الخاصة بك إلى مستودع GitHub الجديد.

كل ما هو مطلوب لدفع الكود الخاص بك باستخدام Git هو عنوان URL الخاص بالمستودع ، والذي يمكنك العثور عليه في الصفحة الرئيسية للمستودع ، أسفل الزر Clone أو Download ، أو في الخطوات التي تظهر بعد إنشاء المستودع.

يمكنك الاستعداد لدفع التعليمات البرمجية الخاصة بك عن طريق فتح الجهاز الطرفي أو موجه الأوامر والانتقال إلى الدليل الذي يحتوي على مشروعك. استخدم الأمر التالي لتهيئة مستودع Git محلي:

 git init

أضف الآن الكود الخاص بك إلى مستودع Git المحلي باستخدام الأمر التالي:

 git add .

يضيف الأمر أعلاه جميع الملفات الموجودة في الدليل الحالي والأدلة الفرعية الخاصة به إلى مستودع Git الجديد. يمكنك الآن تنفيذ تغييراتك باستخدام الأمر التالي:

 git commit -m "my first commit"

ملاحظة: يمكنك استبدال "أول التزام لي" برسالتك الموجزة التي تصف التغييرات التي أجريتها.

أخيرًا ، ادفع الكود الخاص بك إلى GitHub باستخدام الأوامر التالية:

 git remote add origin [repository URL] git push -u origin master

ملاحظة: تأكد من استبدال "[عنوان URL الخاص بالمستودع]" بعنوان URL الخاص بمستودع GitHub الخاص بك.

بمجرد الانتهاء من هذه الخطوات ، سيتم دفع التعليمات البرمجية الخاصة بك إلى GitHub ويمكن الوصول إليها من خلال عنوان URL للمستودع الخاص بك. يمكنك الآن نشر المستودع الخاص بك على Kinsta.

انشر محفظتك في Kinsta

يتم النشر في Kinsta في غضون دقائق فقط. ابدأ من لوحة معلومات My Kinsta لتسجيل الدخول أو إنشاء حسابك.

بعد ذلك ، ستفوض Kinsta على GitHub في هذه الخطوات السريعة:

1. انقر فوق التطبيقات على الشريط الجانبي الأيسر
2. انقر فوق إضافة خدمة
3. من القائمة المنسدلة ، انقر فوق التطبيق لأنك تريد نشر تطبيق Next.js على Kinsta.

سيظهر نموذج يمكنك من خلاله تحديد المستودع الذي ترغب في نشره.

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

في هذه المرحلة ، سيبدأ تطبيقك في النشر. في غضون بضع دقائق ، سيتم توفير ارتباط للوصول إلى الإصدار المنشور من التطبيق الخاص بك. في هذه الحالة يكون: https://kinsta-developer-portfolio-ir8w8.kinsta.app/

ملاحظة: تم تمكين النشر التلقائي ، لذلك يقوم Kinsta تلقائيًا بإعادة نشر تطبيقك كلما قمت بإجراء تغييرات على قاعدة التعليمات البرمجية الخاصة بك ودفعها إلى GitHub.

ملخص

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

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

في هذا البرنامج التعليمي ، تعلمت خطوة بخطوة كيفية إنشاء موقع محفظة سريع الاستجابة باستخدام Next.js ثم نشره في Kinsta.

يمكنك تجربة استضافة تطبيق Kinsta مجانًا ، وإذا كنت ترغب في ذلك ، فاختر خطة Hobby Tier التي تبدأ من 7 دولارات شهريًا .

الآن حان دورك لتحدي نفسك: أضف المزيد من الميزات إلى موقع محفظتك الذي تم تطويره حديثًا! إليك بعض الأفكار لتدفق عصيرك الإبداعي: ​​أضف المزيد من الصفحات بمعلومات مفصلة ، ودمج مدونة مع MDX ، وقم بتنفيذ بعض الرسوم المتحركة. شارك مشاريعك وخبراتك في التعليقات أدناه!