دروکەی یەکەم: دەستپێکردن بۆ Next.js و ئامادەکردنی چارەسەری کار

Next.js چیە؟

Next.js فرەیموورکێکی کۆدی باز (Open Source)ە بۆ دروستکردنی ئەپڵیکەیشنەکانی وێب بە بەکارهێنانی React.js. ئەمە لەلایەن شۆرەکە Vercel دروست کراوە و هەدفەکەی ئاسانکردنی دروستکردنی ئەپڵیکەیشنە نوێ و پێشکەوتووی وێبە، لەگەڵ پشتگیریی خوێندنەوەی سەری خزمەتگوزار (SSR)، دروستکردنی ماڵپەڕە جێگیرەکان (SSG)، و باشترکردنی ئەنجامی SEO.

ئەو باشترین تایبەتمەندییانەی Next.js:

• خوێندنەوەی سەری خزمەتگوزار (SSR): ڕەنگە ئەوە بکات کە ماڵپەڕەکانت لە سەر خزمەتگوزارەکەت بەردەوام بن، ئەمەش باشترین ئەنجام بۆ موتورە گەڕانەوەکان دەدات.
• دروستکردنی ماڵپەڕە جێگیرەکان (SSG): ڕەنگە ئەوە بکات کە ماڵپەڕە جێگیر دروست بکات لەکاتی دروستکردنی ئەپڵیکەیشنەکەدا، ئەمەش زۆر خێرا دەکات.
• ئەوتووماتیک URL: دەتوانیت ماڵپەڕە بنێریت بەپێی شێوازی پەڕگەکان.
• CSS-in-JS: ئامرازەکانی تاقیکراو بۆ بەڕێوبەری ئەستایلەکانی هەیە.
• ڕێگە API: دەتوانیت API دروست بکەیت لەناو پڕۆژەکەتدا بەبێ پێویست بە خزمەتگوزارێکی جیاواز.
• باشترکردنی ئەنجام: تایبەتمەندییەکانی وەک Code Splitting و Automatic Image Optimization هەیە.

بۆچی بەڵێت یاد بگریت Next.js؟

• ئەگەر بەرنامەی وێبی نوێ و خێرا بۆ دروستکردن بەدیکەیت، Next.js ھەڵبژاردنی باشەکەیە.
• ئەمە یارمەتی دەدات کە تاقیکردەوەی بەکارهێنەر و ئەنجامی SEO باشتر بکەیت.
• زۆر لە کۆمپانیای گەورە وەک Netflix، TikTok، و Twitter ئەم فرەیموورکە بەکار دەهێنن.
• ئامرازە قەدرەکان بۆ کەمکردنی کات و هەوڵ لە کاتی توێژینەوەدا پێشکەش دەکات.

ئامادەکردنی چارەسەری کار

گەشە یەکەم: سازکردنی Node.js و NPM

پێش دەستپێکردن بە یادکردنی Next.js، پێویستە Node.js و NPM (Node Package Manager) لەسەر ئامێرەکەت ساز بکەیت. Node.js لەم بەستەرەوە دابەزانە: https://nodejs.org/

بۆ دڵنیابوون لەوەی Node.js و NPM سازکراوە، Terminal یان Command Prompt کردارەکانی خوارەوە بەکاربهێنە:

node -v
npm -v

ئەگەر وەشانەکان نیشان بدەن، ئەمە واتای ئەوەیە کە Node.js و NPM سازکراوە.

گەشە دووهەم: دروستکردنی پڕۆژەیەکی نوێی Next.js

بۆ دروستکردنی پڕۆژەیەکی نوێی Next.js، کردارەکەی خوارەوە بەکاربهێنە:

npx create-next-app@latest my-next-app

my-next-app ناوی پڕۆژەکەیە. دەتوانیت ئەم ناوە بگۆڕیت بۆ هەر ناوێک کە دەتەوێت. دوای ئەوەی کردارەکە بەکاربهێنیت، پەڕگەی پڕۆژەکە دروست دەبێت و هەموو کێشەیەکی پێویست دابەزانراوە.

گەشە سێهەم: گەیشتن بۆ پەڕگەی پڕۆژە

دوای دروستکردنی پڕۆژەکە، بەکاربهێنەرەوە بۆ پەڕگەی پڕۆژە بەکاربهێنە:

cd my-next-app

گەشە چوارەم: ڕاگرتنی پڕۆژەکە

بۆ ڕاگرتنی پڕۆژەکە لەسەر ئامێرەکەت، کردارەکەی خوارەوە بەکاربهێنە:

npm run dev

خزمەتگوزارەکە لەم ناونیشانەوە ڕاگیرێت: http://localhost:3000

تێگەیشتن لە شێوازی بنچینەیی پڕۆژەکە

دوای ڕاگرتنی پڕۆژەکە، با بەردەوام بین لە شێوازی بنچینەیی پڕۆژەکە:

• pages/: ئەم پەڕگەیە پەڕگەی ماڵپەڕەکانە. هەر پەڕگەیەک لەم پەڕگەیەدا ماڵپەڕێکی تایبەت بۆ ئەپڵیکەیشنەکەتە.
• public/: ئەم پەڕگەیە فایلە جێگیرەکانی وەک وێنە و فایلەکانی تری هەیە کە بەردەوام دەکرێت بگەڕێت.
• styles/: ئەم پەڕگەیە فایلە ئەستایلەکانی CSS هەیە.
• next.config.js: فایلی بنچینەیی پێکهاتە بۆ پڕۆژەی Next.js.

تاقیکردنەوەی گۆڕانکاری لە پڕۆژەکەدا

فایلی pages/index.js لە پڕۆژەکەتدا بکەوە. ئەمە فایلەیە کە ماڵپەڕی سەرەکی دەردەکەوێت. دەتوانیت نوسینەکەی لەناویدا بگۆڕیت بۆ بینینی گۆڕانکاریەکان بەردەوام.

بۆ نموونە، کۆدەکە بگۆڕە بۆ:

export default function Home() {
return (
<div>
<h1>سوپاس بۆ ئەوەی بەشداریت بۆ یادکردنی Next.js!</h1>
<p>ئەمە ماڵپەڕی سەرەکییە.</p>
</div>
);
}

دوای تۆمارکردن، دەبینیت کە گۆڕانکاریەکان بەردەوام دەردەکەون بەهۆی تایبەتمەندییە باشەکەی "Hot Reloading".

کۆتایی دروکەی یەکەم

لەم دروکەیەدا، بەردەوام بووین بە Next.js، بۆچی باشە، و چۆن ئەو چارەسەری کارە ئامادە بکەین. لە دروکەی دواتردا، دەربارەی چۆنیەتی دروستکردنی ماڵپەڕە زیاتر و بەکارهێنانی بەستەرەکانیان دەنووسین.

تا دوایی لە دروکەی دووهەم! 🚀