در Nextjs می تونیم <head> هر صفحه رو ویرایش و سفارشی سازی کنیم. قراره توی این درس یاد بگیریم که چطور این کار رو انجام بدیم:
یکی دیگر از کامپوننت های از پیش تعریف شده Nextjs هست که برای ویرایش کردن <head> هر صفحه به کار میره. درون این کامپوننت می تونید از تمامی عناصر قابل استفاده درون <head> استفاده کنید.
برای مثال کامپوننت posts.js رو به این صورت ویرایش کنید:
در اینجا ما <Head> رو از Nextjs فراخوانی کردیم و برای اینکه با بقیه عناصر تداخل نداشته باشه، با استفاده از React Fragment درون کامپوننت خودمون استفادش کردیم.
اگه به آدرس localhost:3000/posts برید، می بینید که عنوان صفحه به "پست ها" تغییر کرده:
برای استفاده از فایل های اسکریپتی خارج از پروژه از این کامپوننت استفاده میشه. به علاوه دارای خصوصیاتی برای مدیریت نحوه لود شدن اسکریپت هست. برای استفاده از این کامپوننت، کافیه posts.js رو به این صورت ویرایش کنید:
در این جا من از CDN کتابخانه tailwind css استفاده کردم و ظاهر متن رو به این شکل تغییر دادم:
کاربرد دو خصوصیت جدید درون </ Script> به این صورت هست:
توجه کنید که برای اینکه </ Script> بتونه اجرا بشه باید بیرون از <Head> قرارش بدیم.
در ضمن اگه نیازی به مدیریت نحوه لود شدن اسکریپت ندارید، می تونید از <script> به صورت عادی درون <Head> استفاده کنید:
