[React] Next.jsでブログ(会社HP)をつくるぞ！②blog-starterサンプル内の構成を理解しよう

next.jsを使用して会社のHPを作成しています。

前回、next.jsのサンプルであるblog-starterを使用して、Docker上でローカル環境を立ち上げるところまで行いました。

前回の記事はこちらです。

今回は、blog-starterを活用するための構成の紹介などをしていければと思います。

概要を把握しよう

改めて、blog-starter内のディレクトリ構成を見てみるとこのようになっています。

/
├── _blogs
|   └ *****.md // markdownファイル
├── @types
|   └ *****.d.ts // 型情報ファイル
├── components
|   └ *****.tsx // コンポーネントファイル
├── interfaces
|   └ *****.ts // 型情報ファイル
├── lib
|   └ *****.ts // 共通で使用する関数などがまとめられている
├── pages
|   └ *****.tsx // ページごとのファイル
├── public
|   ├ assets // 画像
|   └ favicon // ファビコン
└── styles
    └ *****.css // CSS

特徴的なところを個別に紹介していきますね。

_posts

ここにはマークダウン形式で、記事コンテンツが含まれています。

マークダウンの前にyamlが書かれており、ここでコンテンツ以外の情報を管理している形ですね。

components

ここでコンポーネントが管理されています。
既存のコンポーネントは以下のとおりです。

Alert

ページの上部にあるGitHubへのリンクがこのコンポーネントです。

あまりAlert感はない

Avatar

プロフィール画像のコンポーネントです。

Container

最大幅などを指定しています

CoverImage

記事の最初の部分で表示される画像を管理しています

DateFormatter

日付の文字列を取り込んで、表示形式に合わせて出すコンポーネントです。

<time>なんてHTMLタグあるんですね。

Footer

文字通りfooterです。

Header

文字通りheaderです。

HeroPost

TOPに表示されている大きな投稿を管理しています。

Intro

TOPページの最初の部分です。

Layout

全体のレイアウトを管理しています。

Meta

文字通りmeta情報を管理しています。

MoreStories

最初の記事以外のところを管理しています。

PostBody

投稿の中身を見ています。

HTMLに変換された_posts配下のマークダウンを読み込む部分ですね。

PostHeader

投稿のコンテンツ以外の情報を持っています。

最初の画像やタイトルなどを表示する部分です。

PostPreview

投稿のカードを扱っています。

個人的にはPreviewではない気がしましたが、英語圏だとPreviewなんでしょうか…🤔

PostTitle

文字通り投稿のタイトルです。PostHeaderで呼び出されています。

SectionSeparator

hrタグで分割するためのやつです。

interfaces

型情報が入っています。

@types内ではtype、こちらはinterfaceが管理されていますが、使い分けの明確な意図はよくわかっていません。

(多分既存のものを継承するのはtypeでする、みたいな感じな気がしますが…)

lib

この階層にあるapi.tsで_posts内のデータをslugからとってくるなどの処理を行なっています。

pages

シンプルなページなのでそれほど多くありませんが、posts/[slug].tsxだけちょっと複雑な感じです。

getStaticPropsでSSGに対応しています。

Next 13では書き方変わるらしいですね…😇 また対応したら記事書こうと思います。

今日はこのあたりで。

次回は、zennのmarkdownパーサーを利用してmarkdownの解析を行うように変更していこうと思います。