mdnext
1.0.0
MDNEXT เป็นระบบนิเวศของเครื่องมือในการรับโครงการ NextJS + MDX ของคุณ
ต้องการเริ่มโครงการใหม่หรือไม่?
# Using NPX we'll start up the mdnext CLI prompts --
npx mdnext
# You will first be prompted with.. --
What is the name of your project ?
# Then you will choose which template to use
Select which template to use ... แค่ต้องการเข้าถึงส่วนประกอบในแอพ MDX ของคุณหรือไม่?
# Even though we're a Next based ecosystem, our `MDX` components should be usable in most React based applications
yarn add @mdnext/components
or
npm i @mdnext/components mdnext เป็นระบบนิเวศของเครื่องมือที่จะช่วยให้การทำงานกับ NextJS + MDX
mdnext CLI พื้นผิวการเก็บรวบรวมอย่างเป็นทางการและชุมชนส่งแม่แบบให้เลือก เมื่อเลือกแล้วโครงการจะถูกโคลนในท้องถิ่นด้วยประวัติความเป็นมาที่สะอาดและคุณพร้อมที่จะสร้างโครงการต่อไปของคุณ
@mdnext/components ให้สิทธิ์เข้าถึงได้ (ขอบคุณ Chakraui) และส่วนประกอบที่ขยายได้สำหรับการทำงานกับ MDX สิ่งเหล่านี้รวมถึงสิ่งที่คุณเห็นเช่นองค์ประกอบ Code สำหรับบล็อกรหัสสไตล์หรือ Iframes สำหรับการฝังเนื้อหาที่อุดมไปด้วย MDX
คอลเลกชัน mdnext เทมเพลตเป็นโครงการที่ใช้ NextJS พร้อมความคิดเห็นเกี่ยวกับวิธีการจัดสไตล์จัดการ MDX (และแหล่งข้อมูลอื่น ๆ ) ส่งสื่อและจัดการเวิร์กโฟลว์ปกติของคุณ (ECOMM / บล็อก / หน้าผลิตภัณฑ์) ในขณะที่มีคอลเลกชันของเทมเพลตอย่างเป็นทางการฉันรู้สึกตื่นเต้นที่ได้เห็นและแบ่งปันสิ่งที่ชุมชนสร้างขึ้น ฉันรู้ว่ามีความคิดเห็นและความสะดวกสบายที่แตกต่างกันมากมายในฐานะนักพัฒนาเว็บและต้องการให้ระบบนิเวศของเราสามารถเข้าถึงได้
โครงสร้างพื้นฐานของ mdnext-starter สามารถมองเห็นได้ทั่วทั้งเทมเพลตอื่น ๆ ทั้งหมดที่เป็นแกนกลางของวิธีการใช้ MDX และ Next
ทำความรู้จักกับโครงสร้างนี้จะช่วยแจ้งให้คุณทราบถึงแนวทางปฏิบัติที่ดีที่สุดในปัจจุบันที่กำลังติดตาม (ซึ่งมีการตีความฟรี!) และง่ายพอที่จะเสียบและเล่น มาดำดิ่งสู่ผู้เริ่มต้นกันเถอะ:
jsconfig.js
NextJS ให้เรากำหนดค่าเส้นทางที่สมบูรณ์สำหรับแอปของเรา เราใช้สิ่งนี้เพื่อนำเข้าฟังก์ชั่นและยูทิลิตี้ทั้งหมดของเราภายในไดเรกทอรี src ของเราได้อย่างง่ายดาย
pages
ไดเรกทอรีหน้ากำหนดเส้นทางของคุณ วิธีวงจรชีวิตเช่น getStaticProps / getStaticPaths / getServerProps มีอยู่ในระดับหน้า นี่คือที่ที่เราใช้เนื้อหา MDX ของเราเป็นข้อมูลเพื่อส่งผ่านไปยังส่วนประกอบของเรา
*_app.js* nextjs อนุญาตให้คุณแทนที่ส่วนประกอบแอพซึ่งใช้ในการเริ่มต้นหน้าเว็บ เพิ่มเติมที่นี่*_document.js* : อนุญาตให้คุณเพิ่มแท็ก <html> และ <body> ของแอปพลิเคชันของเราall-data/index.js : หน้านี้เป็นตัวอย่างของการแสดงลิงก์ไปยังหน้าข้อมูล MDX ของคุณทั้งหมด ที่นี่เราใช้ getStaticProps เพื่อป้อน frontmatter ของไฟล์ MDX ของเราสำหรับส่วนประกอบของเราdata/[slug].js : ที่นี่เราใช้การกำหนดเส้นทางแบบไดนามิก NextJS ด้วยการใช้ getStaticPaths เราสามารถป้อนตัวทากแบบไดนามิกจัดการตรรกะทั้งหมดหนึ่งครั้งและนำไปใช้กับข้อมูล MDX แต่ละตัวที่เราโหลด สิ่งนี้ช่วยให้เราสามารถจับคู่กับข้อมูลของเราใน getStaticProps และแสดงสิ่งนั้นไปยังหน้าและส่วนประกอบของเราindex.js : หน้าของเราที่รูทของแอพของเราอาศัยอยู่ภายในไดเรกทอรี pages index.js src ไดเรกทอรี src ของเราถือรหัสลูกค้าทั้งหมดของเรา components ของเรา hooks ที่กำหนดเองฟังก์ชั่น utility และไฟล์ MDX ของเราทั้งหมดอยู่ที่นี่โดยมีสามรายการแรกที่มีให้สำหรับการนำเข้าเส้นทางสัมบูรณ์?
next.config.js สำหรับการกำหนดค่าที่กำหนดเองเกี่ยวกับสิ่งต่าง ๆ เช่น environment variables , webpack , pageExtensions และอื่น ๆ อีกมากมายคุณสามารถใช้ next.config.js
แต่ละเทมเพลตจะมี README ของตัวเองพร้อมเอกสารที่ชัดเจนเกี่ยวกับการเพิ่มเติมที่ประกอบขึ้นเป็นการกำหนดค่าใหม่ มิฉะนั้นคุณจะพบเทมเพลตแต่ละตัวที่เป็นแกนกลางเริ่มคล้ายกับ mdnext-starter
เทมเพลตภายใน mdnext ถูกสร้างขึ้นเพื่อบรรเทาความเสียดทานเมื่อเริ่มต้นเว็บไซต์ใหม่ บล็อกเว็บไซต์ส่วนตัวงานลูกค้า ฯลฯ อาจรู้สึกกังวลอย่างมากที่จะเริ่มต้น
เราต้องทำอะไรให้สำเร็จ?
เราจะจัดการกับสไตล์ได้อย่างไร?
ฉันจะจัดการข้อมูลได้อย่างไร?
วิธีที่ดีที่สุดในการรวมการรับรองความถูกต้องคืออะไร?
ความคิดเห็นในเทมเพลตเหล่านี้จะช่วยให้คุณเริ่มต้นได้อย่างรวดเร็วและอนุญาตให้คุณปรับแต่งได้ตามที่คุณเห็น
เทมเพลตที่ได้รับการดูแลในปัจจุบันของเรา:
mdnext-starter นี่เป็นเทมเพลตที่มีความคิดเห็นน้อยที่สุดว่าเทมเพลตทั้งหมดถูกสร้างขึ้นจาก เป็นที่ตั้งของการกำหนดค่าน้อยที่สุดและความคิดเห็นนอกตัวอย่างของการจัดหา MDX ภายใน getStaticProps/Pathsmdnext-blog เทมเพลตบล็อกเพิ่มคุณสมบัติที่ด้านบนของ mdnext-starter ของเรา โดยเฉพาะการใช้ Chakra-UI สำหรับการจัดแต่งทรงผม การกำหนดค่าสำหรับโพสต์บล็อกที่หน้าและระดับเนื้อหาโดยใช้ไฟล์ MDX ของเราเป็นเส้นทาง FuseJS สำหรับการกรองโพสต์บล็อกของเรา ตรวจสอบเทมเพลตนี้ในการดำเนินการ!mdnext-overlays เมื่อกลายเป็นสตรีมใหม่คุณจะได้พบกับความท้าทายมากมาย ในที่สุดคุณจะต้องการตั้งค่าฉากแอนิเมชั่นและการโต้ตอบสำหรับสตรีมของคุณเองและผู้ชม ทำไมไม่ใช้เครื่องมือที่คุณรักในการสร้างพวกเขา? ด้วยการกำหนดค่านี้คุณจะตั้งค่าด้วยเลเยอร์พื้นฐานสำหรับการกำหนดค่าแต่ละฉากใหม่เป็นเส้นทาง แต่ละเส้นทางมีวิธีโต้ตอบกับ Twitch API การแชท Twitch ของคุณและข้อมูลรอบ ๆ สตรีมของคุณและเป็นกิจกรรม!ชุมชนของเราส่งแม่แบบ:
mdnext-tailwind ต้องการที่จะลุกขึ้นและทำงานอย่างรวดเร็วด้วยโครงการ Tailwind + mdnext หรือไม่? นี่คือคำตอบ การกำหนดค่าที่เหมาะสมควบคู่ไปกับคอลเลกชันของทรัพยากรเพื่อให้ได้ใหม่ที่ Tailwind รู้สึกสะดวกสบาย!mdnext-twin-macro ผู้เริ่มต้นนี้ได้รับการกำหนดค่าด้วย twin.macro เนื่องจากเป็นตัวเลือกของสไตล์ สิ่งนี้ช่วยให้คุณใช้ประโยชน์จากคลาสยูทิลิตี้ Tailwind's และวิธี css emotion's สำหรับรูปแบบหนึ่งmdnext-graphcms ใช้ GraphCMS เป็นแหล่งข้อมูลของเราเราตั้งค่าพื้นฐานสำหรับบล็อก มันเริ่มต้นคุณด้วยตัวอย่างง่ายๆของวิธีที่คุณสามารถดึง markdown จาก graphcms และป้อนไปยัง UI ของเราด้วย MDX ของเราmdnext-reflexjs Reflexjs เป็นห้องสมุดสไตล์ที่สร้างขึ้นเพื่อความเร็วและประสบการณ์นักพัฒนาที่ยอดเยี่ยม คุณสามารถจัดสไตล์ส่วนประกอบของคุณโดยใช้อุปกรณ์ประกอบฉากและข้อ จำกัด ตามข้อกำหนดของระบบ UIต้องการส่งเทมเพลตใหม่หรือไม่? ตรงไปที่ส่วนที่มีส่วนร่วมของเราและตรวจสอบ mdnext-starter
