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 / Blogs / Product Pages). Хотя есть официально поддерживаемая коллекция шаблонов, я был взволнован, чтобы увидеть и поделиться тем, что создало сообщество. Я знаю, что в качестве веб -разработчика существует много разных мнений и комфорта, и я хочу, чтобы наша экосистема была доступна.
Основная структура 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 , чтобы подавать переднюю часть наших файлов MDX для наших компонентов.data/[slug].js : Здесь мы используем динамическую маршрутизацию NextJS. Используя getStaticPaths , мы можем подавать динамический слизняк, обрабатывая всю логику один раз и применяя ее к каждому данным MDX , которые мы загружаем. Это позволяет нам затем соответствовать нашим данным в getStaticProps и отображать их на странице и наших компонентах.index.js : наша страница в корне нашего приложения живет внутри pages Directory 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 в качестве нашего данных, мы настроем основы для блога. Это начинает с простого примера того, как вы можете вытащить отметки от GraphCM и подавать его в наш пользовательский интерфейс с помощью MDXmdnext-reflexjs Reflexjs-это библиотека стиля, созданная для скорости и отличного опыта разработчика. Вы можете стилизовать свои компоненты, используя стильные реквизиты и ограничения на основе спецификаций пользовательского интерфейса системы.Хотите отправить новый шаблон? Зайдите в наш участок и посетите Mdnext-Starter
