Next.js
を用いてブログシステムの構築を行った。
記事はマークダウンファイルで作成し、row-loader
で読み込みを行うようにした。
また、記事一覧については gray-matter
を活用し、マークダウンファイルの FrontMatter部分の読み取りを行い配置するように工夫した。
ブログ全体のデザインについては TailwindCSS
を用いて構成した。
上記 Next.js+TailwindCSS製のブログ構築の方法については下記デモページにて解説していこうと思う ^^b
●第1回●
ブログシステムの概要と使用ライブラリの説明
記事に進む→
●第2回●
Next.js および TailwindCSS のインストール
記事に進む→
●第3回●
レイアウトの作成とgetStaticProps()の説明
記事に進む→
●第4回●
コンポーネント分割と動的ルートの説明
記事に進む→
●第5回●
マークダウンファイルの読み込みライブラリのインストールと読み込みテスト
記事に進む→
●第6回●
各ページのコンテンツの整理とデザインの修正
記事に進む→
●第7回●
読み込まれた記事のコードブロックにシンタックスハイライトを導入
記事に進む→
●第8回●
作成したブログシステムをNetlifyにデプロイ
記事に進む→
・React v17.0.1
・Next.js v10.0.7
・TailwindCSS v2.0.3
・gray-matter v4.0.2
・raw-loader v4.0.2
・react-markdown v5.0.3
・react-syntax-highlighter v15.4.3