Next JS Landing Page Starter Template
1.0.0
موضوع الصفحة المقصودة المكتوبة في Next.js ، Tailwind CSS و TypeScript ⚡ مصنوعة من تجربة المطورين أولاً: Next.js ، typeScript ، Eslint ، Prettier ، Husky ، Lint choged ، vscode ، netlify ، postcss ، tailwind css.
استنساخ هذا المشروع واستخدمه لإنشاء مشروع Next.js الخاص بك. يمكنك التحقق من عرض قوالب JS التالي.
  |  |  |
 |  |  |
| أضف شعارك هنا |
تحقق من عرضنا التجريبي المباشر.
تجربة المطور أولاً:
styled-jsxميزة مدمجة من Next.js:
ابحث عن المزيد من المكونات في موضوعات قسطنا NextJS.
قم بتشغيل الأمر التالي في بيئتك المحلية:
git clone --depth=1 https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template.git my-project-name
cd my-project-name
npm install
بعد ذلك ، يمكنك التشغيل محليًا في وضع التطوير باستخدام إعادة تحميل مباشر:
npm run dev
افتح http: // localhost: 3000 مع متصفحك المفضل لرؤية مشروعك. للحصول على معلوماتك ، تحتاج Next JS إلى قضاء بعض الوقت في تجميع المشروع لأول مرة.
.
├── README.md # README file
├── next.config.js # Next JS configuration
├── public # Public folder
│ └── assets
│ └── images # Image used by default template
├── src
│ ├── background # Atomic background component
│ ├── button # Atomic button component
│ ├── cta # Atomic cta component
│ ├── feature # Atomic feature component
│ ├── footer # Atomic footer component
│ ├── hero # Atomic hero component
│ ├── layout # Atomic layout component
│ ├── navigation # Atomic navigation component
│ ├── pages # Next JS pages
│ ├── styles # PostCSS style folder with Tailwind
│ ├── templates # Default template
│ └── utils # Utility folder
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
يمكنك بسهولة تكوين السمة. الرجاء تغيير الملف التالي:
public/apple-touch-icon.png ، public/favicon.ico ، public/favicon-16x16.png and public/favicon-32x32.png : favicon الخاص بك ، يمكنك إنشاء من https://favicon.io/favicon-converter/src/styles/global.css : ملف CSS الخاص بك باستخدام CSS Tailwindutils/AppConfig.ts : ملف التكوينsrc/pages/index.tsx : صفحة الفهرس للموضوع الذي يستخدم المكون Basesrc/template/Base.tsx : المكون Base باستخدام كتل المكونsrc/templates/* : قائمة كتل المكوناتsrc/* : المجلدات الأخرى في SRC هي المكونات الذرية المستخدمة في كتل المكوناتها هي الطبقة:
index.tsx في src/pagesBase : Base.tsx في src/templatessrc/templates/*src/*يمكنك رؤية النتائج محليا في وضع الإنتاج مع:
$ npm run build
$ npm run start
يتم قضاء ملفات HTML و CSS التي تم إنشاؤها (ميزة مدمجة من JS التالي). كما سيتم إزالة CSS غير المستخدمة من CSS Tailwind.
يمكنك إنشاء بناء إنتاج محسّن مع:
npm run build-prod
الآن ، موضوعك جاهز للنشر. توجد جميع الملفات التي تم إنشاؤها في مجلد out ، والتي يمكنك نشرها مع أي خدمة استضافة.
استنساخ هذا المستودع على حساب github الخاص ونشره على NetLify:
إذا كنت مستخدمين VSCode ، فيمكنك الحصول على تكامل أفضل مع VSCode عن طريق تثبيت الامتداد المقترح في .vscode/extension.json . يأتي رمز المبتدئين بإعدادات لتكامل سلس مع VSCODE. يتم توفير تكوين التصحيح أيضًا لخبرة التصحيح الأمامية والخلفية.
Pro Tips: إذا كنت بحاجة إلى التحقق من نوع المشروع باستخدام TypeScript ، فيمكنك تشغيل إنشاء مع CMD + Shift + B على Mac.
الجميع مرحب بهم للمساهمة في هذا المشروع. لا تتردد في فتح مشكلة إذا كان لديك سؤال أو العثور على خطأ.
مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا ، حقوق الطبع والنشر © 2024
انظر الترخيص لمزيد من المعلومات.
| | |
| | |
| أضف شعارك هنا |
مصنوع من ♥ بواسطة CreativeSignsguru
