Next.js الأساسيات: شرح إنشاء الصفحات Routing والأساسية

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

إنشاء وعرض الصفحة الأولى

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

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

في مقتطف الشفرة أعلاه، قمنا بإنشاء صفحة ترحيب بسيطة. عند الوصول إلى /welcome المسار في متصفح الويب الخاص بك، سترى الرسالة "مرحبًا بك في Next.js !" عرض.

أساسي Routing

Next.js يقدم نظامًا قويًا وبديهيًا routing يجعل التنقل بين الصفحات أمرًا سهلاً. يعتمد Routing in على الدليل، حيث يتوافق كل ملف في هذا الدليل مع مسار محدد. على سبيل المثال، سيؤدي الملف المسمى داخل الدليل إلى إنشاء صفحة يمكن الوصول إليها على المسار. Next.js pages about.js pages /about

إنشاء الروابط والملاحة

لإنشاء روابط بين الصفحات والتنقل بينها، يمكننا استخدام <Link> المكون من next/link المكتبة. يوجد أدناه مثال على إنشاء رابط من صفحة الترحيب إلى صفحة "نبذة عنا".

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

في المثال أعلاه، عندما تنقر على الرابط "معرفة المزيد عنا"، ستتم إعادة توجيهك إلى الصفحة /about.

خاتمة

في هذا القسم، اكتشفنا كيفية إنشاء صفحات بسيطة وعرضها Next.js وكيفية تنفيذ التنقل بين الصفحات باستخدام pages الدليل والمكون <Link>. هذه خطوات أولية حاسمة في بناء Next.js التطبيق. في المقالات القادمة، سنستمر في استكشاف الجوانب الأخرى Next.js لبناء تطبيقات الويب الديناميكية والتفاعلية.