mdnext
1.0.0
MDNEXT adalah ekosistem alat untuk mendapatkan proyek NextJS + MDX Anda meledak
Ingin memulai proyek baru?
# 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 ... Hanya ingin mengakses komponen di aplikasi berbasis MDX Anda?
# 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 adalah ekosistem alat untuk memberdayakan bekerja dengan NextJS + MDX.
mdnext CLI memunculkan koleksi yang dikelola secara resmi dan komunitas yang menyerahkan templat untuk dipilih. Setelah dipilih, proyek ini dikloning secara lokal dengan riwayat komitmen bersih dan Anda siap untuk membangun proyek Anda berikutnya.
@mdnext/components memberikan komponen yang dapat diakses (terima kasih Chakraui) dan komponen yang dapat diperpanjang untuk bekerja dengan MDX . Ini termasuk hal -hal yang Anda lihat seperti komponen Code untuk blok kode styling atau Iframes untuk menanamkan konten kaya ke MDX
Koleksi Template mdnext adalah proyek berbasis NextJS dengan pendapat tentang cara menata, menangani MDX (dan sumber data lainnya), mengirimkan media, dan menangani alur kerja yang paling biasa Anda (eComm / blog / halaman produk). Meskipun ada koleksi templat yang dipelihara secara resmi, saya sangat senang melihat dan membagikan apa yang telah diciptakan masyarakat. Saya tahu ada banyak pendapat dan kenyamanan yang berbeda sebagai pengembang web dan ingin ekosistem kita dapat diakses.
Struktur dasar mdnext-starter dapat dilihat di semua templat lain pada intinya bagaimana ia memanfaatkan MDX dan Next .
Mengenal struktur ini akan membantu memberi tahu Anda tentang praktik terbaik saat ini yang sedang diikuti (yang bebas interpretasi!) Dan cukup mudah untuk dihubungkan dan dimainkan. Mari selami starter:
jsconfig.js
NextJS memungkinkan kami mengkonfigurasi jalur absolut untuk aplikasi kami. Kami menggunakan ini untuk dengan mudah mengimpor semua fungsi dan utilitas kami di dalam direktori src kami
pages
Direktori halaman mendefinisikan perutean Anda. Metode siklus hidup seperti getStaticProps / getStaticPaths / getServerProps tersedia di level halaman. Di sinilah kami mengkonsumsi konten MDX kami sebagai data untuk diteruskan ke komponen kami.
*_app.js* NextJS memungkinkan Anda untuk mengganti komponen aplikasi, yang digunakan untuk menginisialisasi halaman. Lebih banyak di sini*_document.js* : Memungkinkan Anda untuk menambah tag aplikasi <html> dan <body> aplikasi kami.all-data/index.js : Halaman ini adalah contoh menampilkan tautan ke semua halaman data MDX pribadi Anda. Di sini kami menggunakan getStaticProps untuk memberi makan frontmatter file MDX kami untuk komponen kami.data/[slug].js : Di sini kita menggunakan routing dinamis NextJS. Dengan menggunakan getStaticPaths kami dapat memberi makan siput dinamis, menangani semua logika sekali dan menerapkannya pada setiap data MDX yang kami muat. Ini memungkinkan kami untuk mencocokkan dengan data kami di getStaticProps dan menampilkannya ke halaman dan komponen kami.index.js : Halaman kami di akar aplikasi kami, tinggal di dalam pages direktori index.js . src Direktori src kami memiliki semua kode klien kami. components kami, hooks khusus, fungsi utility , dan file MDX kami semuanya tinggal di sini, dengan tiga yang pertama tersedia untuk impor jalur absolut?
next.config.js untuk konfigurasi khusus di sekitar hal -hal seperti environment variables , webpack , pageExtensions , dan banyak lagi, Anda dapat menggunakan next.config.js
Setiap templat akan memiliki README sendiri dengan dokumentasi eksplisit yang berkaitan dengan penambahan yang membentuk konfigurasi baru. Kalau tidak, Anda akan menemukan setiap templat pada intinya, dimulai mirip dengan mdnext-starter
Templat di dalam mdnext dibuat untuk mengurangi gesekan saat memulai situs web baru. Blog, situs pribadi, pekerjaan klien, dll selalu bisa terasa sangat menakutkan untuk memulai.
Apa yang harus kita capai?
Bagaimana kita menangani gaya?
Bagaimana saya akan menangani data?
Apa cara terbaik untuk mengintegrasikan otentikasi?
Pendapat dalam templat ini akan membuat Anda mulai dengan cepat dan memungkinkan Anda untuk menyesuaikan sesuka Anda.
Template kami yang saat ini dikelola:
mdnext-starter Ini adalah templat yang paling tidak dipelajari, bahwa semua templat dibuat dari. Ini menampung konfigurasi dan pendapat yang sangat minim di luar contoh sumber MDX di dalam getStaticProps/Pathsmdnext-blog Template blog menambahkan fitur di atas mdnext-starter kami. Khusus menggunakan Chakra-UI untuk gaya. Konfigurasi untuk posting blog di halaman dan level konten menggunakan file MDX kami sebagai rute. FuseJS untuk memfilter posting blog kami. Periksa template ini beraksi!mdnext-overlays saat menjadi streamer baru Anda bertemu dengan banyak tantangan. Akhirnya Anda akan ingin mengatur adegan, animasi, dan interaksi Anda sendiri untuk aliran Anda dan pemirsa. Mengapa tidak menggunakan alat yang Anda sukai untuk membuatnya? Dengan konfigurasi ini Anda mengatur dengan lapisan dasar untuk mengkonfigurasi setiap adegan baru sebagai rute. Setiap rute berisi cara untuk berinteraksi dengan API Twitch, obrolan Twitch Anda, dan informasi di sekitar aliran Anda dan itu adalah acara!Komunitas kami mengirimkan template:
mdnext-tailwind ingin bangun dan berjalan dengan cepat dengan proyek Tailwind + mdnext ? Ini jawabannya. Konfigurasi yang tepat di samping kumpulan sumber daya untuk membuat mereka yang baru menjadi Tailwind merasa nyaman!mdnext-twin-macro starter ini dikonfigurasi dengan twin.macro sebagai pilihan gaya. Ini memungkinkan Anda untuk memanfaatkan kelas utilitas Tailwind's dan metode css emotion's untuk satu gaya.mdnext-graphcms Memanfaatkan GraphCMS sebagai DataSource kami, kami mengatur dasar-dasar untuk blog. Ini memulai Anda dengan contoh sederhana tentang bagaimana Anda dapat menarik markdown dari graphcms dan memberi makan ke UI kami dengan MDX kamimdnext-reflexjs REFLEXJS adalah perpustakaan penataan yang dibangun untuk kecepatan dan pengalaman pengembang yang sangat baik. Anda dapat menata komponen Anda menggunakan alat peraga gaya dan kendala berdasarkan spesifikasi sistem UI.Ingin mengirimkan template baru? Pergilah ke bagian kontribusi kami dan periksa mdnext-starter
