typescript nextjs starter

بداية TypeScript غير المبكرة لـ Next.js

أساس قابل للتطوير للغاية مع أفضل DX. جميع الأدوات التي تحتاجها لإنشاء مشروعك التالي.

_{أنشأه جواو بيدرو بمساعدة العديد من المساهمين الرائعين.}

سمات

• ⚡ Next.js 15 (جهاز توجيه التطبيق)
• ⚛ رد فعل 19
• ⛑ TypeScript
• ؟ ESLINT 9 - للعثور على المشكلات وإصلاحها في الكود الخاص بك
• ؟ أجمل - تنسيق رمز لأسلوب متسق
• ؟ Husky - لتشغيل البرامج النصية قبل الالتزام
• ؟ Commiclelint - للتأكد من أن رسائل الالتزام تتبع الاتفاقية
• ؟ تجديد - للحفاظ على تبعياتك محدثة
• Lint staged-قم بتشغيل eslint و tertier ضد ملفات GIT التي تم تحريكها
• ؟ سير عمل PR - نوع Run Type Check & Binters على طلبات السحب
• EditorConfig - أنماط ترميز متسقة عبر المحررين و IDES
• ؟ تعيين المسار - استيراد مكونات أو صور باستخدام بادئة @
• ؟ CSP - سياسة أمان المحتوى لتحسين الأمان (الحد الأدنى من السياسة الافتراضية)
• ؟ T3 ENV-متغيرات البيئة الآمنة من النوع
• ؟ إعادة التوجيه - إضافة بسهولة إعادة التوجيه إلى تطبيقك

بداية سريعة

أفضل طريقة للبدء بهذا القالب هي استخدام تطبيق Create Next.

 # pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter

تطوير

لبدء المشروع محليًا ، قم بتشغيل:

pnpm dev

افتح http://localhost:3000 مع متصفحك لرؤية النتيجة.

شهادات

"هذا المبتدئ هو إلى حد بعيد أفضل بداية من TypeScript لـ Next.js. الميزات معبأة ولكن غير متوفرة في نفس الوقت!"
- عرفات زهان

"يمكنني حقًا أن أوصي بـ Next.js TypeScript Starter repo كأساس متين لمشاريع مستقبلك Next.js."
- كورفيتز

"عمل رائع!"
- سهام داسجوبتا

عرض

قائمة المواقع الإلكترونية التي بدأت مع بداية Next.js TypeScript:

• freeinvoice.dev
• فكرة صانع الصورة الرمزية
• IKEA السعر المنخفض
• hygraph.com
• Rocketseat.com.br
• vagaschapeco.com
• unfork.vercel.app
• cryptools.dev
• أضف لك

الوثائق

متطلبات

• node.js> = 20
• PNPM 9

هيكل الدليل

• .github - تكوين جيثب بما في ذلك سير عمل CI.
  
• .husky - تكوين أجش والخطافات.
  
• public - الأصول الثابتة مثل robots.txt ، الصور ، و favicon.
  
• src - رمز مصدر التطبيق ، بما في ذلك الصفحات والمكونات والأنماط.

البرامج النصية

• pnpm dev - يبدأ التطبيق في وضع التطوير على http://localhost:3000 .
• pnpm build - ينشئ إنشاء إنتاج محسّن لتطبيقك.
• pnpm start - يبدأ التطبيق في وضع الإنتاج.
• pnpm type-check من صحة الكود باستخدام برنامج التحويل البرمجي TypeScript.
• pnpm lint - يقوم بتشغيل ESLINT لجميع الملفات في دليل src .
• pnpm lint:fix - يقوم بإصلاح ESLINT لجميع الملفات في دليل src .
• pnpm format - يعمل أجمل لجميع الملفات في دليل src .
• pnpm format:check - تحقق من قائمة الملفات الجمال من الملفات التي تحتاج إلى تنسيق.
• pnpm format:ci - فحص أجمل لـ CI.

تعيين المسار

يتم تكوين TypeScript مسبقًا مع تعيينات المسار المخصصة. لاستيراد المكونات أو الملفات ، استخدم @ بادئة.

 import { Button } from '@/components/Button' ;
// To import images or other files from the public folder
import avatar from '@/public/avatar.png' ;

التبديل إلى الغزل/NPM

يستخدم هذا المبدئ PNPM افتراضيًا ، لكن هذا الاختيار لك. إذا كنت ترغب في التبديل إلى YARN/NPM ، فقم بحذف ملف pnpm-lock.yaml ، وتثبيت التبعيات باستخدام Yarn/NPM ، وتغيير سير عمل CI ، و Husky Git Hooks لاستخدام أوامر الغزل/NPM.

ملاحظة: إذا كنت تستخدم الغزل ، فتأكد من اتباع هذه الخطوات من وثائق أجش حتى لا تفشل خطافات GIT مع الغزل على Windows.

متغيرات البيئة

نستخدم T3 ENV لإدارة متغيرات البيئة. إنشاء ملف .env.local في جذر المشروع وإضافة متغيرات البيئة الخاصة بك هناك.

عند إضافة متغيرات بيئة إضافية ، يجب تحديث المخطط في ./src/lib/env/client.ts أو ./src/lib/env/server.ts وفقًا لذلك.

إعادة التوجيه

لإضافة عمليات إعادة التوجيه ، قم بتحديث مجموعة redirects في ./redirects.ts . يتم كتابتها ، لذلك ستحصل على الإكمال التلقائي للخصائص.

CSP (سياسة أمان المحتوى)

سياسة أمان المحتوى (CSP) هي طبقة أمان تساعد على اكتشاف وتخفيف أنواع معينة من الهجمات ، بما في ذلك البرمجة النصية عبر المواقع (XSS) وهجمات حقن البيانات. يتم تنفيذ CSP في ملف next.config.ts .

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

رخصة

تم ترخيص هذا المشروع بموجب ترخيص معهد ماساتشوستس للتكنولوجيا - راجع ملف الترخيص. لمزيد من المعلومات.