Next.js چیست؟ راهنمای شروع

توی این پست یاد میگیریم که next.js چیه و چطور میتونیم از اون استفاده کنیم.

برای ساخت یک وب اپلیکیشن کامل با ری اکت از ابتدا، باید یک سری موارد رو هم در نظر بگیریم:

• کدها رو باید با استفاده از یک bundler مثل webpack بسته بندی کنیم و با استفاده از کامپایلری مثل babel بتونیم transform کنیم.
• باید بهینه سازی های پروداکشن مثل code splitting رو انجام بدیم.
• ممکنه بخوایم بعضی از صفحات رو برای پرفورمنس و سئو pre-render کنیم. یا از server-side rendering یا client-side rendering استفاده کنیم.
• برای اتصال برنامه ری اکت به data store، ممکنه مجبور باشید چند خط کد server-side بنویسید.

نکست جی‌اس

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

لیستی از ویژگی های داخلی نکست جی‌اس:

• یک سیستم routing مبتنی بر صفحات (pages)
• پشتیبانی از server-side rendering و static generation برای pre-render
• تقسیم کدها به صورت خودکار برای لودکردن سریع صفحات
• پشتیبانی داخلی از css و sass
• پشتیبانی از fast refresh در محیط توسعه
• قابلیت api routes برای ساخت endpoint ها با توابع بدون سرور

ستاپ کردن پروژه

برای ساخت یک پروژه نکست ‌جی اس میتونید از یک ابزار به نام create-next-app استفاده کنید.

npx create-next-app project-name --use-npm

بعد از اینکه پروژه با موفقیت ساخته شد، وارد فولدر مورد نظرتون بشید.

cd project-name

در نهایت پروژه رو در حالت توسعه (development) اجرا کنید.

npm run dev

اینم اولین پست من در رابطه با next.js بود. سعی میکنم در این سری آموزشی بتونم هر آنچه که یاد میگیرم رو به طور ساده بیان کنم تا شما هم بتونید راحت یاد بگیرید.