mdnext
1.0.0
MDNEXT es un ecosistema de herramientas para eliminar sus proyectos NextJS + MDX.
¿Buscas comenzar un nuevo proyecto?
# 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 ... ¿Solo quieres acceder a los componentes en tus aplicaciones basadas en 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 es un ecosistema de herramientas para empoderar a trabajar con NextJS + MDX.
El mdnext CLI aparece en una colección oficialmente mantenida y la comunidad presentó plantillas para elegir. Una vez elegido, el proyecto está clonado localmente con un historial de confirmación limpia y está listo para construir su próximo proyecto.
@mdnext/components ofrece componentes accesibles (gracias chakraui) y extensibles para trabajar con MDX . Estas incluyen cosas que ha visto como componentes Code para bloquear bloques de código o Iframes para incorporar contenido rico en MDX
La recopilación de plantillas mdnext son proyectos basados en NextJS con opiniones sobre cómo peinar, manejar MDX (y otras fuentes de datos), entregar medios y manejar sus flujos de trabajo más habituales (ECOMM / Blogs / Product Page). Si bien hay una colección de plantillas oficialmente mantenida, estaba emocionado de ver y compartir lo que la comunidad ha creado. Sé que hay muchas opiniones y comodidades diferentes como desarrollador web y quiero que nuestro ecosistema sea accesible.
La estructura básica del mdnext-starter se puede ver en todas las demás plantillas en su núcleo de cómo utiliza MDX y Next .
Conocer esta estructura le ayudará a informarle sobre las mejores prácticas actuales que se siguen (¡que son libres de interpretación!) Y lo suficientemente fácil de conectar y jugar. Vamos a sumergirnos en el iniciador:
jsconfig.js
NextJS nos permite configurar rutas absolutas para nuestra aplicación. Usamos esto para importar fácilmente todas nuestras funciones y utilidades dentro de nuestro directorio src
pages
El directorio de páginas define su enrutamiento. Los métodos de ciclo de vida como getStaticProps / getStaticPaths / getServerProps están disponibles en el nivel de página. Aquí es donde consumimos nuestro contenido MDX como datos para pasar a nuestros componentes.
*_app.js* NextJS le permite anular el componente de la aplicación, que se utiliza para inicializar páginas. Más aquí*_document.js* : le permite aumentar las etiquetas <html> y <body> de nuestra aplicación.all-data/index.js : esta página es un ejemplo de mostrar enlaces a todas sus páginas de datos MDX individuales. Aquí usamos getStaticProps para alimentar a la primera marina de nuestros archivos MDX para nuestros componentes.data/[slug].js : Aquí utilizamos el enrutamiento dinámico NextJS. Al usar getStaticPaths , podemos alimentar una babosa dinámica, manejando toda la lógica una vez y aplicándola a cada datos MDX que cargamos. Esto nos permite combinar con nuestros datos en getStaticProps y mostrarlos a la página y nuestros componentes.index.js : nuestra página en la raíz de nuestra aplicación, vive dentro de los directorios pages index.js . src Nuestro directorio src contiene todo el código de nuestro cliente. Nuestros components , hooks personalizados, funciones utility y nuestros archivos MDX viven aquí, con los tres primeros disponibles para las importaciones de ruta absoluta?
next.config.js Para configuración personalizada en torno a cosas como environment variables , webpack , pageExtensions y muchos más, puede utilizar next.config.js
Cada plantilla tendrá su propia README con documentación explícita relacionada con las adiciones que componen la nueva configuración. De lo contrario, encontrará cada plantilla en su núcleo, comienza de manera similar a mdnext-starter
Se hicieron las plantillas dentro de mdnext para aliviar la fricción al comenzar un nuevo sitio web. Los blogs, los sitios personales, el trabajo del cliente, etc. siempre pueden sentirse muy desalentadores para comenzar.
¿Qué tenemos que lograr?
¿Cómo manejamos el estilo?
¿Cómo voy a manejar los datos?
¿Cuál es la mejor manera de integrar la autenticación?
Las opiniones en estas plantillas lo harán comenzar rápidamente y le permitirán personalizar como mejor le parezca.
Nuestras plantillas actualmente mantenidas:
mdnext-starter Esta es la plantilla menos obstinada, de la que se crean todas las plantillas. Alberga una configuración y opinión muy mínima fuera de un ejemplo de abastecimiento de MDX dentro de getStaticProps/Pathsmdnext-blog Las plantillas de blog agrega características sobre nuestro mdnext-starter . Específicamente usando Chakra-UI para el estilo. Configuración para publicaciones de blogs en la página y nivel de contenido utilizando nuestros archivos MDX como rutas. FuseJS para filtrar nuestras publicaciones de blogs. ¡Revise esta plantilla en acción!mdnext-overlays cuando se convierte en un nuevo streamer, se encuentra con muchos desafíos. Eventualmente, querrás configurar tus propias escenas, animaciones e interacciones para tu transmisión y sus espectadores. ¿Por qué no usar las herramientas que amas para crearlas? Con esta configuración, está configurado con una capa base para configurar cada nueva escena como ruta. ¡Cada ruta contiene formas de interactuar con las API de Twitch, su chat de contracción e información que rodea su transmisión y sus eventos!Nuestra comunidad presentó plantillas:
mdnext-tailwind ¿Quiere ponerse en funcionamiento rápidamente con un proyecto de Tailwind + mdnext ? Esta es la respuesta. ¡Una configuración adecuada junto con una colección de recursos para que aquellos nuevos en Tailwind se sientan cómodos!mdnext-twin-macro Este iniciador está configurado con twin.macro , ya que es la elección de estilo. Esto le permite utilizar las clases de utilidad Tailwind's y el método css emotion's para estilos únicos.mdnext-graphcms utilizando GraphCMS como nuestra fuente de datos, configuramos los conceptos básicos para un blog. Te inicia con un simple ejemplo de cómo puede extraer Markdown de GraphCMS y alimentarlo a nuestra interfaz de usuario con nuestro MDXmdnext-reflexjs REFLEXJS es una biblioteca de estilo construida para la velocidad y una excelente experiencia de desarrollador. Puede diseñar sus componentes utilizando accesorios de estilo y limitaciones basadas en las especificaciones de la interfaz de usuario del sistema.¿Quieres enviar una nueva plantilla? Dirígete a nuestra sección contribuyente y mira MdNext-Starter
