في عملية تطوير تطبيقات الويب، تعد إدارة الصفحات والتنقل بينها جانبًا بالغ الأهمية. في سلسلة المقالات هذه، سوف نتعمق في أساسيات إنشاء الصفحات وتنفيذ التنقل في 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 لبناء تطبيقات الويب الديناميكية والتفاعلية.