Comment créer un blog Next.js Markdown en utilisant react-markdown

Les dispositifs à faible code comme WordPress simplifient la procédure de création de blog. Vous pouvez utiliser un motif préfabriqué et commencer à écrire un article en quelques heures. Si vous souhaitez avoir encore plus de contrôle sur votre code et que vous avez également du temps devant vous, il est nettement préférable de construire votre blog à partir de zéro. Vous pouvez même faire appel à un framework comme Next.js pour rationaliser la procédure.

Apprenez exactement comment développer un blog Next.js facile qui fait des billets de blog markdown.

Création d'un projet Next.js

Next. js est un framework React qui rationalise justement la façon dont vous construisez des applications. Il offre plusieurs outils et aussi des configurations hors package, vous permettant de commencer à créer du code rapidement après l'avoir monté.

Le moyen le plus simple de commencer avec Next.js est d'exécuter la commande create-next-app dans un terminal :

Cette commande produit un projet Next.js ayant tous les documents essentiels pour commencer.

Tout d'abord, il faut nettoyer le index. js submit pour ressembler à ceci :

Créer des articles de blog en format Markdown

Le site du blog fournira des données markdown conservées dans votre espace dans le dossier du projet. Donc, produisez un nouveau dossier à l'origine appelé contenu pour stocker les documents. Dans ce dossier, produisez un tout nouveau fichier appelé create- active-link-nextjs. md ainsi que les éléments suivants :

Le nom des données markdown fera certainement partie de l'URL de l'article de blog, alors assurez-vous qu'il s'agit d'un bon nom. En outre, notez les composants entre les tirets. Il s'agit des métadonnées du billet et on les appelle la matière première.

Voir aussi :  Comment utiliser les boucles For en Python

Analyser les fichiers Markdown

Pour chaque post, vous devez analyser le contenu markdown ainsi que le front matter. Pour le markdown, utilisez react-markdown et également pour les informations de la front matter, utilisez gray-matter.

React- markdown est une remarque améliorée de la partie React qui transforme en toute sécurité le markdown directement en HTML. La bibliothèque gray-matter analyse la question frontale et transforme YAML en un article.

Exécutez la commande suivante dans le terminal pour installer react-markdown et aussi gray-matter.

Dans un tout nouveau dossier appelé utils, créez une nouvelle donnée appelée md.js. Vous allez certainement produire des fonctions d'aide qui renvoient le matériel d'article dans ces documents.

Obtenir tous les articles publiés

Dans md.js, ajoutez le code suivant pour retourner tous les articles publiés dans le dossier de contenu.

Dans la fonction getAllPosts() :

  • Obtenez le parcours complet vers le dossier de contenu en utilisant le composant path.
  • Obtenez les fichiers dans le dossier matériel en utilisant l'approche fs.readdirSync().
  • Filtrez les documents pour qu'ils ne soient constitués que de documents avec l'expansion .md.
  • Récupérer les composants de chaque documents, constitués du numéro de front en utilisant l'approche map.
  • Retourner une sélection ayant le front matter ainsi que le slug (le nom du fichier sans l'extension .md) de chaque donnée.

Pour obtenir uniquement les articles publiés, vous pouvez filtrer tous les articles et également ne retourner que ceux dont le type isPublished dans le front matter est readied à true.

Dans md.js, ajoutez la fonction getSinglePost() pour récupérer les composants d'un seul article.

Cette fonction appelle la fonction getFileContent() pour récupérer les matières de chaque fichier. Après cela, en utilisant le paquet de matière grise, la fonction obtient la matière première et le contenu markdown.

Voir aussi :  Qu'est-ce que Node.js ? Voici comment utiliser JavaScript côté serveur

Afficher tous les articles du blog

Next. js donne différentes options de fourniture, dont la génération statique. La génération fixe est un type de pré-rendu où Next.js produit toutes les pages HTML pendant le temps de développement. Vous l'utilisez pour créer des pages statiques rapides.

Consultez le documents officiels de Nextjs pour en savoir plus sur la fabrication.

Next. js va pré-rendre une page web au moment de la construction en utilisant les props retournés par la fonction getStaticProps. Dans cette situation, les props seront une sélection de posts publiés.

Modifiez le fichier index.js pour afficher une liste d'article.

La partie Accueil utilise les articles de blog retournés par getStaticProps. Elle les itère en utilisant la fonction map, et aussi pour chaque message, elle affiche un titre, un lien web entièrement l'article de blog, ainsi qu'un résumé.

Afficher un billet de blog

Comme discuté, les noms de fichiers des billets de blog seront utilisés comme cours URL. Ces cours sont en outre vibrants, vous devez donc les générer pendant le temps de construction. Next.js vous permet de le faire en utilisant la fonction getStaticPaths().

Par exemple, dans ce code, les chemins sont créés à partir des noms des documents markdown.

Notez que vous utilisez les informations sur les posts renvoyées par la fonction d'assistant getAllPublished() que vous avez développée précédemment.

Vous établissez également l'alternative à false, qui renvoie une erreur 404 pour les cours qui n'existent pas.

Voir aussi :  Qu'est-ce que l'injection de dépendances en PHP et comment l'utiliser

getStaticPaths() est généralement utilisé avec getStaticProps() qui récupère les matériaux de chaque billet de blog en fonction des paramètres.

Pour fournir le markdown en HTML, utilisez react-markdown.

Ce composant rendra le contenu de chaque article de blog et son URL équivalente.

Si vous produisez un site de blog de développeur, vous pouvez inclure la capacité de coloration syntaxique pour chaque élément.

Stylisation du blog Next.js Markdown

Jusqu'ici, vous avez développé un site de blog Next.js markdown qui affiche une liste de post ainsi que le rendu des matériaux de ce message. Pour rendre l'apparence du blog plus agréable, vous devez inclure des designs CSS.

Next. js a un excellent support CSS, ainsi que vous pouvez choisir d'utiliser des collections CSS-in-JS comme les éléments stylisés. Si vous aimez séparer CSS de JS, vous pouvez utiliser des composants CSS.

Comment rendre une démarque dans le prochain JS ?

Créez votre première application

  • Créez une application Next.js.
  • Naviguer entre les pages.
  • Actifs, métadonnées et CSS.
  • Pré-rendu et récupération de données.
  • Installer. Le chemin de la page dépend des données externes. Implémentez getStaticPaths. Implémentez getStaticProps. Markdown de rendu. Polir la page de publication. Peaufiner la page d'index.
  • Déploiement de votre application Next.js.

Comment utiliser le prochain JS MDX ?

Les étapes suivantes expliquent comment configurer @next/mdx dans votre projet Next.js :

  • Installez les packages requis : npm install @next/mdx @mdx-js/loader @mdx-js/react.
  • Exiger le package et le configurer pour prendre en charge les pages .mdx de niveau supérieur.
  • Créez une nouvelle page MDX dans le répertoire /pages : - /pages - my-mdx-page.mdx - package.json.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.