Next.js, Markdown dosyalarını destekleyen özellikleriyle birlikte birçok blog uygulaması için ideal bir çözüm sağlar. React-markdown kütüphanesi, Markdown biçimlendirilmiş içeriği alır ve React bileşenlerine dönüştürür, böylece bunu Next.js web sitesinde göstermek için kullanabilirsiniz.
Aşağıdaki adımlar, React-markdown kullanarak bir Next.js Markdown blogu oluşturmanıza yardımcı olacaktır:
Bir Next.js projesi oluşturun ve gerekli bağımlılıkları yükleyin:
npx create-next-app my-blog
cd my-blog
npm install react-markdown gray-matter
posts adlı bir dizin oluşturun ve Markdown dosyalarını bu dizinde saklayın. Her Markdown dosyası, başlık, yazar, tarih ve içerik gibi önemli bilgileri içeren bir YAML ön ekine sahip olmalıdır. Örneğin, my-first-post.md dosyanız şu şekilde görünebilir:
yaml
—
title: My First Post
author: John Doe
date: “2022-02-17”
—
# Welcome to my blog
This is my first post on this blog. Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Next.js sayfanızda Markdown dosyalarını yüklemek için bir getStaticProps fonksiyonu oluşturun. Bu fonksiyon, gray-matter kütüphanesini kullanarak Markdown dosyasından önemli bilgileri ayrıştırır ve React-markdown bileşenine iletilmek üzere içeriği dönüştürür.
import fs from ‘fs’
import path from ‘path’
import matter from ‘gray-matter’
import ReactMarkdown from ‘react-markdown’
export default function Post({ content, data }) {
return (
<div>
<h1>{data.title}</h1>
<p>By {data.author} on {data.date}</p>
<ReactMarkdown>{content}</ReactMarkdown>
</div>
)
}
export async function getStaticPaths() {
const files = fs.readdirSync('posts')
const paths = files.map(filename => ({
params: {
slug: filename.replace('.md', '')
}
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const markdown = fs.readFileSync(path.join('posts', params.slug + '.md')).toString()
const { data, content } = matter(markdown)
return { props: { content, data } }
}
Son olarak, Markdown dosyalarını göstermek için bir Next.js dinamik yolu oluşturun. Bu yol, her Markdown dosyasını sayfaya yönlendirecektir. Örneğin, pages/posts/[slug].js dosyanız şu şekilde görünebilir:
javascript
import Post from ‘../../components/Post’
export default function PostPage({ content, data }) {
return <Post content={content} data={data} />
}
Bunu yaptığınızda, artık Markdown dosyalarınızı Next.js web sitenizde gösterebilir.