mdnext
1.0.0
MDNEXT est un écosystème d'outils pour obtenir votre projets NextJS + MDX.
Vous cherchez à démarrer un nouveau projet?
# 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 ... Vous voulez simplement accéder aux composants de vos applications basées sur 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 est un écosystème d'outils pour permettre au travail avec NextJS + MDX.
Le mdnext CLI fait surface une collection officiellement entretenue et les modèles soumis à la communauté au choix. Une fois choisi, le projet est cloné localement avec une histoire de validation propre et vous êtes prêt à construire votre prochain projet.
@mdnext/components livre accessible (merci Chakraui) et des composants extensibles pour avoir travaillé avec MDX . Ceux-ci incluent des choses que vous avez vues comme des composants Code pour les blocs de code ou Iframes pour intégrer un contenu riche à MDX
La collection de modèles mdnext est des projets basés sur NextJS avec des opinions sur la façon de styliser, de gérer MDX (et d'autres sources de données), de livrer des supports et de gérer vos workflows les plus habituels (ECOMM / Blogs / Pages de produits). Bien qu'il existe une collection de modèles officiellement entretenue, j'étais ravi de voir et de partager ce que la communauté a créé. Je sais qu'il y a beaucoup d'opinions et de confortations différentes en tant que développeur Web et je veux que notre écosystème soit accessible.
La structure de base du mdnext-starter peut être vue dans tous les autres modèles à son cœur de la façon dont il utilise MDX et Next .
Apprendre à connaître cette structure vous aidera à vous informer des meilleures pratiques actuelles qui sont suivies (qui sont gratuites à l'interprétation!) Et assez faciles à brancher et à jouer. Plongeons dans le démarreur:
jsconfig.js
NextJS nous permet de configurer des chemins absolus pour notre application. Nous l'utilisons pour importer facilement toutes nos fonctions et services publics à l'intérieur de notre répertoire src
pages
Le répertoire des pages définit votre routage. Des méthodes de cycle de vie comme getStaticProps / getStaticPaths / getServerProps sont disponibles au niveau de la page. C'est là que nous consommons notre contenu MDX en tant que données à passer à nos composants.
*_app.js* NextJS vous permet de remplacer le composant de l'application, qui est utilisé pour initialiser les pages. Plus ici*_document.js* : vous permet d'augmenter les balises <html> et <body> de notre application.all-data/index.js : cette page est un exemple d'affichage des liens vers toutes vos pages de données MDX individuelles. Ici, nous utilisons getStaticProps pour alimenter la masse de front de nos fichiers MDX pour nos composants.data/[slug].js : ici, nous utilisons le routage dynamique NextJS. En utilisant getStaticPaths nous pouvons nourrir une limace dynamique, en gérant toute la logique une fois et en l'appliquant à chaque données MDX que nous chargeons. Cela nous permet ensuite de faire correspondre nos données dans getStaticProps et de l'afficher à la page et à nos composants.index.js : Notre page à la racine de notre application, vit à l'intérieur des répertoires pages index.js . src Notre répertoire src détient tout notre code client. Nos components , hooks personnalisés, fonctions utility et nos fichiers MDX vivent tous ici, les trois premiers disponibles pour les importations de chemin absolu?
next.config.js pour la configuration personnalisée autour de choses comme environment variables , webpack , pageExtensions et bien d'autres, vous pouvez utiliser next.config.js
Chaque modèle aura sa propre README avec une documentation explicite concernant les ajouts qui composent la nouvelle configuration. Sinon, vous trouverez chaque modèle à son cœur, commence de manière similaire à mdnext-starter
Les modèles à l'intérieur de mdnext ont été faits pour atténuer la friction lors du démarrage d'un nouveau site Web. Les blogs, les sites personnels, le travail client, etc. peuvent toujours se sentir très intimidants pour commencer.
Que devons-nous accomplir?
Comment gérons-nous le style?
Comment vais-je gérer les données?
Quelle est la meilleure façon d'intégrer l'authentification?
Les opinions de ces modèles vous permettra de démarrer rapidement et vous permettra de personnaliser comme bon vous semble.
Nos modèles actuellement entretenus:
mdnext-starter Il s'agit du modèle le moins avisé, à partir duquel tous les modèles sont créés. Il abrite une configuration et une opinion très minimes en dehors d'un exemple de Sourcing MDX à l'intérieur de getStaticProps/Pathsmdnext-blog Les modèles de blog ajoutent des fonctionnalités en plus de notre mdnext-starter . Spécifiquement en utilisant Chakra-UI pour le style. Configuration pour les articles de blogs sur la page et le niveau de contenu à l'aide de nos fichiers MDX en tant que routes. FuseJS pour filtrer nos articles de blogs. Vérifiez ce modèle en action!mdnext-overlays lorsque vous devenez un nouveau streamer, vous relevez de nombreux défis. Finalement, vous voudrez configurer vos propres scènes, animations et interactions pour votre flux et ses téléspectateurs. Pourquoi ne pas utiliser les outils que vous aimez pour les créer? Avec cette configuration, vous êtes configuré avec un calque de base pour configurer chaque nouvelle scène comme route. Chaque itinéraire contient des moyens d'interagir avec les API Twitch, votre chat Twitch et les informations entourant votre flux et ses événements!Notre communauté a soumis des modèles:
mdnext-tailwind Vous voulez être opérationnel rapidement avec un projet Tailwind + mdnext ? C'est la réponse. Une configuration appropriée aux côtés d'une collection de ressources pour que ces nouveaux essais soient à Tailwind aise!mdnext-twin-macro Ce démarreur est configuré avec twin.macro car son choix de style. Cela vous permet d'utiliser les cours d'utilité Tailwind's et la méthode css emotion's pour un seul styles.mdnext-graphcms Utilisant GraphCMS comme notre source de données, nous configurons les bases d'un blog. Cela vous commence par un simple exemple de la façon dont vous pouvez retirer la marque de GraphCMS et l'alimenter à notre interface utilisateur avec notre MDXmdnext-reflexjs ReflexJS est une bibliothèque de style conçue pour la vitesse et une excellente expérience de développeur. Vous pouvez styliser vos composants à l'aide d'accessoires et de contraintes de style en fonction des spécifications de l'interface utilisateur du système.Vous voulez soumettre un nouveau modèle? Rendez-vous dans notre section contributive et consultez mdnext-starter
