قم بتغذية البيانات إلى مكون Next.js باستخدام getInitialProps

كيفية تغذية البيانات إلى مكون Next.js باستخدام getInitialProps

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

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> </> ) }

لقد حصلنا على هذا الخطأ:

كيف يمكننا حل هذا؟ وكيف نجعل SSR يعمل للطرق الديناميكية؟

يجب علينا تزويد المكون بالدعامات ، باستخدام وظيفة خاصة تسمىgetInitialProps()الذي يتم إرفاقه بالمكون.

للقيام بذلك ، نقوم أولاً بتسمية المكون:

const Post = () => {
  //...
}

export default Post

ثم نضيف الوظيفة إليها:

const Post = () => {
  //...
}

Post.getInitialProps = () => { //… }

export default Post

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

لذلك يمكننا الحصول عليها باستخدامتدمير الكائنبناء الجملة:

Post.getInitialProps = ({ query }) => {
  //...
}

الآن يمكننا إعادة المنشور من هذه الوظيفة:

Post.getInitialProps = ({ query }) => {
  return {
    post: posts[query.id]
  }
}

ويمكننا أيضًا إزالة استيراد ملفاتuseRouter، ونحصل على المنشور منpropsتم تمرير الملكية إلىPostعنصر:

import posts from '../../posts.json'

const Post = props => { return ( <div> <h1>{props.post.title}</h1> <p>{props.post.content}</p> </div> ) }

Post.getInitialProps = ({ query }) => { return { post: posts[query.id] } }

export default Post

الآن لن يكون هناك خطأ ، وسيعمل SSR كما هو متوقع ، كما ترى التحقق من مصدر العرض:

الgetInitialPropsسيتم تنفيذ الوظيفة من جانب الخادم ، ولكن أيضًا على جانب العميل ، عندما ننتقل إلى صفحة جديدة باستخدامLinkمكون كما فعلنا.

من المهم ملاحظة ذلكgetInitialPropsيحصل ، في كائن السياق الذي يستقبله ، بالإضافة إلىqueryتعترض على هذه الخصائص الأخرى:

  • pathname: الpathقسم URL
  • asPath- تظهر سلسلة المسار الفعلي (بما في ذلك الاستعلام) في المتصفح

وهو في حالة الاستدعاءhttp://localhost:3000/blog/testسوف ينتج على التوالي إلى:

  • /blog/[id]
  • /blog/test

وفي حالة العرض من جانب الخادم ، سيتلقى أيضًا:

  • req: كائن طلب HTTP
  • res: كائن استجابة HTTP
  • err: كائن خطأ

reqوresسيكون مألوفًا لك إذا قمت بإجراء أي ترميز Node.js.

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


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