در Nextjs از انواع روش های استایل دهی پشتیبانی میشه. نحوه استفاده ازشون هم به روش های زیر هست:
در این روش از styled-jsx که یک کتابخانه CSS-in-JS هست استفاده می کنیم و استایل های کامپوننت مورد نظر رو درون همون کامپوننت می نویسیم. برای مثال posts.js رو به این صورت ویرایش کنید:
برای اینکه این روش کار کنه باید استایل ها درون {`...`} قرار بگیره
این روش زیاد استفاده نمیشه و معمولا از کتابخانه های جایگزین CSS-in-JS یا روش های بعدی بیشتر استفاده میشه. دلیلش هم ایجاد hard code درون فایل ها هست که ایجاد تغییرات رو در آینده سخت می کنه
با استفاده از این روش استایل هایی که در سراسر پروژه نیاز داریم رو اعمال می کنیم. برای این کار نیاز به app.js_ داریم. همونطور که در درس قبل گفتم، تغییراتی که در این فایل انجام می دیم، در تمام برنامه انجام میشه. app.js_ رو باز کنید:
در خط اول، فایل globals.css فراخوانی شده که تمام استایل های سراسری درونش قرار داره. این فایل رو دانلود کنید و محتویاتش رو با styles/globals.css جایگزین کنید. این فونت ها رو هم دانلود کنید و در مسیر /public/fonts قرار بدید. حالا اگه به مسیر localhost:3000/posts برید، می بینید که به همین سادگی استایل های سراسری اعمال شده.
اگر استایل های سراسری اعمال نشد، سرور رو با دستور ctrl + c متوقف کنید و دوباره سرور رو راه اندازی کنید
با استفاده از css modules می تونید استایل های هر کامپوننت رو به صورت جداگانه بنویسید و هر جا که نیاز داشتید ازش استفاده کنید. این نوع استایل دهی از فایل های باندل شده جاواسکریپت برای لود شدن استفاده می کنه و هنگام استفاده هیچ تداخلی با بقیه استایل ها ایجاد نمی کنه (حتی اگر نام سلکتور ها رو شبیه به هم بگذارید).
نحوه استفادش هم دقیقا مثل استفاده در React هست. اگه pages/index.js رو باز کنید می بینید که درونش از css modules استفاده شده:
استایل ها از styles/Home.module.css فراخوانی شده که می تونید درون مسیر styles ببینیدش:
خب روش های استایل دهی در Nextjs هم گفته شد. از قسمت بعد قراره که شروع به ساخت پروژه کنیم
