Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
raw-loaderはマークダウンの読み込み。
gray-matterはfrontmatter部分の処理
react-markdownはReactコンポーネントでのマークダウン処理
npm install raw-loader gray-matter react-markdownblog.js
データを取り込んでpropsの中に置く
getStaticPropsの中のデータはpropsの{}に入れることでコンポーネントへ渡せる。
ここではtestTextをpropsに渡しています。
const blog = (props) => {
return (
<div>
</div>
)
}
export default blog
export async function getStaticProps(){
const testText = "Next.jsポートフォリオサイト"
return {
props:{
test:testText
},
}
}先ほど書いたコードを書き換えます。
require.contextはファイルを読み込むためのもの。
/\.md$/でマークダウンの拡張子.mdの読み込みを指定することで作成したmdファイルをconst blog = ((context)=>{ のcontextに格納することができています。
import matter from "gray-matter"
const blog = (props) => {
return (
<div>
</div>
)
}
export default blog
export async function getStaticProps(){
const blog = ((context)=>{
const keys = context.keys()
const values = keys.map(context)
console.log(values)
}
)(require.context('../data',true,/\.md$/))
return {
props:{
blogs:blogs
},
}
}valuesの中はデータが入っています。
keysの中はマークダウンファイルのファイル名が入っています。
以下のコードを何行目の後に追加します。
配列の形で格納されているkeysを分割し、
マークダウン名からslugを生成。first-blog.mdは/first-blogの形へ。
const data = keys.map((key,index)=>{
let slug=key.replace(/^.*[\\\/]/,").slice(0,-3)
const value = values[index]
const document = matter(value.default)
return{
frontmatter:document.data,
slug:slug
}
})
rerurn dataslug
http://localhost:3000/blogの/blogにあたる部分がslugです。
タイトル、日付、リンクが表示されるようにする
propsのblogsに対してmapを使って
props.blogs.map((blog,index)=>
const blog = (props) => {
return (
<div>
<h1>Blog</h1>
{props.blogs.map((blog,index)=>
<div key={index}>
<h3>{blog.frontmatter.title}</h3>
<p>{blog.frontmatter.date}</p>
<Link href={`/blog/${blog.slug}`}><a>Read More</a></Link>
</div>
)}
</div>
)
}
export default blognext.config.js
module.exports = {
webpack: function (config) {
config.module.rules.push({
test: /\.md$/,
use: "raw-loader",
})
return config
},
}fallbackをfalseとすることでpaths以外のslugに対して404ページを表示します。
スタイルの適用
CSS Modules
index.module.cssを作成し
.h1Text{
color:red;
letter-spacing:20px;
}<h1 className={style.h1Text}>こんにちは</h1>
