Projet NextJS : Comment Utiliser Notion comme CMS
J'utilise Markdown pour stocker le contenu statique de mes sites NextJS. Il y a de nombreuses raisons à cela : c'est gratuit, c'est ouvert, c'est portable, c'est modifiable et il n'y a pas de verrouillage.
Cependant, sur mon blog personnel, j'ai maintenant environ 75 articles de blog en français et en anglais. Et il devient difficile d'organiser correctement ce contenu. J'ai expliqué précédemment comment je m'assure que les données stockées dans FrontMatter suivent la bonne forme à l'aide d'un SDK appelé ContentLayer.
Mais existe-t-il un moyen de mieux organiser ces données ?
Je veux quelque chose de simple à mettre en place. Je veux pouvoir modifier le contenu sur mon téléphone lorsque je me rends au travail. J'ai essayé différentes solutions, mais j'ai décidé d'utiliser Notion pour suivre tout mon contenu.
Si vous ne connaissez pas Notion, sachez qu'il s'agit d'un outil gratuit qui vous permet d'organiser votre vie. Il vous permet de créer facilement des tableaux avec des champs personnalisés. Et c'est génial pour mon contenu parce que chaque type de contenu a des champs différents. Par exemple, j'ai un tableau pour les articles de blog, un pour les pages et un pour les numéros de la newsletter (d'ailleurs, j'ai fourni un lien dans la description si vous voulez vous inscrire).
La raison pour laquelle Notion, Markdown et ContentLayer sont parfaitement adaptés à mes cas d'utilisation et à ma situation est que tous trois vous permettent de définir votre schéma de données dans le contenu lui-même.
Alors, que se passe-t-il lorsque je veux mettre à jour le contenu ? Je lance un script qui télécharge les données de Notion et les enregistre en Markdown. Je vous expliquerai comment dans une seconde.
Alors, comment procéder ? Permettez-moi de vous guider à travers les étapes.
Nous allons utiliser l'exemple du contenu d'un portfolio parce qu'il est simple. Comme je vis à Paris, en France, j'utiliserai comme contenu des photos que j'ai prises à Paris. Entrons dans le vif du sujet.
Création de la (des) base(s) de données de Notion
Commençons par mettre en place le contenu. Dans Notion, je vais créer une page appelée "Website", et à l'intérieur de cette page, je vais créer une page appelée BlogPosts et une autre appelée Portfolio.
À l'intérieur de Portfolio, configurons une table qui contiendra notre contenu. Nous commençons par définir les champs que la table contiendra. Pour plus de commodité, je définirai tous les noms de champs en suivant les conventions d'appellation des variables JavaScript. Nous avons déjà un Titre et des Tags, mais modifions leur nom en minuscules.
Ajoutons maintenant :
- une date, où nous stockerons la date à laquelle la photo a été prise, et que nous appellerons "date"
- Nous allons également ajouter un champ de texte appelé "lieu" pour indiquer l'endroit où la photo a été prise.
- J'aime aussi avoir une case à cocher appelée "enabled" qui me permet d'indiquer quand mon contenu est prêt (ou non).
- enfin, ajoutons un champ image et média que j'appellerai "image". Cela devrait suffire pour commencer, et nous pourrons toujours en ajouter d'autres par la suite.
Maintenant, nous devons ajouter du contenu à la table pour qu'elle renvoie quelque chose lorsque nous la récupérons...
Mettre en place une intégration de Notion
Une fois que cela est fait, l'étape suivante est de créer une intégration Notion. Il y a plusieurs façons d'y parvenir. Le plus simple est de vous rendre sur le site web de Notion, de vous connecter et d'aller à : `[/my-integrations]
Vous pouvez également y accéder en cliquant sur les trois points en haut à droite d'une page. Comme nous utiliserons souvent ce menu, nous l'appellerons le "Menu de la page".
Faites défiler la page jusqu'à "Ajouter des connexions", puis jusqu'à "Gérer les connexions". En bas de la page, vous trouverez un lien intitulé "Développer ou gérer l'intégration".
Une fois sur cette page, vous devez cliquer sur "Créer une nouvelle intégration". Votre intégration sera interne et liée à votre espace de travail. Vous devez donner un nom à votre intégration. Par exemple, Notion2Next. Vous pouvez également ajouter une image si vous le souhaitez, mais ce n'est pas nécessaire ici. Une fois que vous avez terminé, cliquez sur soumettre.
Nous avons maintenant les informations pour l'intégration. Nous avons besoin de deux choses. Tout d'abord, dans l'onglet "Capacités", vérifiez que votre intégration dispose des droits de lecture et de mise à jour du contenu.
Ensuite, allez dans l'onglet "Secrets" et copiez le secret. Avant d'aller plus loin, allons dans le projet NextJS.
Mes secrets sont stockés dans un fichier .env. Nous n'avons pas besoin de la notion de secret en production, donc le .env est l'endroit parfait pour le stocker. Créons donc une ligne dans le fichier appelée NOTION_SECRET= et copions-y le secret
Avant de continuer à travailler sur le projet NextJS, nous devons partager notre contenu avec l'intégration.
Nous nous rendons sur la page maître que nous avons créée et qui fait référence à nos différentes bases de données et nous ouvrons à nouveau le "Menu Page". Ensuite, nous nous dirigeons vers "Add Connexions". Nous devons maintenant sélectionner la connexion que nous avons créée.
Pendant que nous y sommes, obtenons l'identifiant de la base de données. Ouvrons la page qui contient le contenu de notre portefeuille. Ouvrez à nouveau le "Menu de la page", mais cette fois-ci, cliquez sur "Copier le lien".
Maintenant, retournons au projet NextJS et ouvrons à nouveau le fichier .env.
Tapez NOTION_PORTFOLIO_DATABASE_ID= et collez le lien que nous venons de copier. Cela devrait présenter quelque chose comme ceci :
Comme vous pouvez le voir, le lien comporte quatre parties.
La première partie est l'URL du site web de Notion** (https://www.notion.so/). Nous pouvons la supprimer. La deuxième partie est votre nom d'utilisateur (dans mon cas, "kodaps") suivi d'une barre oblique (/). Nous pouvons également la supprimer.
Il nous reste une longue chaîne hexadécimale, puis un ?v= suivi d'autres caractères.
Nous ne voulons conserver que la première partie de la chaîne hexadécimale. Nous supprimons tout ce qui se trouve après le point d'interrogation (y compris le point d'interrogation lui-même). Il ne reste plus que l'identifiant de la base de données qui contient votre contenu. Bravo :)
Mise en place dans NextJS
Récupérer les données de Notion et les sauvegarder implique pas mal de code. Cependant, pour faire gagner du temps à tout le monde, j'ai regroupé ce code dans une bibliothèque NPM.
La première chose à faire est d'ajouter les paquets @kodaps/notion-parse et dotenv à vos dépendances dev en utilisant votre gestionnaire de paquets, par exemple :
pnpm add @kodaps/notion-parse dotenv -D
Maintenant, notion-parse est encore une jeune bibliothèque, et elle suppose un certain nombre de choses sur la disposition de vos dossiers et n'a pas beaucoup de documentation puisque je l'ai créée pendant le week-end.
Cependant, elle est vraiment simple à utiliser.
J'ai créé un dossier script/ dans mon dépôt NextJS et j'ai créé un script appelé notion.js. Ce script va utiliser les variables d'environnement et la bibliothèque pour récupérer le contenu.
Le package expose une fonction parseNotion qui prend trois paramètres.
- Le premier est le secret de la notion que nous avons récupéré plus tôt
- Le second est le dossier dans lequel nous allons placer le contenu markdown
- Le troisième est un tableau d'objets.
Chacun des objets doit spécifier l'ID de la base de données de la notion (en utilisant le champ databaseId) et le type de contenu (en utilisant le champ contentType). L'objet peut également spécifier les champs à ignorer de la base de données Notion en spécifiant filterFields.
Et si vous avez un champ dans votre base de données qui spécifie la langue du contenu, vous pouvez passer le nom de ce champ en utilisant languageField.
Ici, par exemple, le contenu du Portfolio est géré tel quel, et le contenu du Post sera stocké dans différents répertoires en fonction de la langue, certains champs étant ignorés.
const NotionParse = require('@kodaps/notion-parse') ;
const dotenv = require('dotenv') ;
dotenv.config() ;
const go = async () => {
if (process.env.NOTION_SECRET) {
await NotionParse.parseNotion(process.env.NOTION_TOKEN,
'./src/content',
[{
databaseId : process.env.NOTION_PORTFOLIO_DATABASE_ID || '',
contentType : 'Portfolio'
},/*
{
databaseId : process.env.NOTION_POST_DATABASE_ID || '',
contentType : 'Post',
languageField : 'lang',
filterFields : ['translation', 'createdAt', 'status']
},*/
])
}
} ;
go().then() => {
console.log('Done') ;
}) ;
Pour l'instant, le code suppose plusieurs choses :
- que les fichiers sont stockés dans un sous-dossier du dossier passé en paramètre (ici
./src/content) en fonction du type de contenu - que les noms des types de ContentLayer correspondent aux sous-dossiers. Ainsi, par exemple, pour le type de contenu
Post, les fichiers seront stockés dans./src/content/post - le jeton Notion et les identifiants de la base de données sont stockés dans des variables d'environnement et il y a une base de données par type de contenu
- Le titre du contenu est stocké dans un champ 'title' dans Notion.
Si vous êtes intéressé, j'ai partagé le dépôt du paquet NPM dans la description afin que vous puissiez voir comment le code récupère le contenu de Notion. Lorsque je ferai une vidéo expliquant comment j'ai créé le package, je la posterai ici.
En attendant, la prochaine étape consiste à rassembler tout ce contenu pour créer la page de portfolio, et ce sera la prochaine vidéo, que vous pourrez trouver ici dès qu'elle sera prête.
Je vous donne donc rendez-vous dans le prochain article.
