Next.js طريقة إنشاء تطبيق Next.js

[Abu Ahmed]

تطرقنا في موضوع سابق عن ما هو إطار عمل Next.js و ما الفإدة من إستخدامه. سنقوم في هذا الموضوع بشرح طريقة إنشاء تطبيق Next.js و إستكشاف ملفات و مجلدات التطبيق و طريقة تعديل و تطوير التطبيق بشكل مبسط.

---

تجهيز بيئة التطوير​

قبل ان ننشإ تطبيق Next.js جديد , يجب التأكد من تثبيت التالي:

1. Node.js النسخة 10.13 أو أعلى و يمكن الحصول عليها من هنا.
2. يمكنك إستخدام محرر الأكواد المفضل لديك , و لكن ننصح بـ WebStorm أو Visual Studio Code. عن نفسي أفضل WebStorm.

محتوى مخفي: إستخدام Git Bash Terminal

إذا كنت من مستخدمي نظام تشغيل Windows يفضل تثبيت و إستخدام Git Bash Terminal , حيث يمكنك من إستخدام الأوامر على طريقة Linux. ]مكن الحصول على Git Bash Terminal عنطريق تثبيت برنامج Git.

إنشاء تطبيق Next.js بالإضافة الى shadcn-ui ​

سوف نقوم بإنشاء تطبيق Next.js مع إضافة بعض العناصر للواجهة , لتسهيل التصميم و إعادة إستخدام العناصر في أماكن مختلفة من التطبيق. هذه العناصر هي جزء من مكتبة shadcn-ui.

في البداية نقوم بفتح Terminal جديد و نقوم بكتابة الأمر التالي:

npx create-next-app -e https://github.com/shadcn/next-template

سيقوم بعرض التالي , قم بكتبة y للمتابعة (هذا فقط يظهر في المرة الأولى و عندما يكون create-next-app غير مثبت عن طريق NPM):

Need to install the following packages:
  create-next-app@13.4.4
Ok to proceed? (y) y

بعد ذلك قم بكتابة إسم التطبيق اللذي تريده , في هذه الحالة انا قمت بإختيار [tutorial-shop-app]:

√ What is your project named? ... tutorial-shop-app
Creating a new Next.js app in .\tutorial-shop-app.

Downloading files from repo https://github.com/shadcn/next-template. This might take a moment.

Installing packages. This might take a couple of minutes.

added 405 packages, and audited 406 packages in 55s

122 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created tutorial-shop-app at .\tutorial-shop-app

و بهذا تم إنشاء التطبيق الجديد و يمكنك الدخول على المجلد الجديد و إصدار الأمر التالي لتشغيل التطبيق على جهازك و من ثم الدخول على الرابط http://localhost:3000 من المتصفح:

cd tutorial-shop-app
npm run dev

> next-template@0.0.2 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

- event compiled client and server successfully in 2.6s (306 modules)
- wait compiling...
- event compiled client and server successfully in 355 ms (306 modules)

ستظهر لك الشاشة التالية في حال كانت الخطوات صحيحة:

هيكل ملفات تطبيق Next.js​

بعد ما قمنى بإنشاء التطبيق الجديد , دعونا نتطرق لهيكلة ملفات و مجلدات التطبيق , لتسهيل عملية التطوير و فهم طريقة عمل التطبيق.

المجلدات و الملفات الرئيسية و المهمة​

اسم المجلد	اسم الملف	الغرض منه
app	-	هذا المجلد يحتوي على صفحات التطبيق , بالإضافة الى تخطيط الصفحات.
config	site.ts	يحتوي هذا الملف على معلومات عن التطبيق , و بالإضافة لقائمة صفحات الموقع الرئيسية.
components	-	يحتوي على العناصر القابلة لإعادة الإستخدام مثل Buttons و Icons و غيرها.
styles	global.css	يحتوي على تنسيقات CSS الخاص بالتطبيق بشكل عام.
-	next.config.mjs	ملف إعدادات تطبيق Next.js يمكن من خلاله على سيل المثال إضاغة متغير بيئي جديد. يمكن زيارة هذه الصفحة لمعرفة المزيد.
-	tailwind.config.js	يحتوي على إعدادات TailwindCss , يستخدم لتغيير و تعديل الوان و تنسيقات التطبيق.

وبهذا نكون قد انشاأنا تطبيق Next.js جديد و بواجهة مستهخدم مقبولة و قابلة للتعديل و التنسيق. سنقوم في الموضوعات القادمة بإنشاء تطبيق بسيط لموقع منتجات و بيع عن طريق الإنترنت.