windmill dashboard nextjs typescript
1.0.0
شاهد المشروع الأصلي بواسطة estevanmaito
بمساعدة من المساهمين الآخرين:
نرى أنها تعيش
هذا ليس قالب. هذا تطبيق كامل ، مبني على رأس React ، مع كل التفاصيل الصغيرة التي تم الاعتناء بها ، لذلك تحتاج فقط إلى إحضار البيانات لتغذيتها.
إمكانية الوصول هي أولوية في مشاريعي وأعتقد أنه ينبغي أن يكون في لك أيضًا ، لذلك تم تطوير هذا الاستماع إلى قراء الشاشة الحقيقية ، وتتوفر مصائد التركيز والملاحة لوحة المفاتيح في كل مكان.
تم تصميم Windmill Dashboard React على أعلى واجهة مستخدم Windmill. ستجد الوثائق لكل مكون صغير هناك.
يتم حفظ جميع المكونات والحاويات في مثال المجلد
قم بتغيير إعادة التوجيه الافتراضي عند الضغط على / أو home في ملف next.config.js
async redirects ( ) {
return [
{
source : '/' ,
destination : '/example/login' ,
permanent : false ,
} ,
]
} لتكوين قوائم الشريط الجانبي ، انظر الملف (Routes/SideBar.tsx).
هذه هي الطرق التي ستظهر في الشريط الجانبي. يتوقعون ثلاث عقارات:
path : الوجهة ؛name : الاسم المراد عرضه ؛icon : أيقونة لتوضيح العنصر العنصر الذي يتم استخدامه كأخطاء منسدلة ، مثل خيار الصفحات ، لا يحتاج إلى path ، ولكن توقع routes من الكائنات ذات path name :
// sidebar.js
{
path : '/example/tables' ,
icon : 'TablesIcon' ,
name : 'Tables' ,
} ,
{
icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
name : 'Pages' ,
routes : [
// submenu
{
path : '/example/login' ,
name : 'Login' , // <-- these don't have icons
} ,
{
path : '/example/create-account' ,
name : 'Create account' ,
} , هذا هو مشروع next.js bootstrapped مع create-next-app .
أولاً ، تثبيت التبعيات:
npm install
# or
yarn installثم ، يمكنك تشغيل خادم التطوير:
npm run dev
# or
yarn devافتح http: // localhost: 3000 مع متصفحك لرؤية النتيجة.
يمكنك البدء في تحرير الصفحة عن طريق تعديل pages/index.tsx . تحديثات الصفحة التلقائية أثناء تحرير الملف.
يمكن الوصول إلى طرق API على http: // localhost: 3000/api/hello. يمكن تحرير نقطة النهاية هذه في pages/api/hello.ts .
يتم تعيين دليل pages/api إلى /api/* . يتم التعامل مع الملفات الموجودة في هذا الدليل كطرق API بدلاً من صفحات React.
لمعرفة المزيد حول Next.js ، ألق نظرة على الموارد التالية:
يمكنك التحقق من مستودع NEXT.JS GitHub - ملاحظاتك ومساهماتك مرحب بها!
أسهل طريقة لنشر تطبيق Next.js الخاص بك هي استخدام منصة Vercel من منشئي Next.js.
تحقق من وثائق نشر NEXT.JS لمزيد من التفاصيل.
