19) دستورات build در Nextjs

در این قسمت، نیازی نیست که شما تغییراتی که من در برنامه ایجاد کردم رو انجام بدید. همین که تصاویر خروجی رو ببینید، کاربرد این دستور رو متوجه می شید.

توی این قسمت قراره با روش های build گرفتن از پروژه آشنا بشیم. برای این کار چند دستور وجود داره:

دستور build

با استفاده از این دستور، برنامه رو وارد مر حله build می کنیم. این دستور رو در ترمینال اجرا کنید:

npm

npm run build

yarn

yarn build

بعد از اجرای این دستور، Nextjs شروع به build گرفتن درون پوشه next. می کند:

دستور start

برای اینکه خروجی build رو ببینم از این دستور استفاده می کنیم:

npm

npm start

yarn

yarn start

اگر به مسیر localhost:3000/posts بریم، پست ها به خوبی به نمایش در میاد:

برای تغییر آدرس پورت می تونید از دستور {next start -p {PORT استفاده کنید تا تداخلی بین مسیر ها پیش نیاد:

&quotstart&quot: &quotnext start -p 4000&quot

اگر روی پست ها کلیک کنید، پست ها با سرعت بیشتری نسبت به حالت توسعه بارگذاری میشن. دلیلش هم همونطور که قبلا گفتم اینه که pre-rendering در محیط توسعه فقط به صورت SSR اجرا میشه. حالا که پروژه رو حالت build از SSG استفاده می کنه، می تونیم تفاوت عملکرد این دو روش رو ببینیم.

حالا بیاید پوشه next. رو از طریق live server اجرا درون سرور مجازی اجرا کنیم:

می بینید که خروجی به خوبی درون مرورگر نمایش داده نشده. دلیلش اینه که این حالت build که ما در پوشه next. گرفتیم به صورت دینامیک هست. برای اینکه به صورت استاتیک build بگیریم باید از next export استفاده کنیم:

اسکریپت next export

در Nextjs اسکریپتی به نام next export وجود داره که باهاش می تونیم از برنامه مون به صورت کاملا استاتیک خروجی بگیریم. اما این اسکریپت به خاطر ماهیتش، یه سری محدودیت هایی داره:

• قابلیت Image Optimization در این دستور کار نمی کنه. پس نباید از </ Image> استفاده کنیم.
• قابلیت API Routes در این دستور غیر فعال میشه. پس نباید از ()getServerSideProps استفاده کنیم.

اگر از قابلیت های بالا استفاده کرده باشید، موقع اجرای دستور next export به خطا بر می خورید.

به همین دلیل قبل از استفاده از این دستور، تمام کامپوننت های </ Image> رو تبدیل به </ img> می کنم:

دقت کنید که باید فراخوانی های </ Image> رو هم حذف کنید

حالا برای استفاده از این اسکریپت package.json رو باز می کنیم:

در قسمت scripts دستور build رو به این صورت ویرایش کنید:

در نهایت دوباره دستور build رو اجرا می کنیم. بعد از اجرای این دستور، پوشه جدیدی به نام /out درون پروژه ایجاد میشه:

خروجی نهایی استاتیک مورد نظرمون درون این پوشه قرار داره که باید درون سرور قرار بگیره. حالا اگر این پوشه رو با live server اجرا کنیم، خروجی به خوبی نمایش داده میشه:

منبع

Static HTML Export