Next.js, React tabanlı bir web framework’üdür ve Markdown dosyaları kullanarak bir blog oluşturmak istiyorsanız, React-markdown paketi kullanarak kolayca yapabilirsiniz. Aşağıdaki adımlar, Next.js projesinde React-markdown kullanarak bir Markdown blog oluşturmanıza yardımcı olacaktır:
İlk önce, Next.js projenizin dizininde bir pages dizini oluşturun ve içinde bir blog dizini oluşturun.
blog dizininde, index.js dosyası oluşturun. Bu, blogunuzun ana sayfası olacaktır.
React-markdown paketini yüklemek için terminalde aşağıdaki komutu çalıştırın:
npm install react-markdown
Markdown dosyalarınızı içerecek bir markdown dizini oluşturun. Bu dizindeki her dosya, bir blog gönderisine karşılık gelecektir.
index.js dosyasında, getStaticProps fonksiyonunu kullanarak markdown dizinindeki tüm Markdown dosyalarını alın ve sayfada kullanılmak üzere JSON verilerine dönüştürün. Aşağıdaki kod örneği size yol gösterecektir:
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import ReactMarkdown from 'react-markdown';
export async function getStaticProps() {
const files = fs.readdirSync(path.join('markdown'));
const posts = files.map(filename => {
const markdownWithMetadata = fs.readFileSync(path.join('markdown', filename)).toString();
const { data, content } = matter(markdownWithMetadata);
return {
frontmatter: data,
markdownBody: content,
slug: filename.replace('.md', ''),
};
});
return {
props: {
posts,
},
};
}
export default function Blog({ posts }) {
return (
<div>
{posts.map(post => (
<div key={post.slug}>
<h2>{post.frontmatter.title}</h2>
<p>{post.frontmatter.excerpt}</p>
<Link href={`/blog/${post.slug}`}>
<a>Read more</a>
</Link>
</div>
))}
</div>
);
}
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import ReactMarkdown from 'react-markdown';
export default function Post({ frontmatter, markdownBody }) {
return (
<div>
<h1>{frontmatter.title}</h1>
<p>{frontmatter.date}</p>
<ReactMarkdown>{markdownBody}</ReactMarkdown>
</div>
);
}
export async function getStaticPaths() {
const files = fs.readdirSync(path.join('markdown'));
const paths = files.map(filename => ({
params: {
slug: filename.replace('.md', ''),
},
}));
return {
paths,
fallback: false,
};
}
export async function getStaticProps({ params }) {
const { slug } = params;
const markdownWithMetadata = fs.readFileSync(path.join('markdown', `${slug}.md`)).toString();
const { data, content } = matter(markdownWithMetadata);
return {
props: {
frontmatter: data,
markdownBody: content,
},
};
}