tm nextjs starter
1.0.0
นี่คือชุดเริ่มต้น React และแอปสาธิตขั้นต่ำที่ใช้งานได้จริงของฉัน ณ เดือนสิงหาคม 2018
หากคุณรู้สึกเบื่อกับความเหนื่อยล้าของ Javascript และต้องการเริ่มต้นอย่างรวดเร็วและง่ายดาย ลองดูสิ่งนี้ การพัฒนาแอป SPA React ที่ทันสมัยไม่ได้ง่ายไปกว่านี้อีกแล้ว
แอปสาธิตเป็นไซต์แบบสแตติก ซึ่งเป็นแอปหน้าเดียวพื้นฐานที่มีเพจที่สามารถระบุแอดเดรสได้ไม่กี่หน้าที่โหลดแบบ Lazy ตามความต้องการ โดยสาธิตการใช้งาน CRUD ขั้นพื้นฐาน: 1) แสดงรายการภาพยนตร์ 2) ดูรายละเอียดภาพยนตร์ 3) สร้าง/แก้ไข และ 4) ลบภาพยนตร์
การสาธิตใช้เบราว์เซอร์ localStorage สำหรับการจัดเก็บข้อมูล ซึ่งหมายความว่ามันทำงานโดยไม่มีแบ็กเอนด์ แหล่งที่มามีโมดูลที่เรียก AJAX จริงไปยังแบ็กเอนด์ REST คุณเพียงแค่ต้องเปิดใช้งานโมดูลและเขียนเซิร์ฟเวอร์ และคุณก็อยู่ในแนวทางที่ดีที่จะมีเว็บแอปจริง ฉันได้พัฒนาเซิร์ฟเวอร์ RESTPie3 Python REST API ซึ่งใช้ API ภาพยนตร์แบบง่ายนี้เป็นตัวอย่าง
แอปสาธิตประกอบด้วยสแต็กเทคโนโลยีที่เรียบง่ายแต่ทรงพลังซึ่งมีฟังก์ชันการทำงานที่จำเป็นสำหรับการสร้างแอปเว็บสมัยใหม่ มันยืนอยู่บนไหล่ของห้องสมุดที่ยิ่งใหญ่บางแห่ง:
├── /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
เมื่อไฟล์ที่ต้องพึ่งพาได้รับการแก้ไข การเปลี่ยนแปลงจะถูกโหลดทันทีและมองเห็นได้ทันที เพลิดเพลินไปกับการพัฒนา!
Nextjs เป็นเฟรมเวิร์กที่ยอดเยี่ยมที่นำลำดับที่เหมาะสมมาสู่ขอบเขตที่วุ่นวายของการพัฒนา Javascript ช่วยให้การเริ่มต้นการพัฒนา React เป็นเรื่องง่ายด้วยการดูแลการกำหนดค่าและเครื่องมือ ทำให้คุณมุ่งเน้นไปที่แอปหลักได้ตั้งแต่เริ่มต้น มีฟังก์ชันหลักขั้นต่ำที่ออกแบบมาอย่างดีซึ่งเว็บแอปทั้งหมดต้องการในทางปฏิบัติ
ประโยชน์ Next.js โดยสรุป:
Nextjs เติบโตเพียงพอ เปิดตัวเมื่อประมาณ 2 ปีที่แล้ว และมีระบบนิเวศปลั๊กอินที่ดี Webpack ใช้สำหรับงานภาคพื้นดิน
เป็นไปได้อย่างสมบูรณ์แบบและมีแนวโน้มว่า Nextjs จะถูกแทนที่หรือรวมเข้ากับสิ่งที่ดีกว่านี้ในอนาคต แต่ตอนนี้ได้สรุปแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรค่าแก่การลองใช้
โดยปกติแล้ว Redux จะเป็นจุดแรกในฐานะโซลูชันการจัดการสถานะสำหรับแอป React เป็นหนึ่งในห้องสมุดยุคแรกๆ ที่มีการพูดถึงในบล็อกต่างๆ มากมาย และได้รับสถานะเกือบเป็นมาตรฐาน
ฉันมีความรู้สึกผสมปนเปเกี่ยวกับ Redux ตั้งแต่การเผชิญหน้าครั้งแรก ฉันมักจะชอบคิดและค้นคว้าด้วยตัวเองเสมอ และหลังจากที่ได้อ่านโค้ดฐาน React+Redux จำนวนมาก และประเมินตัวเลือกอื่นๆ แล้ว ฉันคิดว่า Redux ที่มีกระบวนทัศน์ที่เน้นการใช้งานและบริสุทธิ์ของมันให้ความรู้สึกที่เป็นนามธรรมเล็กน้อยและได้รับการออกแบบทางวิศวกรรมมากเกินไปสำหรับฉัน (Plus Redux ยังใช้ในสถานที่ที่ไม่จำเป็นต้องใช้ ง่ายเกินไปที่จะใช้งานเกินพิกัด)
ในความคิดของฉัน MobX นำเสนอโซลูชันการจัดการสถานะที่ง่ายกว่าและใช้งานได้จริงมากกว่า Redux มันง่ายกว่าที่จะรับและเข้าใจ มันต้องใช้รหัสสำเร็จรูปน้อยกว่า คุณมีสถานะของคุณที่คุณประกาศว่าสามารถสังเกตได้ จากนั้นเพียงเปลี่ยนสถานะของคุณและผู้สังเกตการณ์ทั้งหมดจะได้รับการอัปเดตโดยอัตโนมัติ MobX ทำงานและไม่เกะกะ
วิศวกรโต้แย้งว่า Redux ดีกว่าสำหรับแอปที่ใหญ่กว่าหรือสำหรับแอป "ของจริง" แต่มันเป็นการต่อสู้ที่ไม่มีวันสิ้นสุด โดยปกติกลยุทธ์ของฉันคือรักษาโค้ดให้น้อยและใจร้าย โดยไม่ต้องพยายามสร้างแอปที่ "ใหญ่" ขึ้นมาตั้งแต่แรกด้วยซ้ำ...
Nextjs ให้การสนับสนุนทั้งสไตล์ชีท CSS ทั่วโลกและเพจท้องถิ่น
style jsx -tags (ดูตัวอย่าง about.jsx)ในการสาธิตนี้ ฉันยังทดลองใช้ฟังก์ชันตาราง CSS ซึ่งเป็นมาตรฐานเค้าโครงเว็บล่าสุด ตาราง CSS เป็นเครื่องมือเค้าโครงที่มีประสิทธิภาพซึ่งท้ายที่สุดก็มอบวิธีที่มีประสิทธิภาพในการกำหนดตารางสองมิติ มันจะเปลี่ยนวิธีที่เราสร้างเลย์เอาต์ หากคุณยังไม่ได้เรียนรู้หรืออ่านเกี่ยวกับตาราง CSS ปี 2018 ถือเป็นช่วงเวลาที่ดีในการเรียนรู้ การรองรับเบราว์เซอร์นั้นดีมากอยู่แล้ว มันจะกลายเป็นกระแสหลักในไม่ช้า
ความสามารถในการสร้างไซต์แบบคงที่ด้วย Nextjs เป็นเครื่องมือสำคัญที่ทำให้สามารถเรียกใช้แอปโดยไม่ต้องใช้เซิร์ฟเวอร์แบ็กเอนด์ คุณสามารถส่งออกไซต์ไปยังหน้า GitHub, Netlify หรือ Amazon S3 ได้ (แต่ตรวจสอบ gotchas บางส่วนด้วยคำนำหน้าไซต์+ลิงก์ด้วยหน้า Github)
ข้อดีอีกประการหนึ่งของการสร้างสแตติกคือสามารถเชื่อมต่อแอปกับแบ็กเอนด์ REST ใดๆ ได้ ไม่ว่าแบ็กเอนด์จะเป็นภาษาใดก็ตาม การแยกส่วนหน้าและส่วนหลังอย่างชัดเจนยังทำให้เกิดการแยกส่วนในระดับเทคโนโลยีและอาจเป็นไปได้ในระดับทีมด้วย
หมายเหตุประการหนึ่งเกี่ยวกับ SEO: หากต้องการส่งออกเวอร์ชันคงที่ของเพจด้วยข้อมูลไดนามิก คุณจะต้องเขียนสคริปต์เพจทั้งหมดในการกำหนดค่า next.config.js ดูตัวอย่างนี้
หากต้องการสร้างไซต์แบบคงที่ เพียงเรียกใช้
$ npm run export และไฟล์สแตติกจะถูกสร้างขึ้นในโฟลเดอร์ out
เพื่อทดสอบไซต์แบบคงที่ในเครื่องผ่าน www-server ในพื้นที่ ฉันเรียกใช้สคริปต์ python อย่างรวดเร็ว: (python3 -m http.server)
$ npm run pyserveจากนั้นทดสอบเว็บไซต์ที่ http://localhost:8000
ขนาดของหน้าแรกนั้นเหมาะสม โดยย่อขนาดประมาณ 94KB และ gzipped
เบราว์เซอร์โหลดหน้าแรกด้วยคำขอทั้งหมด 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 ของฉัน)
ไปข้างหน้าและใช้ตัวเริ่มต้น React นี้และบางทีเซิร์ฟเวอร์ RESTPie3 Python REST API ของฉันด้วยและสร้างบริการที่ยอดเยี่ยมของคุณ
คุณสามารถติดต่อฉันเพื่อสอบถามว่าฉันพร้อมทำงานฟรีแลนซ์หรือไม่
หากคุณชอบ Vue มากกว่า React ฉันยังได้เขียนโค้ดสตาร์ทเตอร์ตัวเดียวกันนี้ด้วย Vue Nuxtjs
ใบอนุญาตเอ็มไอที
