الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

NextJS Boilerplate

صفيحة مصنوعة من الرأي لبدء المشاريع باستخدام NextJs

سمات

  • ؟ التالي 13
  • ⚛ رد فعل 18
  • ؟ وثيقة مخصصة وتطبيق
  • ⌨ اكتب السلامة باستخدام TypeScript في الوضع الصارم
  • ؟ اكتب SCSS و CSS المستقبلية مع postcss + preset-env
  • ؟ SVG Sprite للأيقونات
  • ؟ الوبر الكود الخاص بك مع eslint & stylelint
  • ؟ أجمل لأسلوب الكود الثابت
  • ؟ مكتبة اختبار Jest + للاختبارات
  • ☝ Husky + Lint staged لضمان جودة الكود
  • ملف EditorConfig للمسافات البادئة المتسقة
  • ؟ Redux مع react-redux و redux-thunk

فروع التباين

خادم مخصص 

git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

إنزيم 

git clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

لا إعادة 

git clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

ابدء

قبل أن تتمكن من البدء في تطوير تطبيقك الرائع ، تحتاج إلى تثبيت تبعيات المشروع. تأكد من أن لديك عقدة (> = 10.13.0) وتثبيت NPM وتشغيلها: 

$ npm install

التنمية

بمجرد تثبيت جميع التبعيات ، يمكنك بدء التطوير. لبدء خادم تطوير على http: // localhost: 3000 Run: 

$ npm run dev

؟ إنتاج

لتشغيل تطبيقك في الإنتاج ، تأكد من تشغيل بناء أولاً: 

$ npm run build

ثم ابدأ تطبيقك برقم منفذ متوفر (افتراضي إلى 3000 إذا لم يتم توفيره): 

$ PORT=8080 npm run start

؟ ثابت

يمكنك تصدير طلبك إلى موقع ويب ثابت أيضًا: 

npm run export

هذا سيجعل صفحات HTML ثابتة في ./out

؟ المبيدات

يوفر Boilerplate بضعة بياضات لمساعدتك في مراقبة تناسق الكود ونوع السلامة. هناك ثلاثة بياضات: واحدة لـ CSS ، وواحد لـ TypeScript وواحد لنوع السلامة. يمكنك استخدام كل منهم بشكل منفصل باستخدام الأوامر التالية: 

$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types

نصيحة: للحصول على أقصى استفادة من المبيدات الخاصة بك ، قم بتثبيت المكونات الإضافية المقابلة (stylelint ، tslint) لمحررك أو IDE

أجمل

أجمل يساعدك على تطبيق نمط الكود المتسق (الرأي). إذا أمكن ، يمكنك إخبار المحرر الخاص بك بتنسيق رمزك عند حفظ ملف. إذا لم تكن قادرًا على القيام بذلك ، فيمكنك تشغيل أجمل باستخدام: 

$ npm run prettier

؟ الاختبارات

يمكنك كتابة اختباراتك باستخدام Jest and Enzyme. يمكنك إجراء كل اختبار مع الأمر التالي 

$ npm run test

إذا كنت ترغب في اتباع التطوير المدفوع بالاختبار ، يمكنك استخدامه: 

$ npm run test:dev

الوحدات النمطية

TypeScript

يتم تكوين TypeScript و Babel مع محلفي الوحدة النمطية المخصصة. هذا يعني أنه يمكنك استخدام الواردات المطلقة مع مساحات الأسماء المخصصة افتراضيًا للوحدات التالية: 

 /* import common library */
import lib from '@common/<folder>/<lib>'
/* import component */
import Counter from '@components/counter/Counter'
/* import container */
import HomepageCounter from '@containers/counter/HomepageCounter'
/* import store files */
import { CounterAction } from '@store/counter/counterActions'

SCSS

بشكل افتراضي ./src/common/css يتم تكوين المسار. هذا يعني أنه يمكنك استيراد أي من ملفات هذا المجلد مباشرة بدون المسار النسبي أو المطلق: 

 @import 'variables' ;
@import 'colors' ;
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل