L'étape suivante consiste à récupérer le contenu d'un article via son slug.
lib/mdx.js
export const getPostBySlug = async (slug) => { const postFilePath = path.join(POSTS_PATH, `${slug}.mdx`) // Résultat : A:/nextjs-mdx-blog/data/blog/slug.mdx const source = fs.readFileSync(postFilePath) // Retourner le contenu du fichier const { content, data } = matter(source) /* * Exemple : * --- * title: Hello * slug: home * --- * <h1>Hello world!</h1> * * Retour : * { * content: '<h1>Hello world!</h1>', * data: { * title: 'Hello', * slug: 'home' * } * } */ const mdxSource = await serialize(content) // Sérialiser le contenu avec next-mdx-remote pour le traiter const frontMatter = { ...data, slug } // Ajouter le slug dans le front matter, ce qui sera utilisé plus tard return { source: mdxSource, frontMatter }}
Vous pouvez ensuite récupérer tous les articles à afficher sur la page d'accueil.
lib/mdx.js
export const getAllPosts = () => { const frontMatter = [] allSlugs.forEach((slug) => { const source = fs.readFileSync(path.join(POSTS_PATH, slug), 'utf-8') const { data } = matter(source) frontMatter.push({ ...data, slug: formatSlug(slug), date: new Date(data.date).toISOString() }) }) return frontMatter.sort((a, b) => dateSortDesc(a.date, b.date))}// Tri par date décroissanteconst dateSortDesc = (a, b) => { if (a > b) return -1 if (a < b) return 1 return 0}