المكتبات الأساسية المستخدمة في مشروع Next.js

ترتيب المجلدات داخل المشروع

المجلدات من الأعلى إلى الأسفل

• messages : ويحتوي على ملفات JSON الخاصة ببرنامج ترجمة المشروع next-intl
• public : ويحتوي على كافة الملفات الخارجية المختصة بالمشروع والمقصود بذلك ملفات ( الصور – الفيديو – وحتى قاعدة البينات SQLite3 ) كل هذه الملفات مرتبطة بالمشروع ولكن ليس هناك داعي لأن تكون داخل المشروع أثناء إنشائه
• src : مجلد المشروع الرئيسي الذي يحتوي باقي المجلداد داخله:
  • app : مجلد المشروع الأساسي الذي يظهر في المتصفح
  • components : مجلد تحتوي على كل الملفات التي يمكن استخدامها داخل الشروع وبأكثر من موقع
  • i18n : مجلد خاص بملفات مكتبة next-intl المتعلقة بترجمة المشروغ
  • lib : مجلد يشبه مجلد components ولكن تحتوي على ملفات خاصة قد تكون بك ويمكن استخدامها بأكثر من مشروع

المكتبات الأساسية لأي مشروع يجب أن تتضمن على الأقل ما يلي:

• shadcn/ui : مكتبة تضيف components يمكن استخدامها في بناء الموقع.
• next-intl : وهي مكتبة مختضة بالغات وترجمة الموقع للغات مختلفة.

Next-intel

Internationalization (i18n) for Next.js

تستخدم هذه المكتبة لترجمة الموقع وسهولة التنقل بين اللغات وهي بسيطة في التعامل

بالنسبة للنسخة الحالية next-intl v3.26.3 فترتيب المجلدات والملفات كالتالي:

مجلد messages : ويحتوي على ملفات JSON الخاصة بالمشروع ويكون اسم الملف هو رمز اللغة كمثال على ذلك (en.json) ويحتوي على كافة الكلمات المفتاحية المراد استبدالها في صفحات المشروع

{
“HomePage”: {
“Hi”: “Hi”
},
“Navbar”: {
“Home”: “Home”,
“Menu”: “Menu”,
“Hot Drinks”: “Hot Drinks”,
“Drinks”: “Drinks”,
“Food”: “Food”,
“Events”: “Events”
},
“SettingPage”: {
“Dashboards”: “Dashboards”,
“Facility”: “Facility”
},
“Languages”: {
“en”: “English”,
“ar”: “Arabic”
},
}

مجلد i8n : مساره src/i8n وهو المجلد الذي يحتوي على الملفين الرئيسيين لهذه المكتبة والتي يحدد بها ما اللغات المستخدمة وكيفية التعامل مع لغات الموقع وماهي اللغة الافتراضية وكيفية تبديل اسم الروابط لتلائم seo والمجلدان هما request.ts / routing.ts

ملف middleware.ts : مسار src/middleware.ts هو ملف يغلف الموقع وهو جد هام حيث أنه من الملفات التي تقراء ويتفاعل معه Next.js من ناحية server-side rendering قبل إرسال المحتوى إلى المتصفح.

ويجب تعديل ملف next.config.ts لكي يستطيع أن يتعامل مع مكتبة الترجمة ليصبح كالتالي:

import type { NextConfig } from “next”;
// === Next-INTL === //
import createNextIntlPlugin from “next-intl/plugin”;
const withNextIntl = createNextIntlPlugin();
// === Next-INTL === //
const nextConfig: NextConfig = {
/* config options here */
};
export default withNextIntl(nextConfig);

مجلد [locale] : وهو المجلد الذي سوف تحتوي المشروع كامل

Shadcn/ui

Beautifully designed components that you can copy and paste into your apps.

مكتبة تحتوي على قوالب جاهزة ينمت استخدامها مباشرة داخل المشروع

مكتبات مضافة تساعد في تنسيق المحتوى داخل VS Code

npm i -D eslint-config-prettier prettier prettier-plugin-tailwindcss

هذه المكتبات ليس لها علاقة مباشرة في عمل المشروع لذى تضاف في package.json بحالة devDependencies وبعد إضافتها ننشئ ونعدل على الملفات التالية:

prettier.config.js ويحتوي على:

module.exports = { plugins: [“prettier-plugin-tailwindcss”] };

eslint.config.mjs

import { dirname } from “path”;
import { fileURLToPath } from “url”;
import { FlatCompat } from “@eslint/eslintrc”;
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
});
const eslintConfig = [
…compat.extends(“next/core-web-vitals”, “next/typescript”, “prettier”),
];
export default eslintConfig;