Comment créer un blog avec Next et MDX

À propos de l'auteur

Ibrahima Ndaw est un développeur et un blogueur Full-stack qui aime JavaScript et se penche également sur la conception UI / UX.
En savoir plus sur
Ibrahima
…

Next.js est un framework React qui vous permet de créer rapidement des applications statiques et dynamiques. Il est prêt pour la production et prend en charge le rendu côté serveur et la génération de sites statiques prêts à l'emploi, ce qui rend les applications Next.js rapides et conviviales pour le référencement.

Dans ce didacticiel, je vais d'abord expliquer ce qu'est exactement Next.js et pourquoi vous l'utiliseriez à la place de Create React App ou Gatsby. Ensuite, je vais vous montrer comment créer un blog sur lequel vous pouvez écrire et afficher des articles à l'aide de Next.js et MDX.

Pour commencer, vous aurez besoin d'une certaine expérience avec React. La connaissance de Next.js serait utile mais n'est pas obligatoire. Ce didacticiel serait utile à ceux qui souhaitent créer un blog (personnel ou organisationnel) en utilisant Next.js ou qui recherchent toujours ce qu'il faut utiliser.

Plongeons-nous dedans.

Qu'est-ce que Next.js?

Suivant. js est un framework React créé et maintenu par Vercel . Il est construit avec React, Node.js, Babel et Webpack. Il est prêt pour la production car il est livré avec de nombreuses fonctionnalités qui seraient généralement installées dans une application React «vanille».

Le framework Next.js peut rendre des applications sur le serveur ou les exporter de manière statique. Il n'attend pas que le navigateur charge le JavaScript pour afficher le contenu, ce qui rend les applications Next.js conviviales pour le référencement et extrêmement rapides.

Pourquoi utiliser Next.js plutôt que Create React App?

Create React App est un outil pratique qui offre une configuration de construction moderne sans configuration et sans avoir à installer Webpack, Babel, etc. ou à maintenir leurs dépendances. C'est la méthode recommandée pour créer des applications React de nos jours. Il contient un modèle pour TypeScript et est également fourni avec la bibliothèque de test React.

Cependant, si vous souhaitez créer une application multi-pages, vous devrez installer une bibliothèque supplémentaire, comme si vous rendiez une application React sur le serveur. La configuration supplémentaire pourrait être un problème, et tout paquet installé pourrait augmenter la taille finale du bundle de votre application.

C'est exactement le problème que Next.js est censé résoudre. Il offre la meilleure expérience développeur, avec tout ce dont vous avez besoin pour la production. Il est livré avec plusieurs fonctionnalités intéressantes:

• Export statique (pré-rendu)
  Next.js vous permet d'exporter votre application Next.js au moment de la construction vers du HTML statique qui s'exécute sans serveur. C'est la méthode recommandée pour générer votre site Web car elle est effectuée au moment de la construction et non à chaque demande.
• Rendu côté serveur (pré-rendu)
  Il pré-rend les pages en HTML sur le serveur à chaque demande.
• Fractionnement automatique du code
  Contrairement à React, Next.js divise le code automatiquement et ne charge que le code JavaScript nécessaire, ce qui rend l'application rapide.
• Routage basé sur le système de fichiers
  Next.js utilise le système de fichiers pour activer le routage dans l'application, ce qui signifie que chaque fichier du répertoire pages sera traité automatiquement comme une route.
• Rechargement à chaud du code
  Next.js s'appuie sur React Fast Refresh pour recharger à chaud votre code, offrant une excellente expérience de développement.
• Options de style
  Le framework Next.js a un support intégré pour Styled JSX, les modules CSS, Sass, LESS, et plus encore.

Next.js Versus Gatsby [19659003] Gatsby est un générateur de site statique construit sur React et GraphQL. Il est populaire et possède un énorme écosystème qui fournit des thèmes, des plugins, des recettes, etc.

Les sites Web Gatsby et Next.js sont ultra-rapides car ils sont tous deux rendus sur le serveur ou statiquement, ce qui signifie que le code JavaScript n'attend pas que le navigateur se charge. Comparons-les en fonction de l'expérience du développeur.

Gatsby est facile à utiliser, surtout si vous connaissez déjà React. Cependant, Gatsby utilise GraphQL pour interroger les données et les pages locales. Utiliser Gatsby pour créer ce blog simple pourrait être excessif car GraphQL a une courbe d'apprentissage, et le temps d'interrogation et de création des pages statiques serait un peu plus long. Si vous construisez ce même blog deux fois, d'abord avec Gatsby, puis avec Next.js, celui construit avec Next.js serait beaucoup plus rapide au moment de la construction car il utilise du JavaScript standard pour interroger les données et les pages locales.

J'espère que vous tirez parti de la puissance du framework Next.js et voyez pourquoi il est tellement plus pratique que certaines alternatives. C'est également un excellent choix si votre site Web repose fortement sur le référencement, car votre application sera rapide et facile à explorer pour les robots Google. C'est la raison pour laquelle nous utiliserons Next.js dans cet article pour créer un blog avec la bibliothèque MDX.

Commençons par configurer une nouvelle application Next.js.

Configuration

Il y a deux façons pour créer une application Next.js. Nous pouvons configurer une nouvelle application manuellement ou utiliser Créer une application suivante. Nous allons opter pour cette dernière car c'est la méthode recommandée, et elle configurera tout automatiquement pour nous.

Pour démarrer une nouvelle application, exécutez ce qui suit dans l'interface de ligne de commande (CLI):

 npx create -next-app

Une fois le projet initialisé, structurons l'application Next.js comme suit:

 src
├── composants
| ├── BlogPost.js
| ├── Header.js
| ├── HeadPost.js
| ├── Layout.js
| └── Post.js
├── pages
| ├── blog
| | ├── post-1
| | | └── index.mdx
| | ├── post-2
| | | └── index.mdx
| | └── post-3
| | └── index.mdx
| ├── index.js
| └──  _app.js
├── getAllPosts.js
├── next.config.js
├── package.json
├── README.md
└── yarn.lock

Comme vous pouvez le voir, notre projet a une structure de fichiers simple. Il y a trois choses à noter:

• _app.js nous permet d'ajouter du contenu au composant App.js afin de le rendre global.
• getAllPosts.js nous aide à récupérer les articles du blog dans le dossier pages / blog . Au fait, vous pouvez nommer le fichier comme vous le souhaitez.
• next.config.js est le fichier de configuration de notre application Next.js.

Je reviendrai sur chaque fichier plus tard et vous expliquerai de quoi il s'agit Est-ce que. Pour l’instant, voyons le package MDX.

Installation de la bibliothèque MDX

MDX est un format qui nous permet d’écrire JSX et d’importer des composants dans nos fichiers Markdown. Cela nous permet d'écrire régulièrement des Markdown et d'incorporer des composants React dans nos fichiers.

Pour activer MDX dans l'application, nous devons installer la bibliothèque @ mdx-js / loader . Pour ce faire, accédez d'abord à la racine du projet, puis exécutez cette commande dans la CLI:

 yarn add @ mdx-js / loader

Ou, si vous utilisez npm:

 npm install @ mdx-js / loader

Ensuite, installez @ next / mdx qui est une bibliothèque spécifique à Next.js. Exécutez cette commande dans la CLI:

 yarn add @ next / mdx

Ou, pour npm:

 npm install @ next / mdx

Génial! Nous avons fini de nous installer. Mettons la main à la pâte et codons quelque chose de significatif.

Configuration du fichier next.config.js

 const withMDX = require ("@ next / mdx") ({
  extension: /.mdx?$/
});

module.exports = avecMDX ({
  pageExtensions: ["js", "jsx", "md", "mdx"]
});

Plus tôt dans ce tutoriel, j'ai dit que les fichiers dans le dossier pages seraient traités comme des pages / routes par Next.js au moment de la construction. Par défaut, Next.js choisira simplement les fichiers avec les extensions .js ou .jsx . C'est pourquoi nous avons besoin d'un fichier de configuration, pour ajouter des personnalisations au comportement par défaut de Next.js.

Le fichier next.config.js indique au framework que les fichiers avec .md ] ou .mdx les extensions doivent également être traitées comme des pages / routes au moment de la construction car le dossier blog qui contient les articles se trouve dans le répertoire pages .

] Cela étant dit, nous pouvons commencer à récupérer les articles du blog dans la partie suivante.

Récupération des articles du blog

Une des raisons pour lesquelles la création d'un blog avec Next.js est facile et simple est que vous n'avez pas besoin de GraphQL ou comme pour récupérer les messages locaux. Vous pouvez simplement utiliser JavaScript standard pour obtenir les données.

Dans getAllPosts.js :

 function importAll (r) {
  retourne r.keys (). map ((fileName) => ({
    lien: fileName.substr (1) .replace (/  / index  .mdx $ /, ""),
    module: r (nom de fichier)
  }));
}

export const posts = importAll (
  require.context ("./ pages / blog /", true, /.mdx$/)
);

Ce fichier peut être intimidant au début. C'est une fonction qui importe tous les fichiers MDX du dossier pages / blog et pour chaque article, elle renvoie un objet avec le chemin du fichier, sans l'extension ( / post-1 ), et les données du billet de blog.

Avec cela en place, nous pouvons maintenant créer les composants afin de styliser et d'afficher les données dans notre application Next.js.

Construire les composants

In components / Layout.js :

 import Head from "next / head";
importer l'en-tête de "./Header";

Exporter la mise en page de la fonction par défaut ({children, pageTitle, description}) {
  revenir (
    <>
      
        
        
        
        
      
      

        

        
 {enfants} 
      
    
  );
}

Ici, nous avons le composant Layout que nous utiliserons comme wrapper pour le blog. Il reçoit les métadonnées à afficher en tête de page et le composant à afficher.

In components / Post.js :

 import Link from 'next / link'
importer {HeadPost} depuis './HeadPost'

export const Post = ({post}) => {
  const {
    lien,
    module: {meta},
  } = post

  revenir (
      

        
        
           En savoir plus → 
        
      
  )
}

Ce composant est chargé d'afficher un aperçu d'un article de blog. Il reçoit l'objet post à montrer comme accessoire. Ensuite, nous utilisons la déstructuration pour extraire le lien du message et la méta pour montrer de l'objet. Avec cela, nous pouvons maintenant passer les données aux composants et gérer le routage avec le composant Link .

In components / BlogPost.js :

 import {HeadPost} à partir de './HeadPost'

Exporter la fonction par défaut BlogPost ({children, meta}) {
  revenir (
    <>
      
      
 {enfants} 
    
  )
}

Le composant BlogPost nous aide à rendre un seul article. Il reçoit le message à afficher et son objet meta .

Jusqu'à présent, nous avons couvert beaucoup de choses – mais nous n'avons aucun article à afficher. Corrigeons ce problème dans la section suivante.

Rédaction de messages avec MDX

 importez BlogPost à partir de "../../../components/BlogPost"

export const meta = {
  title: 'Introduction à Next.js',
  description: 'Premiers pas avec le framework Next',
  date: '04 août 2020',
  readTime: 2
}

export par défaut ({enfants}) =>  {enfants} ;

## Mon titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. En sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum Sempre Posuere Magna, Quis Molestie Mauris Faucibus Ut.

Comme vous pouvez le voir, nous importons le composant BlogPost qui reçoit la meta et le corps du message.

Le paramètre children est le corps de l'article de blog ou, pour être précis, tout ce qui suit l'objet meta . C'est la fonction chargée de rendre le message.

Avec ce changement, nous pouvons passer au fichier index.js et afficher les messages sur la page d'accueil.

Affichage des messages

 import {Post} de "../components/Post";
importer {posts} de "../getAllPosts";

Exporter la fonction par défaut IndexPage () {
  revenir (
    <>
      {posts.map ((post) => (
        
      ))}
    
  );
}

Ici, nous commençons par importer le composant Post et les articles extraits du dossier blog . Ensuite, nous parcourons le tableau d'articles, et pour chaque article, nous utilisons le composant Post pour l'afficher. Cela étant fait, nous pouvons maintenant récupérer les messages et les afficher sur la page.

Nous avons presque terminé. Cependant, le composant Layout n'est toujours pas utilisé. Nous pouvons l'utiliser ici et emballer nos composants avec. Mais cela n'affectera pas les pages d'articles. C’est là que le fichier _app.js entre en jeu. Utilisons cela dans la section suivante.

Utilisation du fichier _app.js

Ici, le symbole de soulignement ( _ ) est vraiment important. Si vous l'omettez, Next.js traitera le fichier comme une page / route.

 import Layout from "../components/Layout";

Exporter l'application de la fonction par défaut ({Component, pageProps}) {
  revenir (
    
      
    
  );
}

Next.js utilise le composant App pour initialiser les pages. Le but de ce fichier est de le remplacer et d'ajouter des styles globaux au projet. Si vous avez des styles ou des données à partager dans le projet, placez-les ici.

Nous pouvons maintenant parcourir le dossier du projet dans la CLI et exécuter la commande suivante pour prévisualiser le blog dans le navigateur:

 yarn dev

Ou, en npm:

 npm run dev

Si vous ouvrez http: // localhost: 3000 dans le navigateur, vous pourrez voir ceci:

Super! Notre blog a l'air bien. Nous avons fini de créer l'application de blog avec Next.js et MDX.

Conclusion

Dans ce didacticiel, nous avons parcouru Next.js en créant un blog à l'aide de la bibliothèque MDX. Le framework Next.js est un outil pratique qui rend les applications React conviviales et rapides pour le référencement. Il peut être utilisé pour créer des sites Web JAMstack statiques et dynamiques en un rien de temps, car il est prêt pour la production et est doté de fonctionnalités intéressantes. Next.js est largement utilisé par les grandes entreprises et ses performances ne cessent de s'améliorer. C'est certainement quelque chose à vérifier pour votre prochain projet.

Vous pouvez prévisualiser le projet terminé sur CodeSandbox .

Merci d'avoir lu!

Ressources

Ces ressources utiles vous mèneront au-delà la portée de ce didacticiel.

(ks, ra, al, il)