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

كيفية إعداد المحتوى الديناميكي في موقع Next.js

في الالمنشور السابقرأينا كيفية ربط الصفحة الرئيسية بصفحة المدونة.

تعد المدونة حالة استخدام رائعة لـ Next.js ، وسنستمر في استكشافها في هذا الفصل عن طريق إضافةمشاركات المدونة.

مشاركات المدونة لها عنوان URL ديناميكي. على سبيل المثال ، قد يكون لمنشور بعنوان "Hello World" عنوان URL/blog/hello-world. قد يكون هناك عنوان URL منشور بعنوان "مشاركتي الثانية"/blog/my-second-post.

هذا المحتوى ديناميكي ، ويمكن أن يؤخذ من قاعدة بيانات أو ملفات تخفيض السعر أو أكثر.

يمكن لـ Next.js تقديم محتوى ديناميكي بناءً على ملفعنوان URL ديناميكي.

نقوم بإنشاء عنوان URL ديناميكي عن طريق إنشاء صفحة ديناميكية بامتداد[]بناء الجملة.

كيف؟ نضيف أpages/blog/[id].jsملف. سيتعامل هذا الملف مع جميع عناوين URL الديناميكية الموجودة ضمن ملف/blog/المسار ، مثل تلك التي ذكرناها أعلاه:/blog/hello-worldو/blog/my-second-postو اكثر.

في اسم الملف ،[id]داخل الأقواس المربعة يعني أن أي شيء ديناميكي سيتم وضعه داخلidمعلمةخاصية الاستعلامالتابعجهاز التوجيه.

حسنًا ، هذه أشياء كثيرة جدًا في وقت واحد.

ما هوجهاز التوجيه؟

الموجه عبارة عن مكتبة مقدمة من Next.js.

نحن نستوردها منnext/router:

import { useRouter } from "next/router";

وبمجرد أن يكون لديناuseRouter، نقوم بإنشاء كائن جهاز التوجيه باستخدام:

const router = useRouter();

بمجرد أن نحصل على كائن جهاز التوجيه هذا ، يمكننا استخراج المعلومات منه.

على وجه الخصوص ، يمكننا الحصول على الجزء الديناميكي من عنوان URL في ملف[id].jsملف عن طريق الوصولrouter.query.id.

لذلك دعونا نواصل تطبيق كل هذه الأشياء عمليًا.

قم بإنشاء الملفpages/blog/[id].js:

import { useRouter } from "next/router";

export default () => { const router = useRouter();

return ( <> <h1>Blog post</h1> <p>Post id: {router.query.id}</p> </> ); };

الآن إذا ذهبت إلىhttp://localhost:3000/blog/testجهاز التوجيه ، يجب أن ترى هذا:

يمكننا استخدام هذاidالمعلمة لجمع المنشور من قائمة المشاركات. من قاعدة بيانات ، على سبيل المثال. لتبسيط الأمور سنضيف ملفposts.jsonملف في المجلد الجذر للمشروع:

{
  "test": {
    "title": "test post",
    "content": "Hey some post content"
  },
  "second": {
    "title": "second post",
    "content": "Hey this is the second post content"
  }
}

الآن يمكننا استيراده والبحث عن المنشور من ملفidمفتاح:

import { useRouter } from "next/router";
import posts from "../../posts.json";

export default () => { const router = useRouter();

const post = posts[router.query.id];

return ( <> <h1>{post.title}</h1> <p>{post.content}</p> </> ); };

يجب أن تظهر لنا إعادة تحميل الصفحة هذه النتيجة:

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

لماذا؟ لأنه .. أثناء العرض ، عندما تتم تهيئة المكون ، لا توجد البيانات بعد. سنرى كيفية توفير البيانات للمكون باستخدام getInitialProps في الدرس التالي.

في الوقت الحالي ، أضف القليلif (!post) return <p></p>تحقق قبل إعادة JSX:

import { useRouter } from "next/router";
import posts from "../../posts.json";

export default () => { const router = useRouter();

const post = posts[router.query.id]; if (!post) return <p></p>;

return ( <> <h1>{post.title}</h1> <p>{post.content}</p> </> ); };

الآن يجب أن تعمل الأشياء. في البداية يتم تقديم المكون بدون الديناميكيrouter.query.idمعلومة. بعد التقديم ، يقوم Next.js بتشغيل تحديث بقيمة الاستعلام وتعرض الصفحة المعلومات الصحيحة.

وإذا عرضت المصدر ، فهناك هذا فارغ<p>علامة في HTML:

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

يمكننا إكمال مثال المدونة بإدراج تلك المنشورات فيpages/blog.js:

import posts from "../posts.json";

const Blog = () => ( <div> <h1>Blog</h1>

<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
  {Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">posts</span>).<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">value</span>, <span style="color:#a6e22e">index</span>) =&gt; {
    <span style="color:#66d9ef">return</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">key</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">index</span>}<span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">title</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;;</span>
  })}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>

</div> );

export default Blog;

ويمكننا ربطهم بصفحات المنشورات الفردية عن طريق الاستيرادLinkمنnext/linkواستخدامه داخل حلقة المشاركات:

import Link from "next/link";
import posts from "../posts.json";

const Blog = () => ( <div> <h1>Blog</h1>

<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
  {Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">posts</span>).<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">value</span>, <span style="color:#a6e22e">index</span>) =&gt; {
    <span style="color:#66d9ef">return</span> (
      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">key</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">index</span>}<span style="color:#f92672">&gt;</span>
        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/blog/[id]"</span> <span style="color:#a6e22e">as</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"/blog/"</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">0</span>]}<span style="color:#f92672">&gt;</span>
          <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">a</span><span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">title</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/a&gt;</span>
        <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/Link&gt;</span>
      <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
    );
  })}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>

</div> );

export default Blog;

تحميل مجانيكتيب Next.js


المزيد من البرامج التعليمية التالية: