التوجيه من جانب العميل في Next.js

نشرت: 2022-03-10
ملخص سريع ↬ يحتوي Next.js على نظام توجيه قائم على الملفات تصبح فيه كل صفحة مسارًا تلقائيًا بناءً على اسم الملف الخاص بها. كل صفحة هي مكون React مُصدَّر افتراضيًا من دليل الصفحات والذي يمكن استخدامه لتحديد أنماط المسار الأكثر شيوعًا. ستوجهك هذه المقالة خلال كل ما تحتاج إلى معرفته تقريبًا حول التوجيه في Next.js وتوجهك في اتجاه الموضوعات والمفاهيم ذات الصلة.

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

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

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

ستكون هذه المقالة مفيدة لمطوري React الذين هم على دراية بـ Next.js ويريدون معرفة كيفية تعامله مع التوجيه. أنت بحاجة إلى معرفة عملية بـ React و Next.js لتحقيق أقصى استفادة من المقالة ، والتي تتعلق فقط بالتوجيه من جانب العميل والمفاهيم ذات الصلة في Next.js.

التوجيه والعرض

يعد التوجيه والعرض مكملان لبعضهما البعض وسوف يلعبان دورًا كبيرًا في سياق هذه المقالة. يعجبني كيف يشرحهم غوراف:

التوجيه هو العملية التي يتم من خلالها انتقال المستخدم إلى صفحات مختلفة على موقع الويب.

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

خذ خمس دقائق للتفكير في ذلك.

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

اعتمادًا على متطلبات جلب البيانات الخاصة بك ، قد تجد نفسك تستخدم وظائف جلب البيانات المضمنة مثل getStaticProps أو getStaticPaths أو getServerSideProps أو أدوات جلب البيانات من جانب العميل مثل SWR أو استعلام رد الفعل أو أساليب جلب البيانات التقليدية مثل الجلب على- عرض ، إحضار ، ثم عرض ، تقديم كما تجلب (مع التشويق).

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

بعد هذا بعيدًا ، لنبدأ بالجوهر الأساسي: يحتوي Next.js على جهاز توجيه قائم على نظام الملفات مبني على مفهوم الصفحات.

المزيد بعد القفز! أكمل القراءة أدناه ↓

الصفحات

الصفحات في Next.js هي مكونات React التي تتوفر تلقائيًا كمسارات. يتم تصديرها كصادرات افتراضية من دليل الصفحات مع امتدادات الملفات المدعومة مثل .js أو .jsx أو .ts أو .tsx .

سيكون لتطبيق Next.js النموذجي بنية مجلد مع أدلة المستوى الأعلى مثل الصفحات والعامة والأنماط.

 next-app ├── node_modules ├── pages │ ├── index.js // path: base-url (/) │ ├── books.jsx // path: /books │ └── book.ts // path: /book ├── public ├── styles ├── .gitignore ├── package.json └── README.md

كل صفحة هي مكون React:

 // pages/books.js — `base-url/book` export default function Book() { return
 كتب

}

ملاحظة : ضع في اعتبارك أنه يمكن أيضًا الإشارة إلى الصفحات باسم "معالجات التوجيه".

صفحات مخصصة

هذه صفحات خاصة موجودة في دليل الصفحات ولكنها لا تشارك في التوجيه. وتكون مسبوقة برمز الشرطة السفلية ، كما في _app.js و _document.js .

  • _app.js
    هذا مكون مخصص موجود في مجلد الصفحات. يستخدم Next.js هذا المكون لتهيئة الصفحات.
  • _document.js
    مثل _app.js ، يعد _document.js مكونًا مخصصًا يستخدمه Next.js لزيادة علامتي <html> و <body> في تطبيقاتك. يعد هذا ضروريًا لأن صفحات Next.js تتخطى تعريف ترميز المستند المحيط.
 next-app ├── node_modules ├── pages │ ├── _app.js // ️ Custom page (unavailable as a route) │ ├── _document.jsx // ️ Custom page (unavailable as a route) │ └── index.ts // path: base-url (/) ├── public ├── styles ├── .gitignore ├── package.json └── README.md

الربط بين الصفحات

يعرض Next.js مكون Link من next/link API يمكن استخدامه لإجراء انتقالات المسار من جانب العميل بين الصفحات.

 // Import the <Link/> component import Link from "next/link"; // This could be a page component export default function TopNav() { return ( <nav> <Link href="/">Home</Link> <Link href="/">Publications</Link> <Link href="/">About</Link> </nav> ) } // This could be a non-page component export default function Publications() { return ( <section> <TopNav/> {/* ... */} </section> ) }

يمكن استخدام مكون Link داخل أي مكون أو صفحة أم لا. عند استخدامه في أبسط أشكاله كما في المثال أعلاه ، يترجم مكون Link إلى ارتباط تشعبي href . (المزيد عن Link في القسم التالي / الرابط أدناه.)

التوجيه

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

طرق الفهرس

بشكل افتراضي ، في تطبيق Next.js الخاص بك ، يكون المسار الأولي / الافتراضي هو pages/index.js الذي يعمل تلقائيًا كنقطة انطلاق لتطبيقك كـ / . باستخدام عنوان URL الأساسي localhost:3000 ، يمكن الوصول إلى مسار الفهرس هذا على مستوى عنوان URL الأساسي للتطبيق في المستعرض.

تعمل مسارات الفهرس تلقائيًا كطريق افتراضي لكل دليل ويمكنها التخلص من التكرار في التسمية. تعرض بنية الدليل أدناه مسارين: / و /home .

 next-app └── pages ├── index.js // path: base-url (/) └── home.js // path: /home

يكون الإزالة أكثر وضوحًا مع المسارات المتداخلة .

طرق متداخلة

طريق مثل pages/book هو مستوى واحد عميق. للتعمق أكثر هو إنشاء مسارات متداخلة ، الأمر الذي يتطلب بنية مجلد متداخلة. باستخدام عنوان url الأساسي لـ https://www.smashingmagazine.com ، يمكنك الوصول إلى المسار https://www.smashingmagazine.com/printed-books/printed-books عن طريق إنشاء بنية مجلد مماثلة لتلك الموجودة أدناه:

 next-app └── pages ├── index.js // top index route └── printed-books // nested route └── printed-books.js // path: /printed-books/printed-books

أو تخلص من تكرار المسار باستخدام مسارات الفهرس والوصول إلى مسار الكتب المطبوعة على https://www.smashingmagazine.com/printed-books .

 next-app └── pages ├── index.js // top index route └── printed-books // nested route └── index.js // path: /printed-books

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

طرق ديناميكية

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

 // ️ Don't do this. next-app └── pages ├── index.js // top index route └── printed-books // nested route ├── index.js // path: /printed-books ├── typesript-in-50-lessons.js // path: /printed-books/typesript-in-50-lessons ├── checklist-cards.js // path: /printed-books/checklist-cards ├── ethical-design-handbook.js // path: /printed-books/ethical-design-handbook ├── inclusive-components.js // path: /printed-books/inclusive-components └── click.js // path: /printed-books/click

التي تعتبر زائدة عن الحاجة وغير قابلة للتطوير ويمكن معالجتها بمسارات ديناميكية مثل:

 // Do this instead. next-app └── pages ├── index.js // top index route └── printed-books ├── index.js // path: /printed-books └── [book-id].js // path: /printed-books/:book-id

صيغة الأقواس - [book-id] - هي المقطع الديناميكي ، ولا تقتصر على الملفات وحدها. يمكن استخدامه أيضًا مع مجلدات مثل المثال أدناه ، مما يجعل المؤلف متاحًا في المسار /printed-books/:book-id/author .

 next-app └── pages ├── index.js // top index route └── printed-books ├── index.js // path: /printed-books └── [book-id] └── author.js // path: /printed-books/:book-id/author

يتم الكشف عن المقطع (الأجزاء) الديناميكية للمسار كمعامل استعلام يمكن الوصول إليه في أي مكون متصل متضمن في المسار مع كائن query الخاص بربط الخطاف useRouter() - (المزيد عن هذا في القسم التالي / واجهة برمجة تطبيقات جهاز التوجيه ).

 // printed-books/:book-id import { useRouter } from 'next/router'; export default function Book() { const { query } = useRouter(); return ( <div> <h1> book-id <em>{query['book-id']}</em> </h1> </div> ); }
 // /printed-books/:book-id/author import { useRouter } from 'next/router'; export default function Author() { const { query } = useRouter(); return ( <div> <h1> Fetch author with book-id <em>{query['book-id']}</em> </h1> </div> ); }

تمديد مقاطع المسار الديناميكي مع التقاط جميع المسارات

لقد رأيت تركيب قوس مقطع المسار الديناميكي كما في المثال السابق مع [book-id].js . يكمن جمال بناء الجملة هذا في أنه يأخذ الأمور إلى أبعد من ذلك مع Catch-All Routes . يمكنك الاستدلال على ما يفعله هذا من الاسم: فهو يلتقط جميع المسارات.

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

على وجه التحديد ، كان لدينا المسار /printed-books/:book-id ، مع بنية الدليل:

 next-app └── pages ├── index.js └── printed-books ├── index.js └── [book-id].js

إذا قمنا بتحديث المسار للحصول على المزيد من الأجزاء مثل الفئات ، فقد ينتهي بنا الأمر بشيء مثل: /printed-books/design/:book-id ، /printed-books/engineering/:book-id ، أو أفضل ما زال /printed-books/:category/:book-id .

دعونا نضيف سنة الإصدار: /printed-books/:category/:release-year/:book-id . يمكنك ان ترى نمط؟ تصبح بنية الدليل:

 next-app └── pages ├── index.js └── printed-books └── [category] └── [release-year] └── [book-id].js

لقد استبدلنا استخدام الملفات المسماة بالمسارات الديناميكية ، ولكن بطريقة ما لا يزال ينتهي بنا الأمر بنوع آخر من التكرار. حسنًا ، هناك حل: Catch All Routes الذي يلغي الحاجة إلى مسارات متداخلة بعمق:

 next-app └── pages ├── index.js └── printed-books └── [...slug].js

يستخدم نفس بنية القوس فيما عدا أنه مسبوق بثلاث نقاط. فكر في النقاط مثل تركيب جافا سكريبت المنتشر. قد تتساءل: إذا استخدمت مسارات استقبال الرسائل الخاطئة ، كيف يمكنني الوصول إلى الفئة ( [category] ) ، وسنة الإصدار ( [release-year] ). بطريقتين:

  1. في حالة مثال الكتب المطبوعة ، يكون الهدف النهائي هو الكتاب ، وسيتم إرفاق البيانات الوصفية بكل معلومات كتاب بها ، أو
  2. يتم إرجاع مقاطع "slug" كمصفوفة من معلمات الاستعلام.
 import { useRouter } from 'next/router'; export default function Book() { const { query } = useRouter(); // There's a brief moment where `slug` is undefined // so we use the Optional Chaining (?.) and Nullish coalescing operator (??) // to check if slug is undefined, then fall back to an empty array const [category, releaseYear, bookId] = query?.slug ?? []; return ( <table> <tbody> <tr> <th>Book Id</th> <td>{bookId}</td> </tr> <tr> <th>Category</th> <td>{category}</td> </tr> <tr> <th>Release Year</th> <td>{releaseYear}</td> </tr> </tbody> </table> ); }

إليك المزيد من الأمثلة على المسار /printed-books/[…slug] :

طريق معلمة الاستعلام
/printed-books/click.js {"slug": ["click"]}
/printed-books/2020/click.js {"slug": ["2020"، "click"]}
/printed-books/design/2020/click.js {“slug”: [“design”، “2020”، “click”]}

كما هو الحال مع مسار استقبال الرسائل الخاطئة ، سيرتدي المسار /printed-books خطأ 404 إلا إذا قمت بتوفير مسار فهرس احتياطي.

 next-app └── pages ├── index.js └── printed-books ├── index.js // path: /printed-books └── [...slug].js

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

تمديد مقاطع المسار الديناميكي باستخدام مسارات الالتقاط الشامل الاختيارية

بناء الجملة هو نفسه Catch-all -ways ، لكن مع أقواس مربعة مزدوجة بدلاً من ذلك.

 next-app └── pages ├── index.js └── printed-books └── [[...slug]].js

في هذه الحالة ، يكون مسار استقبال الرسائل الخاطئة (slug) اختياريًا وإذا لم يكن متاحًا ، فهو احتياطي للمسار /printed-books ، ويتم تقديمه باستخدام [[…slug]].js route handler ، بدون أي معلمات استعلام.

استخدم مسارات استقبال الرسائل الخاطئة جنبًا إلى جنب مع مسارات الفهرس ، أو مسارات التجميع الاختيارية وحدها. تجنب استخدام مسارات استقبال الرسائل الخاطئة والاختيارية جنبًا إلى جنب.

أسبقية الطرق

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

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

على سبيل المثال ، من الخطأ أن يكون لديك أكثر من مسار ديناميكي واحد على نفس المستوى.

 // This is an error // Failed to reload dynamic routes: Error: You cannot use different slug names for the // same dynamic path ('book-id' !== 'id'). next-app └── pages ├── index.js └── printed-books ├── [book-id].js └── [id].js

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

 // Directory structure flattened for simplicity next-app └── pages ├── index.js // index route (also a predefined route) └── printed-books ├── index.js ├── tags.js // predefined route ├── [book-id].js // handles dynamic route └── [...slug].js // handles catch all route

على سبيل المثال ، حاول الإجابة على هذا: ما المسار الذي يتعامل مع المسار /printed-books/inclusive-components ؟

  • / printed-books/ /printed-books/[book-id].js ، أو
  • /printed-books/[…slug].js .

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

  1. هل يوجد معالج مسار محدد مسبقًا يمكنه التعامل مع المسار؟
    • true - التعامل مع طلب المسار.
    • false - انتقل إلى 2.
  2. هل يوجد معالج مسار ديناميكي يمكنه التعامل مع المسار؟
    • true - التعامل مع طلب المسار.
    • false - انتقل إلى 3.
  3. هل هناك معالج توجيه شامل يمكنه التعامل مع المسار؟
    • true - التعامل مع طلب المسار.
    • false - قم برمي صفحة 404 غير موجودة.

لذلك ، يفوز / /printed-books/[book-id].js /[book-id].js.

إليك المزيد من الأمثلة:

طريق معالج الطريق نوع الطريق
/printed-books /printed-books طريق الفهرس
/printed-books/tags /printed-books/tags.js طريق محدد مسبقًا
/printed-books/inclusive-components /printed-books/[book-id].js طريق ديناميكي
/printed-books/design/inclusive-components /printed-books/[...slug].js مسار شامل

next/link API

تعرض واجهة برمجة التطبيقات next/link Link كطريقة تعريفية لإجراء انتقالات المسار من جانب العميل.

 import Link from 'next/link' function TopNav() { return ( <nav> <Link href="/">Smashing Magazine</Link> <Link href="/articles">Articles</Link> <Link href="/guides">Guides</Link> <Link href="/printed-books">Books</Link> </nav> ) }

سيتم تحليل مكون Link إلى ارتباط تشعبي عادي بتنسيق HTML. وهذا يعني أن <Link href="/">Smashing Magazine</Link> ستحل إلى <a href="/">Smashing Magazine</a> .

href هي الخاصية الوحيدة المطلوبة لمكون Link . راجع المستندات للحصول على قائمة كاملة من الخاصيات المتوفرة على مكون Link .

هناك آليات أخرى لمكون Link يجب أن تكون على دراية بها.

المسارات ذات الأجزاء الديناميكية

قبل Next.js 9.5.3 ، كان Link بالمسارات الديناميكية يعني أنه يجب عليك توفير كل من href as Link كما في:

 import Link from 'next/link'; const printedBooks = [ { name: 'Ethical Design', id: 'ethical-design' }, { name: 'Design Systems', id: 'design-systems' }, ]; export default function PrintedBooks() { return printedBooks.map((printedBook) => ( <Link href="/printed-books/[printed-book-id]" as={`/printed-books/${printedBook.id}`} > {printedBook.name} </Link> )); }

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

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

 import Link from 'next/link'; const printedBooks = [ { name: 'Ethical Design', id: 'ethical-design' }, { name: 'Design Systems', id: 'design-systems' }, ]; export default function PrintedBooks() { return printedBooks.map((printedBook) => ( <Link href={`/printed-books/${printedBook.id}`}>{printedBook.name}</Link> )); }

انظر التحليل التلقائي لـ href.

حالات الاستخدام passHref

ألق نظرة فاحصة على المقتطف أدناه:

 import Link from 'next/link'; const printedBooks = [ { name: 'Ethical Design', id: 'ethical-design' }, { name: 'Design Systems', id: 'design-systems' }, ]; // Say this has some sort of base styling attached function CustomLink({ href, name }) { return <a href={href}>{name}</a>; } export default function PrintedBooks() { return printedBooks.map((printedBook) => ( <Link href={`/printed-books/${printedBook.id}`} passHref> <CustomLink name={printedBook.name} /> </Link> )); }

passHref على مكون Link تمرير خاصية href إلى المكون الفرعي CustomLink . يعد هذا أمرًا إلزاميًا إذا كان مكون Link يلتف فوق مكون يقوم بإرجاع علامة <a> الارتباط التشعبي. قد تكون حالة الاستخدام الخاصة بك لأنك تستخدم مكتبة مثل المكونات المصممة ، أو إذا كنت بحاجة إلى تمرير العديد من العناصر الفرعية إلى مكون Link ، لأنه يتوقع فقط طفلًا واحدًا.

انظر المستندات لمعرفة المزيد.

كائنات URL

يمكن أن تكون خاصية href لمكون Link عبارة عن كائن عنوان URL بخصائص مثل query الذي يتم تنسيقه تلقائيًا في سلسلة عنوان URL.

باستخدام كائن printedBooks ، سيرتبط المثال أدناه بـ:

  1. /printed-books/ethical-design?name=Ethical+Design و
  2. /printed-books/design-systems?name=Design+Systems .
 import Link from 'next/link'; const printedBooks = [ { name: 'Ethical Design', id: 'ethical-design' }, { name: 'Design Systems', id: 'design-systems' }, ]; export default function PrintedBooks() { return printedBooks.map((printedBook) => ( <Link href={{ pathname: `/printed-books/${printedBook.id}`, query: { name: `${printedBook.name}` }, }} > {printedBook.name} </Link> )); }

إذا قمت بتضمين مقطع ديناميكي في pathname ، فيجب عليك أيضًا تضمينه كخاصية في كائن الاستعلام للتأكد من أن الاستعلام محرف في pathname :

 import Link from 'next/link'; const printedBooks = [ { name: 'Ethical Design', id: 'ethical-design' }, { name: 'Design Systems', id: 'design-systems' }, ]; // In this case the dynamic segment `[book-id]` in pathname // maps directly to the query param `book-id` export default function PrintedBooks() { return printedBooks.map((printedBook) => ( <Link href={{ pathname: `/printed-books/[book-id]`, query: { 'book-id': `${printedBook.id}` }, }} > {printedBook.name} </Link> )); }

المثال أعلاه يحتوي على مسارات:

  1. /printed-books/ethical-design ، و
  2. /printed-books/design-systems .

إذا قمت بفحص سمة href في VSCode ، فستجد النوع LinkProps ، مع الخاصية href إلى نوع عنوان Url ، وهو إما string أو UrlObject كما ذكرنا سابقًا.

لقطة شاشة لنوع LinkProps الذي تم فحصه في VSCode
فحص LinkProps في VSCode. (معاينة كبيرة)

يؤدي فحص UrlObject أيضًا إلى الواجهة بالخصائص:

لقطة شاشة لـ <code> UrlObject </code> الذي تم فحصه في VSCode
فحص UrlObject في VSCode. (معاينة كبيرة)

يمكنك معرفة المزيد حول هذه الخصائص في وثائق وحدة عنوان URL الخاصة بـ Node.js.

إحدى حالات استخدام التجزئة هي الارتباط بأقسام محددة في الصفحة.

 import Link from 'next/link'; const printedBooks = [{ name: 'Ethical Design', id: 'ethical-design' }]; export default function PrintedBooks() { return printedBooks.map((printedBook) => ( <Link href={{ pathname: `/printed-books/${printedBook.id}`, hash: 'faq', }} > {printedBook.name} </Link> )); }

سيتم حل الارتباط التشعبي إلى /printed-books/ethical-design#faq .

تعرف على المزيد في المستندات.

next/router API

إذا كان next/link تعريفيًا ، فإن next/router ضروري. يعرض خطاف useRouter الذي يسمح بالوصول إلى كائن router داخل أي مكون وظيفة. يمكنك استخدام هذا الخطاف لإجراء التوجيه يدويًا ، وخاصة في بعض السيناريوهات التي لا يكفي فيها next/link ، أو حيث تحتاج إلى "ربط" التوجيه.

 import { useRouter } from 'next/router'; export default function Home() { const router = useRouter(); function handleClick(e) { e.preventDefault(); router.push(href); } return ( <button type="button" onClick={handleClick}>Click me</button> ) }

useRouter هو خطاف React ولا يمكن استخدامه مع الفئات. هل تحتاج إلى كائن router في مكونات الفئة؟ استخدم withRouter .

 import { withRouter } from 'next/router'; function Home({router}) { function handleClick(e) { e.preventDefault(); router.push(href); } return ( <button type="button" onClick={handleClick}>Click me</button> ) } export default withRouter(Home);

كائن router

يقوم كل من خطاف useRouter withRouter ذي الترتيب الأعلى مع جهاز التوجيه بإرجاع كائن جهاز توجيه بخصائص مثل pathname query و asPath و basePath الذي يمنحك معلومات حول حالة عنوان URL للصفحة الحالية locales locale defaultLocale الذي يوفر معلومات حول لغة نشطة أو مدعومة أو افتراضية حاليًا.

يحتوي كائن جهاز التوجيه أيضًا على طرق مثل push للتنقل إلى عنوان URL جديد عن طريق إضافة إدخال عنوان URL جديد في مكدس المحفوظات ، replace ، على غرار الدفع ولكنه يستبدل عنوان URL الحالي بدلاً من إضافة إدخال عنوان URL جديد إلى مكدس المحفوظات.

تعرف على المزيد حول كائن جهاز التوجيه.

تكوين المسار المخصص مع next.config.js

هذه وحدة Node.js عادية يمكن استخدامها لتكوين سلوك Next.js معين.

 module.exports = { // configuration options }

تذكر إعادة تشغيل الخادم في أي وقت تقوم فيه بالتحديث next.config.js . يتعلم أكثر.

مسار القاعدة

تم ذكر أن المسار الأولي / الافتراضي في Next.js هو pages/index.js مع المسار / . هذا قابل للتكوين ويمكنك جعل مسارك الافتراضي مسارًا فرعيًا للمجال.

 module.exports = { // old default path: / // new default path: /dashboard basePath: '/dashboard', };

ستدخل هذه التغييرات حيز التنفيذ تلقائيًا في تطبيقك مع توجيه جميع / المسارات إلى /dashboard .

يمكن استخدام هذه الميزة فقط مع Next.js 9.5 والإصدارات الأحدث. يتعلم أكثر.

زائدة مائلة

بشكل افتراضي ، لن تتوفر الشرطة المائلة اللاحقة في نهاية كل عنوان URL. ومع ذلك ، يمكنك تبديل ذلك بـ:

 module.exports = { trailingSlash: true };
 # trailingSlash: false /printed-books/ethical-design#faq # trailingSlash: true /printed-books/ethical-design/#faq

لا يمكن استخدام كل من ميزتي المسار الأساسي والشرطة المائلة اللاحقة إلا مع Next.js 9.5 وما فوق.

خاتمة

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

موارد ذات الصلة

  • التوثيق الرسمي لـ Next.js للصفحات
  • وثائق Next.js الرسمية لجلب البيانات
  • وثائق Next.js الرسمية لـ next.config.js
  • Next.js 10: الحل التلقائي لـ href
  • التوثيق الرسمي لـ Next.js لـ next / link
  • وثائق Next.js الرسمية للتالي / جهاز التوجيه