ریاکت برای غارنشینان 4 (styled-component)

سلام برای ادامه و نصب styled-component روی nextjs لازمه که کمی بیشتر با نحوه ی کار نکست آشنا بشینصفحات دیفالت next.jsاگه دقت کرده باشین ما در ابتدا که هنوز توی پوشه ی pages چیزی نساخته بودیم ,موقع اجرا یه ارور 404 میگرفتیم که شکل و استایل داشت ... در واقع صفحه ی ارور هم یکی از صفحات پوشه ی pages هست که اگه تعیین نشده باشه نکست دیفالت صفحه ی خودش رو نشون میده ولی اگه فایلی به اسم _error.tsx بسازیم .نکست موقع نمایش خطا میاد و این فایل رو رندر میکنه و نمایش میده. شما میتونین محتوای دیفالت صفحه ی ارور رو از این آدرس نگاه کنین و اگه دوست داشتین کمی تغییرش بدین و در پوشه ی pages خودتون قرار بدین . من اینجا خود این فایل رو بدون تغییر میزارمش توی پوشه pages تا اگه بعدا لازمم شد تغییرش بدم .با دیدن کد بالا هول نشین .. کم کم متوجه همه چیز خواهید شداما چرا این رو گفتم؟اول از همه این که نکست جادو نمیکنه و نباید چیزی برامون نامعلوم باقی بمونهدوم این که علاوه بر _error دوتا فایل دیگه هم هست که نکست به صورت دیفالت داره از اونها استفاده میکنه و ما برای استفاده از styled-component نیاز داریم که تغییرشون بدیماین دو تا فایل اسماشون _app و _document هست که مقدار های دیفالتشون رو میتونین با کلیک روی اسمشون ببینینفایل document در واقع تشکیل دهنده ی ساختار اون html اولیه هست . این فایل فقط سمت سرور ران میشه و فقط نتیجه ش سمت کاربر فرستاده میشهفایل _app هم سمت سرور رندر میشه و هم سمت کاربربه طور مثال وقتی شما درخواست رندر صفحه ی index رو میدین . اول _document صدا زده میشه . بعد _app صدا زده میشه و بعد index و نتیجه (html رندر شده) همراه با فایل _app و index.js سمت کاربر فرستاده میشه .این وسط هم اگه جایی اروری پیش بیاد فایل _error رندر میشه و فرستاده میشه.خب پس فایل های _app و _document جزو فایل هایی هستن که همیشه و در هر بار فراخوانی یه صفحه اجرا میشنحالا اینا چه ربطی به styled-component داره؟موقعی که میخوایم به صورت ssr صفحه رو رندر کنیم لازم داریم تا استایل کامپوننت ها رو بتونیم داخل فایل html جا بدیم .یعنی سمت سرور باید استایل کامپوننت هارو جمع کنیم و داخل تگ </style> داخل قسمت head قرار بدیم ...میتونیم این کار رو برای تک تک کامپوننت ها جدا انجام بدیم ...ولی دیوونه ایم مگه؟ بهتره این کار رو یه بار و داخل فایل _document انجام بدیم تا همه ی کامپوننت ها بتونن ازش استفاده کنن و این اتفاق فقط سمت سرور بیافتهنصب styled-componentپس الان ابتدا styled-component رو با دستور زیر نصب میکنیم و بعد فایل _document رو تغییر میدیم تا استایل های رندر شده توسط styled-component رو بچسبونه به head فایل html.علاوه بر اون نیازه که ما یه کم فایل babel رو هم تغییر بدیم و کتابخونه ی babel-plugin-styled-componentsرو نصب کنیم. این فایل برای این که موقع ssr بابل اسم کلاس ها که به صورت هش هست رو بشناسه لازمه و در کل باعث میشه دولوپر ها راحت تر کار کنن پس ما لازم داریم که فایل بابل دیفالت نکست رو هم کمی دستکاری کنیم . بزارین اول کتابخونه هارو نصب کنیمبرای نصب کد زیر رو توی ترمینال میزنیمnpm install --save styled-componentsnpm install --save-dev babel-plugin-styled-componentsبرای این که تایپ های styled-component هم نصب بشه کد زیر رو بزنیدnpm install --save-dev @types/styled-componentsتنظیمات بابل هم به صورت دیفالت فایلش نمایش داده نمیشه . شما میتونین توی روت اصلی پروژه یه فایل به اسم .babelrc درست کنین و تنظیمات مورد نظزتون رو داخل انجام بدین تنظیمات دیفالتش یه همچین چیزیه{ &quotpresets&quot: [&quotnext/babel&quot] }اگه دقیق تر میخواین ببینین که next/babel چیه یه نگاه به این لینک بندازینفارغ از پیچیدگی های لینک بالا ما این پلاگین رو به تنظیمات بابل اضافه میکنیم و در نهایت یه فایل .babelrc داریم که حاوی کد زیره و داخل روت اصلی پروژه کنار فایل package.json قرار میگیره{ &quotpresets&quot: [&quotnext/babel&quot], &quotplugins&quot: [[&quotstyled-components&quot, { &quotssr&quot: true }]] }الان فقط میمونه تغییر _documentچقدر اینجا کد نوشتن سخته...توی لینک زیر گذاشتم https://gist.github.com/straxico/77740ef488b6046f8f09c81de70e904e این فایل رو داخل پوشه ی pages باید بزاریددر واقع این فایل یه extends از کلاس داکیومنت که جزیاتش رو توو این لینک دیدین میسازه و توو قسمت getInitialProps میاد و یه متغیر به اسم استایل میسازه و استایل ها رو میریزه توشخب کار تموم شد و styled-component هم نصب شد .مرحله ی بعدی ساختار دادن به پوشه ها و نصب eslint و راه اندازی گیت پروژه هستولی قبلش بزارین یه تست کنیم ببینیم کار میکنه؟خب واسه تست کد index.tsx رو تغییر میدم import React from 'react' import styled from 'styled-components' const Title = styled.h1` font-size: 5em; text-align: center; color: palevioletred; `; const Home=()=>(<Title>hello world</Title>) export default Homeو بعد از زدن npm run dev نتیجه رو میبینین