next.jsはReactを使ってstaticなサイトを作るフレームワークです。
- pages
配下にjsファイルを作成すると、ファイルシステムがそのままAPIになります。
- static
配下は画像などのstaticなファイルを置くときに使います。
/article/:name
などを使ってpath paramで記事の内容を書いたmdファイルを指定しようとした。
- next.jsはpath paramに対応するのにバックエンドでexpressサーバを立ち上げる必要があった。
→じゃあreact-routerに戻ろう
next.jsをやめてreact.js(CreateReactApp)で作り直しました。
- react.js
- medium.css - medium風にするCSSライブラリ
- Noto Sans Japanese - フォント。
- Netlify - フロントエンドのプラットフォームdeployサービス。
- markdown
- remark.js - markdownを扱うライブラリ。
- react-highlight
今回DBは使っていません。
jsonに全体のマスタデータを記述しています。
{
"articles":[
{
"title": "next.jsで技術ブログ作ろうとした話",
"date": "2019-07-07",
"md_name":"next-js-blog",
"tag":[
"next.js","blog"
]
},
...
import React from "react";
import parse from "remark-parse";
import Highlight from "react-highlight";
var html = require("remark-html");
let remark = require("remark");
class HighlightedMarkdown extends React.Component {
state = {
contents: "",
rendered: false
};
componentDidMount() {
(async () => {
let response = await fetch(this.props.file);
let data = await response.text();
let beginIndex = data.indexOf('<title>')
let endIndex = data.indexOf('</title>')
let title=''
if(beginIndex !== -1 && endIndex !== -1 ){
title = data.substring(beginIndex + '<title>'.length , endIndex)
}
let markdown = remark()
.use(parse)
.use(html)
.processSync(data).contents;
//.toString('utf-8')
this.setState({
contents: markdown,
rendered: true,
title: title
});
console.log(this.state.contents);
})().catch(err => {
console.log(err);
});
}
render() {
if (this.state.rendered) {
return (
<div className="container">
<div class="meta">
<div class="image" />
<div className="info">
<h1>{this.state.title}</h1>
</div>
</div>
<Highlight innerHTML={true}>{this.state.contents}</Highlight>
<hr/>
</div>
);
} else {
return <div />;
}
}
}
export default HighlightedMarkdown;
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント