การเรียนรู้ next.js
เฮ้ทุกคน! ฉันคือลีผู้สร้างการเรียนรู้ Next.js หลักสูตรนี้ได้รับการเผยแพร่ครั้งแรกในปี 2019 Next.js มีการพัฒนาค่อนข้างน้อยนับตั้งแต่ V9 และหลักสูตรนี้บางหลักสูตรเป็น "ล้าสมัย" อย่างเป็นทางการ
ฉันได้อัปเดตภาพรวมของหลักสูตรด้านล่างเป็นคำอธิบายประกอบส่วนใดที่ทันสมัยซึ่งมีการเปลี่ยนแปลงและคำแนะนำใหม่ของฉันคืออะไร ในความคิดของฉันนี่เป็นวิธีที่เหมาะใน การพัฒนา หลักสูตรนี้ วิดีโอจะทำหน้าที่เป็นข้อมูลอ้างอิงถึงจุดหนึ่ง แต่การเพิ่มเติมที่ใหม่กว่าของเฟรมเวิร์กทำให้บางแง่มุมง่ายขึ้น มาก
- - ทันสมัย
- - ล้าสมัย
- - ไม่แนะนำ
การแนะนำ
- - ดูตอนนี้ (26:07)
- - นี่คือความคิดล่าสุดของฉันเกี่ยวกับการเปรียบเทียบเฟรมเวิร์ก
- - วิดีโอนี้กล่าวถึงการเพิ่มประสิทธิภาพรูปภาพซึ่งตอนนี้รองรับใน next.js
ภาพรวมตอบสนอง
ฉันสอนองค์ประกอบชั้นเรียนในปี 2562 สำหรับผู้ที่ยังอยู่ในขั้นตอนการแปลงเพื่อตอบสนองตะขอ ในปี 2021 ตอนนี้เป็นมาตรฐานที่จะใช้ React Hooks สำหรับทุกโครงการและฉันขอแนะนำให้เริ่มต้นที่นั่น
- - ดูบทเรียน (21:01)
- - ดูรหัส
- - อุปกรณ์ประกอบฉากและรัฐ
- - ส่วนประกอบการทำงาน
- - เบ็ดตอบสนอง
- - ES6
- - JSX
- - ส่วนประกอบชั้นเรียน
พัฒนาในพื้นที่
- - ดูบทเรียน (9:49)
- -
next dev , next build และ next start - - สวยกว่า
- - การเพิ่มประสิทธิภาพรูปภาพได้รับการสนับสนุนใน next.js
- - ESLINT ตอนนี้รวมอยู่ใน next.js
- - มาตรฐาน (Prettier + Eslint ชนะ)
การนำทางระหว่างหน้า
- - ดูบทเรียน (19:25)
- - ดูรหัส
- -
next/link (การกำหนดเส้นทางฝั่งไคลเอ็นต์) - -
useRouter - - การดึงข้อมูลจาก URL
- -
getInitialProps - ส่วนใหญ่ถูกแทนที่ด้วย API ใหม่
การจัดแต่งทรงผม
- - ดูบทเรียน (20:04)
- - ดูรหัส
- - การออกแบบตอบสนอง + มือถือครั้งแรก
- - styled-jsx
- - ตอนนี้โมดูล CSS & CSS ได้รับการสนับสนุนนอกกรอบ
- - Sass - ฉันอยากจะแนะนำตัวเลือกอื่น ๆ
- - องค์ประกอบสไตล์ - ฉันอยากจะแนะนำตัวเลือกอื่น ๆ
การดึงข้อมูล
- - ดูบทเรียน (46:30)
- - ดูรหัส
- - เส้นทาง API
- - SWR
- - graphql
- - Hasura
- - Apollo Client - ฉันขอแนะนำ SWR
- - Custom Server - ความต้องการส่วนใหญ่สำหรับสิ่งนี้ได้ย้ายไปยัง Next.js Core
next start
การจัดการสินทรัพย์และ SEO
- - ดูบทเรียน (14:19)
- - คนที่ชอบ
- - เปิดกราฟ
- - ธีมหลักยังคงใช้ได้สำหรับ SEO
- - การเพิ่มประสิทธิภาพรูปภาพได้รับการสนับสนุนใน next.js
- - ขณะนี้มีคำแนะนำอย่างเป็นทางการเกี่ยวกับ SEO
การสร้างบล็อกด้วย MDX
- - ดูบทเรียน (32:32)
- - ดูรหัส
- - MDX กับ CMS
- - ส่วนประกอบไลบรารี (Theme UI) - ฉันอยากจะแนะนำตัวเลือกอื่น ๆ
- - Statickit - ได้มาจาก FormSpree
การรับรองความถูกต้อง
- - ดูบทเรียน (23:34)
- - JWTS
- - Auth0
- - ฉันมีหลักสูตรใหม่โดยใช้ firebase และ next.js
- - อยากจะแนะนำ Auth Next สำหรับโซลูชัน OSS ตอนนี้
- - นี่คือความคิดล่าสุดของฉันเกี่ยวกับการจัดการรัฐ (แบบฟอร์ม)
การทดสอบและการจัดการข้อผิดพลาด
- - ดูบทเรียน (33:12)
- - ล้อเล่น
- - react testing library
- - Sentry (ดูตัวอย่างล่าสุด)
การจัดการของรัฐและอื่น ๆ
- - ดูบทเรียน (25:41)
- - การรวม TypeScript
- - นี่คือความคิดล่าสุดของฉันเกี่ยวกับการจัดการรัฐ
- - Redux (ดูตัวอย่างล่าสุด)
การส่งออกและการปรับใช้
- - ดูบทเรียน (11:20)
- - vercel
- - คุณไม่จำเป็นต้องปรับแต่งอะไรใน
vercel.json อีกต่อไป - มันใช้งานได้! - - Zeit ตอนนี้ vercel
