3) شروع کار با Nextjs

در این قسمت قراره که محیط توسعه خودمون رو برای شروع کار راه اندازی کنیم. برای این کار نیاز به یه سری ابزار ها داریم:

ابزار های لازم

قبل از راه اندازی محیط توسعه نیازه که node.js داخل سیستم تون نصب باشه. به یک package manager هم داریم که وابستگی های پروژه رو مدیریت کنه. شما می تونید از npm که به صورت خودکار با node.js نصب میشه استفاده کنید یا به صورت جداگونه yarn رو نصب کنید.

هیچ فرقی بین استفاده این دو package manager وجود نداره و شما می تونید هر دو رو نصب کنید اما بهتره فقط از یکیشون داخل پروژه استفاده کنید تا مشکلی پیش نیاد.

برای کدنویسی پروژه هم از محبوب دلها، vscode استفاده می کنم. اما شما می تونید از ادیتوری که باهاش راحتید استفاده کنید.

راه اندازی محیط توسعه

بعد از نصب ابزار ها می رسیم به راه اندازی محیط توسعه. Nextjs هم دقیقا شبیه به React دو روش برای راه اندازی محیط توسعه قرار داده:

• راه اندازی دستی: در این روش باید به صورت دستی تمام وابستگی های پروژه رو نصب کنید و پیکربندی های لازم رو انجام بدید. این روش بهینه تره ولی به خاطر سختی که داره معمولا توسعه دهندگان حرفه ای ازش استفاده می کنن.

• راه اندازی خودکار: این روش به صورت خودکار تمام وابستگی های یک پروژه Nextjs رو نصب می کنه و پیکربندی های لازم رو هم انجام میده. این روش ساده تره ولی برای پروژه های واقعی توصیه نمیشه و بیشتر برای کسایی مثل ما که در حال یادگیری Nextjs هستیم بدرد می خوره تا براحتی کار رو شروع کنیم. خب ما هم قراره از این روش استفاده کنیم.

برای راه اندازی خودکار، Nextjs ابزاری رو برای ما فراهم کرده به نام create-next-app که به اختصار بهش CRA میگن. ترمینال رو داخلش مسیری که می خواید پروژه تون قرار بگیره باز کنید و دستور زیر رو درونش اجرا کنید:

npm

npx create-next-app@latest  [project-name]

yarn

yarn create next-app  [project-name]

بعد از اجرای دستور بالا، نصب و پیکربندی پروژه شروع میشه. زمانی که نصب تموم بشه این دستور رو داخل ترمینال vscode اجرا کنید تا پروژه در محیط توسعه داخل سرور محلی راه اندازی بشه:

npm

npm run dev

yarn

yarn dev

آدرس localhost:3000 رو داخل مرورگرتون باز کنید تا صفحه اصلی پروژه تون رو مشاهده کنید:

آشنایی با ساختار پروژه

وقتی پروژه رو درون ادیتور باز می کنیم، ساختارش باید در حالت عادی به این صورت باشه:

اکثرشون براتون آشناست به جز چند مورد که توضیح میدم:

• پوشه pages: تمام فایل های اصلی مون درون این پوشه رو قرار می گیره.
• پوشه api: برای ساخت API های مورد نیازمون استفاده میشه
• فایل eslintrc.json: پیکربندی های لازم برای eslint داخل این فایل انجام میشه
• فایل next.config.js: پیکربندی های مربوط به Nextjs رو داخل این فایل انجام میدیم
• فایل app.js_: در برگیرنده تمام برنامه هست و اگه بخوایم تغییری کلی درون برنامه ایجاد کنیم داخل این برنامه ایجاد می کنیم.
• فایل index.js: تغییرات در صفحه اصلی برنامه رو داخل این فایل انجام میدیم
• فایل vercel.svg: کاربردی نداره (حذفش کنید)

اگه دقت کرده باشین، هیچ خبری از فایل index.html درون پوشه public نیست. به این دلیل که Nextjs از الگوی متفاوتی برای اجرای کدهاش در حالت توسعه استفاده می کنه

نام بعضی از فایل ها برای Nextjs مفهوم خاصی دارند و تغییرنام شون ممکنه در آینده برامون مشکل ایجاد کنه. فایل هایی مثل app.js_

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

داخل اینترنت که گشتم به هچمین تعریفی ازش برخوردم:

"All of the code and files located withing that folder has been processed specifically to allow browsers use it more efficiently."

"تمام کدها و فایل‌های موجود در آن پوشه به‌طور خاص پردازش شده‌اند تا به مرورگرها اجازه استفاده کارآمدتر از آن را بدهد."

انصافا خیلی به کارم نیومد برای همین دانسته های خودم رو ازش براتون میگم:

این پوشه زمانی که در حالت توسعه هستیم تمام فایل های اصلی رو درون خودش cache می کنه و برای ما در مرورگر به نمایش می ذاره. به عبارتی تمام فایل محتویات خروجی ما در حالت توسعه درون این پوشه قرار داره.

برای اطمینان وقتی که محیط توسعه در حال اجراست این پوشه رو حذف کنید. حالا اگه به درون مرورگر نگاه کنید، می بینید که پروژه به خوبی به فنا رفته:

هر بار که وارد محیط توسعه بشید این پوشه از اول ساخته میشه. پس برای درست شدن خروجی، کافیه که دوباره وارد حالت توسعه بشید.

خب خبر خوب اینه که قراره قسمت بعد کدنویسی رو شروع کنیم.

منبع

where does nextjs put build folder