قصدم نگاهی سریع هست اگه کابرد رو دوست دارید بدونید سرچ بزنید نکست زیاد مقاله مفید داخل ویرگول هست.
دو نوع Static Generation ( ssg ) و Server-side Rendering (ssr) داره:
Static Generation:
کد html در زمان build-time ساخته میشه.
از توابع
getStaticProps
getStaticPaths
استفاده میکنه.
#نکته
وقتی محتوا داینامیک هست از getStaticProps استفاده کنید.
وقتی مسیر داینامیک هست از getStaticPaths استفاده کنید.
ویژگی callback
false
باشه فقط صفحات که در زمان build باشن نمایش داده میشن
true
باشه بعد build میتونیم یه عملی رو انجام بدیم بعد اون صفحه جدید به طور خودکار build بشه.
blocking
باشه تمام صفحاتی که بعد build موجود بشن رو راحت رندر میکنه.
ویژگی validation
به مقدار زمانی که صفحه ما بعد اون خودکار بازتولید میشه رو میگن
Server-side Rendering:
کد html توی هر ریکوئست ساخته میشه.
از getServerSideProps استفاده میکنه
#navigation
برای navigation کردن باید از Link استفاده کنیم که تگ a رو به عنوان فرزند به اون پاس میدیم که دو تا props میگیره
href
کا دو تا مقدار داره که اولی pathname و دومی query که مقدار slug ها رو میتونیم پاس بدیم
و یکی هم prefetch که اگه true باشه next یه سری اطلاعات رو از قبل میگیره
#component
Head
همون تگ head هست که همون مقادیر مثل meta و title رو میگیره
Image
برای مدیریت اندازه و... عکس ها
#style
از چند روش میشه
Hight-component
اولین کامپونتت که توسط نکست ابجاد میشه و میتونیم استایل ها مشترک بیین صفحاتمون رو اونجا دریافت کتیم.
Style-in-jsx
برای استایل های تکی استفاده میشه میتونیم تو کامپونتت داخل retrun این کد رو بنویسیم.
<style jsx>{
h1 {
color: red;
}}
</style>
css-module
در این روش ما یک فایل هم نام کامپوننت میسازیم و قبل پسوند css کلمه module میذاریم مانند : footer.module.css و بعد از اون با import کردن اون به استایل ها دسترسی دارم و داخل className={} از اون استفاده میکنیم
#baseUrl & @ #Default_path
برای تعیین مسیر شروع آدرس های سایت داخل baseurl و میتوان با @ آدرس های dafault در داخل فایل jsonconfig.json تعیین کرد
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["components/*"],
"@styles/*": ["styles/*"],
"@foo/*": ["components/foo/*"]
}
}
}
#Doument
از کامپوننت document_ برای اعمال یک سری تک های اچ تی ام ال به صورت پیش فرض برای پروژه که میتونه یک تابع به عنوان getInitialProps استفاده کرد که فقط داخل این تابع استفاده میشه.
#suppressHydrationWarning
با استفاده از این پروپتی به صورت زیر میتونیم ارور متفاوت بودن نتیجه در سمت کلاینت و سرور رو به غیر فعال کنیم.
<div suppressHydrationWarning={true}>
{now.getMilliseconds()}
</div>
