الصفحات في Next.js

في Next.js، الصفحة هي مكون React يتم تصديره من ملف داخل دليل pages.

ترتبط الصفحات بمسار بناءً على اسم الملف. على سبيل المثال، أثناء التطوير:

  • pages/index.js يرتبط بمسار /.
  • pages/posts/first-post.js يرتبط بمسار /posts/first-post.

لدينا بالفعل ملف pages/index.js، فلنقم بإنشاء pages/posts/first-post.js لنرى كيف يعمل.

إنشاء صفحة جديدة

أنشئ دليل posts تحت pages.

قم بإنشاء ملف باسم first-post.js داخل دليل posts بالمحتوى التالي:

export default function FirstPost() {
  return <h1>First Post</h1>;
}

يمكن أن يكون للمكون أي اسم، ولكن يجب تصديره كتصدير افتراضي (default).

الآن، تأكد من أن خادم التطوير يعمل وقم بزيارة http://localhost:3000/posts/first-post. يجب أن ترى الصفحة:

أول منشور

هكذا يمكنك إنشاء صفحات مختلفة في Next.js.

ما عليك سوى إنشاء ملف JS تحت دليل pages، وسيصبح مسار الملف هو مسار URL.

بطريقة ما، هذا مشابه لبناء مواقع باستخدام ملفات HTML أو PHP. بدلاً من كتابة HTML، تكتب JSX وتستخدم مكونات React.

لنضف رابطًا إلى الصفحة المضافة حديثًا حتى نتمكن من التنقل إليها من الصفحة الرئيسية.