سلام اشکان هستم و توی قسمت قبل ایده ساخت یک وبلاگ مثل ویرگول رو مطرح کردم و فکر میکنم موضوع جذابی میتونه باشه چون ما یک نمونه زنده داریم که داریم باهم ازش استفاده میکنیم و محاسن و معایب خودش رو داره، میتونیم از محاسنش استفاده کنیم و معایبش رو برطرف کنیم و فیچر جدید بهش اضافه کنیم و با هم گسترشش بدیم.
تصمیم دارم سمت فرانت رو با reactjs بنویسم و backend رو هم با nodejs پس برای ترکیب کردن اینها چه بهتر که از فریمورک Next.js استفاده کنیم که هم pre-rendering رو پشتیبانی میکنه هم بصورت پیشفرض یک سری امکانات مثل routing هم سمت کلاینت و هم سمت سرور داره، من یک آموزش Next.js هم مدتی قبل شروع کردم که فرصت نکردم ادامه بدم و فکر میکنم فرصت خوبیه که اون رو هم در کنارش جلو ببرم.
همونطور که قبلا گفتم این آموزش برای افراد مبتدی نیست و نمیشه توی یک پروژه بزرگ زمان برای توضیح مفاهیم اولیه صرف کرد اما اگر شما مبتدی هستید و میخواید همراه بشید من سعی میکنم از طریق کامنت یا ارجاع به پست‌های آموزشی موازی کمک کنم ایراداتتون برطرف بشه اما توقع نمیره اینجا بخوایم هیچ موضوعی رو باز کنیم فقط میخوایم اجرا کنیم و بریم جلو.
همیشه سخت ترین کار شروع کردنه... بعدش همه چی کم کم سر جای خودش قرار میگیره.
پس بیایید کار سخت رو امروز انجام بدیم و پروژه رو استارت بزنیم. کد‌های پروژه رو روی مخزن گیت‌هاب قرار میدم و حتما آموزش‌های ویدیویی هم کنارش خواهیم داشت و ویدیوها توی کانال یوتیوب من آپلود میشن (فعلا قصدی برای آپلود روی آپارت یا پلتفرم‌های دیگه ندارم).
برای اسم پروژه هنوز تصمیم جدی ندارم فعلا دامنه we-blog.ir رو ثبت کردم ولی اگر پیشنهاد بهتری داشتید و دامنه ش هم قابل ثبت بود استقبال میکنم.
خوب بریم سراغ استارت پروژه... یک فولدر به نام weblog بسازید داخل فولدر ترمینال رو باز کنید و دستور زیر رو برای راه اندازی یک پروژه Next.js اجرا کنید
npx create-next-app . --use-npm
این دستور یک بویلرپلیت برای Next.js ایجاد میکنه مثل دستور create-react-app اگر آشنایی داشته باشید.
اون نقطه که گذاشتیم یعنی root پروژه همین مسیریه که هستیم و سویچ --use-npm هم میگه بجای yarn از npm استفاده کن. پیشنهاد میکنم اگه میخواید حداکثر همراهی رو با من داشته باشید VSCode نصب کنید چون من از خیلی امکاناتی استفاده میکنم که ادیتورها یا IDEهای دیگه ندارند، با دستور زیر پروژه رو توی وی‌اس‌کد باز کنید:
code .
من یک سری آموزش مفصل برای VSCode دارم و در حال ادامه هم هست اگر مایلید از این آدرس میتونید دنبال کنید.
ترمینال VSCode رو با فشردن CTRL+` باز کنید پروژه رو اجرا کنید:
npm run dev
قاعدتا باید بدون مشکل روی پورت ۳۰۰۰ براتون یک تمپلیت ساده بالا بیاد نکته اینکه اگر سورس صفحه رو توی بروزر نگاه کنید میبینید که بر خلاف پروژه‌های Reactjs یک صفحه html دارید این همون قابلیت pre-renderingی هست که Next.js داره یعنی بر خلاف React که تمپلیت شما رو سمت کلاینت رندر میکنه این فریمورک ابتدا سمت سرور یک رندر میگیره از صفحه و اون رو میفرسته و از ریکوئست‌های بعدی صفحه سمت کلاینت ساخته میشه و کمک میکنه که موتورهای جستجو بتونند سایت رو ایندکس کنند.
خوب برای اینکه خودمون هم یک کاری کرده باشیم بیاید یکم تر و تمیز کاری کنیم. از پوشه pages فایل index.js رو باز کنید و هرچی که بین پرانتزهای return هست پاک کنید و بجاش فعلا این رو بگذارید:
<div> We Blog Here </div>
بالای صفحه هر دو import رو پاک کنید.
از پوشه styles هم فایل Home.module.css رو پاک کنید.
حالا برگردید به بروزر اگر صفحه رو نبسته باشید میبینید که اتوماتیک تغییرات شما اعمال شده چون Next.js بصورت پیشفرض Hot module reloading رو توی تنظیمات وب پک داره.
دیگه طولانی ترش نمیکنم توی قسمت بعدی ساختار سایت رو تعریف میکنیم.
ممنون که همراهی میکنید برنامه نویس موفقی باشید.
