تنزيل tm nextjs starter - تنزيل كود المصدر tm nextjs starter

tm nextjs starter

فئات أخرى

1.0.0

تنزيل

هذه هي مجموعة React المبدئية والتطبيق التجريبي البسيط والفعال اعتبارًا من أغسطس 2018.

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

العرض التجريبي المباشر nextjs.tomicloud.com

لقطة الشاشة

التطبيق التجريبي هو موقع ثابت، وهو تطبيق أساسي مكون من صفحة واحدة يحتوي على عدد قليل من الصفحات القابلة للعنونة والتي يتم تحميلها ببطء عند الطلب. ويوضح عمليات CRUD الأساسية: 1) قائمة الأفلام، 2) عرض تفاصيل الفيلم، 3) إنشاء/تحرير و4) حذف فيلم.

يستخدم العرض التوضيحي المتصفح localStorage لتخزين البيانات، مما يعني أنه يعمل بدون واجهة خلفية. تحتوي المصادر على وحدة تقوم بإجراء مكالمات AJAX حقيقية إلى الواجهة الخلفية لـ REST - تحتاج فقط إلى تمكين الوحدة وكتابة خادم، وأنت في المسار الصحيح للحصول على تطبيق ويب حقيقي. لقد قمت بتطوير خادم RESTPie3 Python REST API الذي ينفذ واجهة برمجة التطبيقات البسيطة للأفلام كمثال.

اللبنات الأساسية

يتكون التطبيق التجريبي من مجموعة تقنية بسيطة ولكنها قوية توفر الوظائف الأساسية لإنشاء تطبيقات الويب الحديثة. إنه يقف على أكتاف عدد قليل من المكتبات العظيمة:

React هي مكتبة جافا سكريبت الأساسية التي يهتم بها العالم
Nextjs هو إطار عمل جافا سكريبت خفيف الوزن لبناء تطبيقات React بسرعة
MobX هي مكتبة سريعة وسهلة لإدارة الحالة
SASS هي لغة امتداد CSS القديمة الجيدة والتي لا تزال تؤدي المهمة بشكل جيد
Axios هي مكتبة AJAX مشهورة تعتمد على الوعود

شجرة المصدر

 ├── /components/                # React components used by pages
│   └── /MyHeader.js            # Site header component, just as an example
├── /pages/                     # pages
│   ├── /_app.jsx               # top level layout of the app, loaded once
│   ├── /about.jsx              # about page
│   ├── /index.jsx              # home page, lists movies
│   ├── /moviedetails.jsx       # details page, views a movie
│   └── /movieedit.jsx          # edit page, edits a movie
├── /static/                    # static assets, accessed/exported as is
│   ├── /favicon.ico            # favicon
│   └── /exampledata/
│       └── /movies.json        # sample list of 4 movies - loaded initially
├── /styles/                    # global SASS files
│   └── /layout.sass            # main layout
├── config.js                   # app config, select ajax or localstorage
├── next.config.js              # nextjs configuration, almost empty
├── package-lock.json           # npm something
├── package.json                # list of npm packages required
├── README.md                   # this doc
├── serverapi_ajax.js           # API, talks AJAX to a real backend
├── serverapi_localstorage.js   # API, talks to localStorage
└── store.js                    # data store, managed by MobX

التنمية المحلية

إليك كيفية تشغيل المبدئ على جهازك المحلي:

$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run dev

ثم قم بتوجيه متصفحك إلى http://localhost:3000.

عندما يتم تعديل أي من الملفات التابعة، يتم تحميل التغييرات وتصبح مرئية على الفور. استمتع بالتطوير!

Next.js

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

فوائد Next.js باختصار:

الحد الأدنى من التكوين - لا داعي للتلاعب بتكوينات webpack أو babel، إلا إذا كنت تريد ذلك
يفرض البنية على الملفات المصدر - نظام الملفات هو واجهة برمجة التطبيقات
إعادة تحميل سريعة للصفحات لتسريع عمل التطوير
منطق توجيه SPA المدمج
تقسيم التعليمات البرمجية التلقائي للصفحات (مقدم من Webpack)
خيارات النشر: تصدير موقع ثابت بدون خادم أو تشغيل Node.js في الواجهة الخلفية

Nextjs ناضج بما فيه الكفاية، وتم إصداره منذ حوالي عامين، ويتمتع بنظام بيئي صحي للمكونات الإضافية. يتم استخدام Webpack للعمل الأرضي.

من الممكن والمحتمل تمامًا أن يتم استبدال Nextjs أو دمجه بشيء أفضل في المستقبل، ولكنه يتضمن بعض أفضل الممارسات الآن مما يجعل الأمر يستحق التجربة.

إدارة حالة MobX

عادةً ما يكون Redux هو المحطة الأولى كحل لإدارة الحالة لتطبيقات React. لقد كانت واحدة من أوائل المكتبات المتاحة، وتم الحديث عنها في العديد من المدونات، وبالتالي اكتسبت مكانة قياسية تقريبًا.

لقد كانت لدي مشاعر متضاربة تجاه Redux منذ اللقاء الأول. أحب دائمًا التفكير وإجراء الأبحاث بمفردي وبعد قراءة العديد من قواعد أكواد React+Redux وتقييم الخيارات الأخرى، أعتقد أن Redux بنموذجه الوظيفي والنقي يبدو مجردًا بعض الشيء ومفرطًا في الهندسة بالنسبة لي. (يتم استخدام Plus Redux أيضًا في الأماكن التي لا تكون هناك حاجة إليها ببساطة. ومن السهل جدًا تجاوزها.)

في رأيي، يقدم MobX حلاً أبسط وأكثر عملية لإدارة الحالة من Redux. من الأسهل التقاطها وفهمها. يتطلب رمزًا مرجعيًا أقل. لديك حالتك التي تعلن أنها قابلة للملاحظة، ثم قم ببساطة بتغيير حالتك ويتم تحديث جميع المراقبين تلقائيًا. يعمل MobX ويبقى بعيدًا عن الطريق.

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

CSS

يوفر Nextjs الدعم لكل من أوراق أنماط CSS العالمية للموقع والصفحة المحلية.

تتم معالجة ملف CSS عالمي واحد وإنشائه من ملفات SASS المصدر، ثم يتم ربطه بالتطبيق بتنسيق HTML باستخدام علامة ارتباط عادية، ويتم تحميله مرة واحدة في بداية التطبيق. مُثبت وقوي وأفضل أداء - لا تحتاج إلى وضع كل CSS في JS!
يتم تحميل الأنماط المحلية للصفحة عند الطلب مع الصفحة، ويتم كتابتها في مكون الصفحة داخل علامات style jsx (راجع about.jsx على سبيل المثال).

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

إنشاء موقع ثابت

تعد القدرة على إنشاء موقع ثابت باستخدام Nextjs أداة مهمة تتيح تشغيل التطبيقات بدون خادم خلفي. يمكنك تصدير الموقع إلى صفحات GitHub أو Netlify أو Amazon S3. (لكن تحقق من بعض الأخطاء باستخدام بادئات رابط الموقع + مع صفحات Github.)

فوز آخر للجيل الثابت هو القدرة على ربط التطبيق بأي واجهة REST خلفية بغض النظر عن لغة الواجهة الخلفية. يوفر الفصل النظيف بين الواجهة الأمامية والواجهة الخلفية أيضًا نمطية على المستوى التقني وربما على مستوى الفريق.

ملاحظة واحدة حول تحسين محركات البحث: لتصدير إصدارات ثابتة من الصفحات ذات البيانات الديناميكية، ستحتاج إلى برمجة كل الصفحات في تكوين next.config.js، راجع هذا المثال.

لإنشاء موقع ثابت، ما عليك سوى تشغيله

$ npm run export

وسيتم إنشاء الملفات الثابتة في المجلد out .

لاختبار الموقع الثابت محليًا عبر خادم www محلي، أقوم بسرعة بتشغيل برنامج نصي بيثون: (python3 -m http.server)

$ npm run pyserve

ثم قم باختبار الموقع على http://localhost:8000.

حجم جافا سكريبت

حجم الصفحة الرئيسية مناسب، حوالي 94 كيلو بايت مصغر ومضغوط بصيغة gzp .

يقوم المتصفح بتحميل الصفحة الرئيسية بإجمالي 6 طلبات، وكل صفحة جديدة يتم تحميلها عند الطلب تقدم طلب js واحدًا مرة واحدة (تذكر أن React لديها كل ما يتعلق بـ Javascript، وليس HTML).

Page Size Inspector Report
URL: https://nextjs.tomicloud.com/

REQUEST                                       REQ     BYTES

TOTAL___________________________________________6____94,159

Document________________________________________1_______916
-nextjs.tomicloud.com/                                  916

Script__________________________________________4____92,836
-nextjs.tomicloud.com/_next.../index.js               1,053
-nextjs.tomicloud.com/_next/.../_app.js               2,506
-nextjs.tomicloud.com/_nex.../_error.js               2,490
-nextjs.tomicloud.com/.../main-6a4a..js              86,787

Stylesheet______________________________________1_______407
-nextjs.tomicloud.com/_nex.../style.css                 407

(تقرير بواسطة ملحق Chrome Page Size Inspector.)