تنزيل Next js Boilerplate Next js Boilerplate Boilerplate

Next js Boilerplate

كود الذكاء الاصطناعي

v3.60.5

تنزيل

Boilerplate و starter لـ Next.js 15+ ، Tailwind CSS 3.4 ، و typeScript.

لافتة بداية JS التالية

boilerplate و starter for next.js مع جهاز توجيه التطبيق ، و css tailwind ، و typescript ⚡ أولويات تجربة المطورين أولاً: next.js ، typestrimp ، eslint ، أجمل ، husky ، lint staged ، vitest (استبدال jest). SQLite ، و MySQL) ، مراقبة الخطأ مع Sentry ، تسجيل مع Pino.js وإدارة السجل ، المراقبة كرمز ، كتاب القصص ، متعدد اللغات (I18N) ، آمنة مع ArcJet (الكشف عن الروبوت ، الحد من الأسعار ، حماية الهجوم ، وما إلى ذلك) وأكثر من ذلك.

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

الرعاة




أضف شعارك هنا

العرض التوضيحي

العرض التوضيحي Live: next.js boilerplate

اشتراك	تسجيل الدخول

سمات

تجربة المطورين أولاً ، بنية الرمز المرن للغاية ولا تحافظ على ما تحتاجه فقط:

⚡ next.js مع دعم جهاز توجيه التطبيق
اكتب فحص TypeScript
؟ تتكامل مع CSS Tailwind
✅ الوضع الصارم لـ TypeScript و React 19
المصادقة مع كاتب: التسجيل ، تسجيل الدخول ، تسجيل الخروج ، نسيت كلمة المرور ، إعادة تعيين كلمة المرور ، وأكثر من ذلك.
؟ مصادقة بدون كلمة مرور مع روابط سحرية ، مصادقة متعددة العوامل (MFA) ، AUTH الاجتماعية (Google ، Facebook ، Twitter ، Github ، Apple ، وأكثر من ذلك) ، تسجيل الدخول بدون كلمة مرور مع مفاتيح الممر ، انتحال شخصيات المستخدم
؟ ORM آمن من النوع مع رذاذ ، متوافق مع postgresql ، sqlite ، و mysql
؟ قاعدة بيانات التطوير في وضع عدم الاتصال والمحلي مع PGLITE
متعددة اللغات (I18N) مع intl و crowdin التالي
♻ متغيرات البيئة الآمنة من النوع مع T3 ENV
⌨ معالجة النموذج مع شكل ربط رد الفعل
؟ مكتبة التحقق من الصحة مع zod
؟ Linter مع ESLINT (الافتراضي Next.js ، Next.js Core Web Hitals و Tailwind CSS وتكوين AntFU)
؟ رمز التنسيق مع أجمل
؟ أجش لخطافات git
Lint staged لتشغيل المبيدات على ملفات GIT المتقنة
؟ Lint git الالتزام مع الالتزام
؟ اكتب رسائل الالتزام المتوافقة القياسية مع الالتزام
؟ اختبار الوحدة مع مكتبة اختبار VITest وتفاعل
؟ التكامل واختبار E2E مع الكاتب المسرحي
؟ قم بإجراء اختبارات على طلب السحب باستخدام إجراءات GitHub
؟ كتاب القصص لتطوير واجهة المستخدم
مراقبة الخطأ مع Sentry
☂ تغطية الكود مع Codecov
التسجيل مع pino.js وإدارة السجل مع مكدس أفضل
المراقبة كرمز مع مراجعة
؟ حماية الأمن وحماية الروبوت (ARCJET)
؟ توليد التغيير التلقائي مع الإصدار الدلالي
؟ الاختبار البصري مع بيرسي (اختياري)
الواردات المطلقة باستخدام @ بادئة
؟ تكوين VSCODE: التصحيح والإعدادات والمهام والإضافات
؟ SEO Metadata و JSON-LD وعلامات الرسم البياني المفتوح
؟ ️ sitemap.xml و robots.txt
⌘ استكشاف قاعدة البيانات مع استوديو الرذاذ وأداة ترحيل CLI مع طقم الرذاذ
محلل الحزمة
؟ تشمل موضوع الحد الأدنى المجاني
؟ تعظيم درجة منارة

ميزة مدمجة من Next.js:

☕ Minify HTML و CSS
؟ حية إعادة التحميل
✅ تخزين ذاكرة التخزين المؤقت

فلسفة

لا شيء مخفي عنك ، مما يسمح لك بإجراء أي تعديلات ضرورية لتناسب متطلباتك وتفضيلاتك.
يتم تحديث التبعيات بانتظام على أساس شهري
ابدأ مجانًا دون تكاليف مقدمة
من السهل التخصيص
الحد الأدنى من الرمز
قالب غير معبأ
صديق سيو
جاهز للإنتاج

متطلبات

Node.js 20+ و NPM

ابدء

قم بتشغيل الأمر التالي في بيئتك المحلية:

git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm install

لمعلوماتك ، يتم تحديث جميع التبعيات كل شهر.

بعد ذلك ، يمكنك تشغيل المشروع محليًا في وضع التطوير باستخدام إعادة التحميل المباشر عن طريق التنفيذ:

npm run dev

افتح http: // localhost: 3000 مع متصفحك المفضل لرؤية مشروعك.

إعداد المصادقة

للبدء ، ستحتاج إلى إنشاء حساب كاتب في Clerk.com وإنشاء تطبيق جديد في لوحة معلومات Clerk. بمجرد القيام بذلك ، انسخ قيم NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY و CLERK_SECRET_KEY وأضفها إلى ملف .env.local (لا يتم تتبعه بواسطة git):

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key

الآن لديك نظام مصادقة يعمل بكامل طاقته مع next.js ، بما في ذلك ميزات مثل التسجيل ، وتسجيل الدخول ، وتسجيل الخروج ، ونسي كلمة المرور ، وإعادة تعيين كلمة المرور ، وتحديث الملف الشخصي ، وتحديث كلمة المرور ، وتحديث البريد الإلكتروني ، وحذف الحساب ، والمزيد.

قم بإعداد قاعدة البيانات عن بُعد

يستخدم المشروع Drizzleorm ، وهو ORM الآمن من النوع المتوافق مع قواعد بيانات PostgreSQL و SQLite و MySQL. بشكل افتراضي ، تم تكوين المشروع للعمل بسلاسة مع PostgreSQL ، ولديك المرونة لاختيار أي مزود قاعدة بيانات PostgreSQL من اختيارك.

ترجمة (I18N) الإعداد

بالنسبة للترجمة ، يستخدم المشروع next-intl مع CrowdIn. كمطور ، تحتاج فقط إلى الاهتمام بإصدار اللغة الإنجليزية (أو لغة افتراضية أخرى). يتم إنشاء ترجمات للغات الأخرى تلقائيًا ومعالجتها بواسطة Crowdin. يمكنك استخدام CrowdIn للتعاون مع فريق الترجمة الخاص بك أو ترجمة الرسائل بنفسك بمساعدة الترجمة الآلية.

لإعداد الترجمة (I18N) ، قم بإنشاء حساب في CrowdIn.com وإنشاء مشروع جديد. في المشروع الذي تم إنشاؤه حديثًا ، ستتمكن من العثور على معرف المشروع. ستحتاج أيضًا إلى إنشاء رمز وصول شخصي جديد عن طريق الانتقال إلى إعدادات API. ثم ، في إجراءات github الخاصة بك ، تحتاج إلى تحديد متغيرات البيئة التالية: CROWDIN_PROJECT_ID و CROWDIN_PERSONAL_TOKEN .

بعد تحديد متغيرات البيئة في إجراءات github الخاصة بك ، سيتم مزامنة ملفات التوطين الخاصة بك مع CrowdIn في كل مرة تدفع فيها التزامًا جديدًا بالفرع main .

هيكل المشروع

 .
├── README.md                       # README file
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── .storybook                      # Storybook folder
├── .vscode                         # VSCode configuration
├── migrations                      # Database migrations
├── public                          # Public assets folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # React components
│   ├── libs                        # 3rd party libraries configuration
│   ├── locales                     # Locales folder (i18n messages)
│   ├── models                      # Database models
│   ├── styles                      # Styles folder
│   ├── templates                   # Templates folder
│   ├── types                       # Type definitions
│   ├── utils                       # Utilities folder
│   └── validations                 # Validation schemas
├── tests
│   ├── e2e                         # E2E tests, also includes Monitoring as Code
│   └── integration                 # Integration tests
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

التخصيص

يمكنك بسهولة تكوين JS Next BoilerPlate من خلال البحث في المشروع بأكمله عن FIXME: لتقديم تخصيصات سريعة. فيما يلي بعض أهم الملفات لتخصيصها:

public/apple-touch-icon.png ، public/favicon.ico ، public/favicon-16x16.png and public/favicon-32x32.png : موقع الويب الخاص بك favicon
src/utils/AppConfig.ts : ملف التكوين
src/templates/BaseTemplate.tsx : السمة الافتراضية
next.config.mjs : تكوين Next.js
.env : متغيرات البيئة الافتراضية

لديك وصول كامل إلى الكود المصدر لمزيد من التخصيص. الرمز المقدم هو مجرد مثال لمساعدتك في بدء مشروعك. السماء هي الحد.

تغيير مخطط قاعدة البيانات

لتعديل مخطط قاعدة البيانات في المشروع ، يمكنك تحديث ملف المخطط الموجود في ./src/models/Schema.ts . يحدد هذا الملف بنية جداول قاعدة البيانات الخاصة بك باستخدام مكتبة الرذاذ ORM.

بعد إجراء تغييرات على المخطط ، قم بإنشاء ترحيل عن طريق تشغيل الأمر التالي:

npm run db:generate

سيؤدي ذلك إلى إنشاء ملف ترحيل يعكس تغييرات المخطط الخاصة بك. يتم تطبيق الترحيل تلقائيًا أثناء تفاعل قاعدة البيانات التالية ، لذلك ليست هناك حاجة لتشغيلها يدويًا أو إعادة تشغيل خادم js.js التالي.

ارتكاب تنسيق الرسائل

يتبع المشروع مواصفات الالتزامات التقليدية ، مما يعني أنه يجب تنسيق جميع الرسائل الالتزام وفقًا لذلك. لمساعدتك في كتابة رسائل الالتزام ، يستخدم المشروع Commentizen ، وهو CLI التفاعلي الذي يرشدك من خلال عملية الالتزام. لاستخدامه ، قم بتشغيل الأمر التالي:

npm run commit

واحدة من فوائد استخدام الالتزامات التقليدية هي القدرة على إنشاء ملف CHANGELOG تلقائيًا. كما يسمح لنا بتحديد رقم الإصدار التالي تلقائيًا بناءً على أنواع الالتزامات المدرجة في الإصدار.

الاختبار

تقع جميع اختبارات الوحدة جنبًا إلى جنب مع الكود المصدري في نفس الدليل ، مما يسهل العثور عليها. يستخدم المشروع مكتبة اختبار Vitest and React لاختبار الوحدة. يمكنك إجراء الاختبارات مع الأمر التالي:

npm run test

اختبار التكامل و E2E

يستخدم المشروع الكاتب المسرحي للتكامل واختبار الطرف إلى النهاية (E2E). يمكنك إجراء الاختبارات بالأوامر التالية:

npx playwright install # Only for the first time in a new environment
npm run test:e2e

في البيئة المحلية ، يتم تعطيل الاختبارات المرئية ، وستعرض المحطة الرسالة [percy] Percy is not running, disabling snapshots. . بشكل افتراضي ، يعمل الاختبار المرئي فقط في إجراءات GitHub.

تمكين وقت تشغيل الحافة (اختياري)

مجلد جهاز توجيه التطبيق متوافق مع وقت تشغيل الحافة. يمكنك تمكينه عن طريق إضافة الأسطر التالية src/app/layouts.tsx :

 export const runtime = 'edge' ;

لمعلوماتك ، فإن ترحيل قاعدة البيانات غير متوافق مع وقت تشغيل الحافة. لذلك ، تحتاج إلى تعطيل الترحيل التلقائي في src/libs/DB.ts :

 await migrate ( db , { migrationsFolder : './migrations' } ) ;

بعد تعطيلها ، يتعين عليك تشغيل الترحيل يدويًا بـ:

npm run db:migrate

تحتاج أيضًا إلى تشغيل الأمر في كل مرة تريد تحديث مخطط قاعدة البيانات.

نشر على الإنتاج

أثناء عملية الإنشاء ، يتم تنفيذ ترحيل قاعدة البيانات تلقائيًا ، لذلك ليست هناك حاجة لتشغيلها يدويًا. ومع ذلك ، يجب عليك تحديد DATABASE_URL في متغيرات البيئة الخاصة بك.

ثم ، يمكنك إنشاء بناء إنتاج مع:

$ npm run build

إنه يولد بناء إنتاج محسّن للبلهاء. لاختبار البناء الذي تم إنشاؤه ، قم بتشغيل:

$ npm run start

تحتاج أيضًا إلى تحديد متغيرات البيئة CLERK_SECRET_KEY باستخدام المفتاح الخاص بك.

يبدأ هذا الأمر خادمًا محليًا باستخدام بناء الإنتاج. يمكنك الآن فتح http: // localhost: 3000 في متصفحك المفضل لرؤية النتيجة.

مراقبة الخطأ

يستخدم المشروع Sentry لمراقبة الأخطاء. في بيئة التطوير ، لا توجد حاجة إلى إعداد إضافي: next.js boilerplate تم تكوينه مسبقًا لاستخدام Sentry و Spotlight (Sentry for Development). سيتم إرسال جميع الأخطاء تلقائيًا إلى مثيل Spotlight المحلي الخاص بك ، مما يتيح لك تجربة Sentry محليًا.

بالنسبة لبيئة الإنتاج ، ستحتاج إلى إنشاء حساب Sentry ومشروع جديد. بعد ذلك ، في next.config.mjs ، تحتاج إلى تحديث سمات org و project في وظيفة withSentryConfig . بالإضافة إلى ذلك ، أضف Sentry DSN إلى sentry.client.config.ts و sentry.edge.config.ts و sentry.server.config.ts .

تغطية الكود

تعتمد Next.js boilerplate على Codecov لحل الإبلاغ عن تغطية الكود. لتمكين Codecov ، إنشاء حساب Codecov وتوصيله بحساب GitHub الخاص بك. يجب أن تظهر مستودعاتك على لوحة معلومات Codecov الخاصة بك. حدد المستودع المطلوب ونسخ الرمز المميز. في إجراءات github ، حدد متغير بيئة CODECOV_TOKEN والصق الرمز المميز.

تأكد من إنشاء CODECOV_TOKEN كسرية لإجراءات github ، لا تلصقها مباشرة في رمز المصدر الخاص بك.

قطع الأشجار

يستخدم المشروع pino.js للتسجيل. في بيئة التطوير ، يتم عرض السجلات في وحدة التحكم بشكل افتراضي.

بالنسبة للإنتاج ، تم دمج المشروع بالفعل مع Better Stack لإدارة السجلات الخاصة بك والاستعلام عنها باستخدام SQL. لاستخدام مكدس أفضل ، تحتاج إلى إنشاء حساب مكدس أفضل وإنشاء مصدر جديد: انتقل إلى Dashboard Better Stack Logs الخاص بك> مصادر توصيل. بعد ذلك ، تحتاج إلى إعطاء اسم لمصدرك وتحديد Node.js كمنصة.

بعد إنشاء المصدر ، ستتمكن من عرض الرمز المميز الخاص بك ونسخه. في متغيرات البيئة الخاصة بك ، قم بلصق الرمز المميز في متغير LOGTAIL_SOURCE_TOKEN . الآن ، سيتم إرسال جميع السجلات تلقائيًا إلى Better Stack وتلجيعها.

مراقبة فحص

يستخدم المشروع بشكل محدد للتأكد من أن بيئة الإنتاج الخاصة بك تعمل دائمًا. على فترات منتظمة ، يقوم Checkly بتشغيل الاختبارات التي تنتهي بـ *.check.e2e.ts Extension وتعلمك في حالة فشل أي من الاختبارات. بالإضافة إلى ذلك ، لديك المرونة لتنفيذ الاختبارات من مواقع متعددة لضمان توفر تطبيقك في جميع أنحاء العالم.

لاستخدام Checkly ، يجب أولاً إنشاء حساب على موقعه على الويب. بعد إنشاء حساب ، قم بإنشاء مفتاح API جديد في لوحة معلومات Checkly وقم بتعيين متغير بيئة CHECKLY_API_KEY في إجراءات github. بالإضافة إلى ذلك ، ستحتاج إلى تحديد CHECKLY_ACCOUNT_ID ، والتي يمكن العثور عليها أيضًا في لوحة معلومات Checkly تحت إعدادات المستخدم> عام.

لإكمال الإعداد ، قم بتحديث ملف checkly.config.ts بعنوان البريد الإلكتروني الخاص بك وعنوان URL للإنتاج.

ArcJet Security وحماية الروبوت

يستخدم المشروع ARCJET ، وهو أمان كمنتج رمز يتضمن العديد من الميزات التي يمكن استخدامها بشكل فردي أو مجتمعة لتوفير الدفاع بعمق لموقعك.

لإعداد ArcJet ، قم بإنشاء حساب مجاني واحصل على مفتاح API الخاص بك. ثم أضفه إلى متغير بيئة ARCJET_KEY .

تم تكوين ArcJet بميزتين رئيسيتين: اكتشاف BOT و ArcJet Shield WAF:

تم تكوين اكتشاف BOT للسماح لمحركات البحث ، ومعاينة مولدات الارتباطات ، مثل Slack و Twitter معاينات ، والسماح بخدمات مراقبة الوقت الشائعة. سيتم حظر جميع الروبوتات الأخرى ، مثل الكاشطات و AI Crawlers. يمكنك تكوين أنواع الروبوت الإضافية للسماح أو الحظر.
ستقوم ArcJet Shield WAF باكتشاف ومنع الهجمات الشائعة مثل حقن SQL ، والبرمجة النصية للمواقع ، وغيرها من نقاط الضعف في OWASP.

تم تكوين ARCJET مع عميل مركزي في src/libs/Arcjet.ts يتضمن قواعد WAF Shield. يتم تكوين قواعد إضافية في src/app/[locale]/layout.tsx بناءً على نوع الصفحة.

أوامر مفيدة

محلل الحزمة

Next.js boilerplate يتضمن محلل حزمة مدمج. يمكن استخدامه لتحليل حجم حزم JavaScript الخاصة بك. للبدء ، قم بتشغيل الأمر التالي:

npm run build-stats

عن طريق تشغيل الأمر ، سيفتح تلقائيًا نافذة متصفح جديدة مع النتائج.

استوديو قاعدة البيانات

تم تكوين المشروع بالفعل باستخدام Drizzle Studio لاستكشاف قاعدة البيانات. يمكنك تشغيل الأمر التالي لفتح استوديو قاعدة البيانات:

npm run db:studio

بعد ذلك ، يمكنك فتح https://local.drizzle.studio مع متصفحك المفضل لاستكشاف قاعدة البيانات الخاصة بك.

معلومات VSCODE (اختياري)

إذا كنت مستخدمًا VSCODE ، فيمكنك الحصول على تكامل أفضل مع VSCODE عن طريق تثبيت الامتداد المقترح في .vscode/extension.json . يأتي رمز المبتدئين بإعدادات لتكامل سلس مع VSCODE. يتم توفير تكوين التصحيح أيضًا لخبرة التصحيح الأمامية والخلفية.

من خلال تثبيت المكونات الإضافية في VSCODE ، يمكن لـ ESLINT و أجمل إصلاح الرمز وعرض الأخطاء تلقائيًا. وينطبق الشيء نفسه على الاختبار: يمكنك تثبيت امتداد VSCODE VITEST لتشغيل الاختبارات تلقائيًا ، ويظهر أيضًا تغطية الكود في السياق.

Pro Tips: إذا كنت بحاجة إلى فحص واسع من النوع مع TypeScript ، فيمكنك تشغيل بناء مع CMD + Shift + B على Mac.