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

ما نستخدمه

• Next.js
• نتليفاي
• TypeScript
• Tailwind CSS

المتطلبات الأساسية
قبل أن نتعمق، تأكد من تثبيت ما يلي:

• Node.js (الإصدار 14 أو الأحدث)
• npm أو الغزل
• شخص سخيف

إعداد المشروع

أولاً، لنقم بإنشاء مشروع Next.js جديد. افتح جهازك وقم بتشغيل الأمر التالي:

npx إنشاء التطبيق التالي Capital-city-app

انتقل إلى دليل المشروع:

تطبيق سي دي كابيتال سيتي

إنشاء تطبيق العاصمة

1. إعداد واجهة برمجة التطبيقات بالنسبة لتطبيق Capital City الخاص بنا، سنستخدم واجهة برمجة تطبيقات مجانية توفر بيانات حول البلدان وعواصمها. إحدى هذه واجهات برمجة التطبيقات هي REST Country API. قم بإنشاء ملف باسم api.js في دليل lib لجلب البيانات من واجهة برمجة التطبيقات:

export async function getCountries() {
    const res = await fetch('https://restcountries.com/v3.1/all');
    if (!res.ok) {
      throw new Error('Failed to fetch data')
    }
    const data = await res.json();
    return data;
  }

1. إنشاء المكونات لنقم بإنشاء مكون CountryCard لعرض تفاصيل الدولة الفردية. قم بإنشاء ملف باسم CountryCard.js في دليل المكونات:

import React from 'react';

const CountryCard = ({ country }) => {
  return (
    

      
{country.name.common}
      
Capital: {country.capital}
      
Region: {country.region}
      
  );
}

export default CountryCard;

1. جلب وعرض البيانات في ملف pages/index.js، قم بإحضار بيانات البلد وعرضها باستخدام مكون CountryCard:

import { getCountries } from '../app/lib/api';
import CountryCard from '../components/CountryCard';

export async function getStaticProps() {
  const countries = await getCountries();
  return {
    props: {
    countries,
    },
  };
}

const Home = ({ countries }) => {
  return (
    

      
Capital City App
      

        {countries.map((country) => (
          
        ))}
      
      
  );
};

export default Home;

النشر على Netlify

1. إعداد المستودع

تهيئة مستودع git في مشروعك:
بوابة الحرف الأول
إضافة بوابة .
git الالتزام -m "الالتزام الأولي"

2. النشر إلى Netlify

1. إنشاء موقع جديد على Netlify: انتقل إلى Netlify وقم بتسجيل الدخول. انقر على "موقع جديد من Git".
2. الاتصال بمستودع Git الخاص بك: اختر موفر Git الخاص بك (GitHub، GitLab، Bitbucket) وحدد المستودع الخاص بك.
3. تكوين إعدادات الإصدار الخاص بك:

• أمر البناء: البناء التالي
• نشر الدليل: .next

نشر الموقع: انقر على "نشر الموقع". ستقوم Netlify ببناء موقعك ونشره تلقائيًا.

3. إعداد النشر المستمر

عندما تدفع التغييرات إلى المستودع الخاص بك، ستقوم Netlify تلقائيًا بتشغيل إصدار جديد ونشر الإصدار المحدث من تطبيقك.

خاتمة

تهانينا! لقد نجحت في إنشاء تطبيق Capital City ونشره باستخدام Next.js وNetlify. يقوم هذا التطبيق بجلب البيانات من REST Country API ويعرضها بطريقة سهلة الاستخدام. من خلال العرض من جانب الخادم الخاص بـ Next.js وميزات النشر القوية التي توفرها Netlify، يمكنك إنشاء ونشر تطبيقات الويب الديناميكية بكفاءة.

يشكل Next.js وNetlify مزيجًا قويًا لتطوير الويب الحديث، مما يسمح لك بالتركيز على إنشاء ميزات رائعة أثناء التعامل مع تعقيدات النشر والتوسع نيابةً عنك. برمجة سعيدة!