This is a simple blog built with Next, easily deployable to Netlify!

Next.js+TailwindCSS製Blog構築①


※本記事は開発の経緯や技術スタックの説明を行なっていますので、実際の構築からお知りになりたい方は[次の記事](/post/next-tailwind02)に移動してください！

# ｜開発動機
Reactの基礎的な学習を終え、何か１つサンプル的なアプリを作りたいなと考えておりまして...  
ふと、「情報発信するための自身のBlog」を持っていないなと思い、せっかくなら WordPress ではなく、自作の Blog を作ってみようと思い立ち開発に至りました。  
ただ、サクッと作ってしまいたいという気持ちもあったので、Reactのフレームワークである`Next.js`を採用することにしました！  
また、CSSが超絶苦手な私は`TailwindCSS`さんのお力を借りる事にいたしました^^;


### 【技術スタック】
```
 ・ Next.js v10.0.7
 ・ React v17.0.1
 ・ TailwindCSS v2.0.3
```

記事につきましては`Markdown`ファイルで作成したものを読み込み、レンダリングするようにしました。  
読み込み・変換 用のライブラリとして以下のものを活用しました。
```
 ・ raw-loader v4.0.2
 ・ gray-matter v4.0.2
 ・ react-markdown v5.0.3
 ・ react-syntax-highlighter v15.4.3
```

・`raw-loader`はファイルを文字列としてインポートできるwebpackのローダーです。  
・`gray-matter` は文字列またはファイルからFrontMatterを読み取り解析するものです。今回はMarkdownファイルの冒頭に以下のように書き込んでおくとJSONデータとして吐き出せるようにしました。  
```
---
title: 'ここにブログのタイトルを書きます'
author: 'ここには作者名を書きます'
date: '20XX年XX月XX日'
excerpt: 'ここに記事の概要を書き込んでおくとトップページで表示できます'
---
```

・`react-markdown`はローダーで読み取ったMarkdownファイルのテキストデータをHTMLに変換するためのライブラリです。  
・`react-syntax-highlighter`はコードブロックのシンタックスハイライトを付けてくれるライブラリです。

以上がこのブログで使っているライブラリです。

### 【デプロイどうしようか】
今回構築したブログはDBを持たず、`/posts`ディレクトリにMarkdownファイルを設置してビルドするだけで完了という構成にしています。  
つまり、静的なサイトを生成している(SSG)という感じです。  
サーバー自体はレンタルサーバーなどでもよかったのですが、せっかくなら色んな事にチャレンジしたいと思い、`Netlify`のようなホスティングサービスを利用し、加え、GitHubとの連携をしてPUSH時に自動ビルドが走るようにしてみようと考えました！なんちゃってCI/CD環境の構築を目指してみたわけです^^;  

そんなこんなで、現在ご覧のBlogサイトは`Netlify`によってホスティングされております！

###### ＜次回予告＞
次回から、実際に構築をしていきます！  
まずは、`Next.js`のインストールとHelloWorld!  
それからCSSフレームワークの`TailwindCSS`のセットアップと基本的なルーティングの確認までを紹介したいと思います！  
それでは乞うご期待 ^^/

[続きを読む→](/post/next-tailwind02)

Next.js+TailwindCSS製Blog構築②


※本記事はNext.jsの開発環境の構築および、TailwindCSSのセットアップとNext.jsのルーティングの確認をする内容となっております。CSSを自作でされる方や基本的なセットアップがお済みの方は[次の記事](/post/next-tailwind03)に移動してください！

# ｜環境構築
それでは、早速`Next.js`のインストールから行なっていきたいと思います。  
とその前に、Next.js アプリを作成するためには `Node.js`をインストールしておく必要があります。[公式ドキュメント](https://nextjs.org/docs)によりますと、Node.js 10.13 以上のバージョンがインストールされていることが条件となります。この記事を進められる前に、Node.js のインストール作業をお願い致します。

### アプリ作成
では、早速アプリの作成をしていきましょう！  
ターミナルを開いて、アプリを作成したいディレクトリに移動してください。移動先で以下のコマンドを入力してください。
```
 npx create-next-app [project-name]
```
`[project-name]`の部分はご自身でお好きな名前を付けてください！[]は不要です。  
以下のような文言が出ていれば完了です！
```
Success! Created sample at /保存先/[project-name]
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd [project-name]
  yarn dev
```
一度`Next.js`のTOP画面を拝んでおきましょう！
```
 cd [project-name]  // アプリのディレクトリに移動して
 npm run dev        // または yarn dev でもいいです
```
すると、コンパイルが始まって、しばらく経つと`compiled successfully`という文字が表示されると思いますので、ブラウザから `http://localhost:3000` にアクセスすると以下のようなTOPページが確認できるかと思います！
![トップ画像](/images/top_page.png)

やりましたね！ ^^v  
次に`TailwindCSS`のセットアップに移りましょう！  
ターミナルにて以下のコマンドを入力  
`(※以下のコマンドはプロジェクトディレクトリ内で入力してください)`
```
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```
次にコンフィグファイルを作成していきます。  
以下のコマンドを入力すると`tailwind.config.js`と`postcss.config.js`が自動的に生成されます。
```
npx tailwindcss init -p
```
生成された`tailwind.config.js`ファイルを編集していきましょう。生成時は`purge`の値が空っぽになっているかと思いますので、以下のように追記します。
```javascript
// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```
続いて`CSS`ファイルにTailwindCSSの設定を読み込むように変更します。  
`/styles`ディレクトリ内にある`globals.css`を開き、中身を全て消去し、以下の３行に書き換えてください。
```css
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
以上で TailwindCSS の設定は完了です！ ちなみに、このCSSファイルは`pages/_app.js`の中でインポートしています。
もし、他のCSSファイルを作成した時は、適宜読み込みを行なってください！  
ということで、一応確認のためと Next.js の動きの確認のために`Hello World!!`を表示させてみましょう！  
`pages/index.js`ファイルを開いてください。以下のようになっているかと思います。
```javascript
import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        ...
        中略
        ...
      </footer>
    </div>
  )
}
```
このファイルのインポート部分の削除と`Home()`ファンクションの return の中の`<Head>`タグから`</footer>`を全て消去し、以下のように書き換えてください。
```javascript
export default function Home() {
  return (
    <div className="text-red-400">
      Hello World!
    </div>
  )
}
```
変更後、ターミナルで`npm run dev`を実行してください。※コマンドを実行する場所はアプリのあるディレクトリ内でです。  
実行後に`http://localhost:3000`にアクセスすると...
![HelloWorld](/images/hello_world.png)

`赤字`で Hello World!! が表示されましたね ^^v  
React で class を付与させるには class="hoge" と書くのではなく、`className="hoge"`と書く必要があります。  
今回の divタグ内の`text-red-400`は TailwindCSS のクラスで、文字色を赤の400にするというものです。色見本については [TailwindCSS公式ドキュメント](https://tailwindcss.com/docs/customizing-colors) で確認してみてください！また、他のどのようなクラスがあるのかも見てみてください〜

少し長くなってきましたが...  
続いて、簡単にルーティングについても確認しておきたいと思います。  
`npm run dev` は止めずに、そのままで進めていきましょう！止めた方は、再度実行しておいてください！  
それでは、まず`pages`ディレクトリ内に`about.js`ファイルを作成してください。そして、以下のように書き加えてください。
```javascript
// pages/about.js
const About = () => {
  return (
    <div className="text-center mt-10">
      about
    </div>
  )
}
export default About
```
変更を保存後、`http://localhost:3000/about`にアクセスすると about という文字列が表示されているかと思います。  
Next.js は /pages ディレクトリに js のエクスポートファイルを設置すると、ビルド時にファイル名をURLとしてルーティングに組み込んでくれます^^（便利！）  
ちなみに、about.js では index.js とは違うアロー関数の形で記述しエクスポートする様な書き方をしています。以後はこの様な書き方で進めようと思います！  
今回は以上です！^^

###### ＜次回予告＞
次回は不要ファイルを削除し、ディレクトリの構成を整えます。コンポーネント分割についても考えようと思います。  
それから サイト情報を乗せた json ファイルのインポートおよびその情報の表示、Next.js のダイナミックルーティングについての構築あたりをやっていこうと思います！  
それでは乞うご期待 ^^/

[続きを読む→](/post/next-tailwind03)

Next.js+TailwindCSS製Blog構築③


※本記事は、JSONファイルのローディングとgetStaticProps()によるpropsの取得と引き渡し部分の解説、Layoutコンポーネントの作成と確認といった内容となっております。  
初期の設定からご覧になられたい方は[こちら](/post/next-tailwind02)にお戻りください。
コンポーネントの分割と動的ルーティングの部分からご覧になられたい方は[次の記事](/post/next-tailwind04)に移動してください！

# ｜Component分割とレイアウトの作成
コンポーネントの分割の思想については、様々な考え方がございますので、この記事内では深く言及することは避けます。
かなりフランクに捉えて頂いて、分割するにはどうすればいいかという部分のみ掴んでいただければ幸いです。

では、早速コーディングをしていきましょう！と、その前に今回使うことのない、不要なファイル達を削除しておきたいと思います。
削除後に残るディレクトリやファイルは以下のようになりますので、それ以外のファイルは削除してしまいましょう！  
一応具体的に削除するファイルやディレクトリを挙げておくと、`public/vercel.svg`、`styles/Home.module.css`と`api`ディレクトリは中の`hello.js`ごと削除してしまってください。
```
.next/
node_modules/
pages/
  _app.js
  about.js
  index.js
public/
  favicon.ico
styles/
  global.css
.gitignore
package-lock.json
package.json
postcss.config.js
README.md
tailwind.config.js
yarn.lock
```
それでは、ここからファイルやディレクトリを作成していきます！

### ●簡易ファイルローディングの体験
コンポーネント分割の前に、JSONファイルを読み込んで画面にデータを表示するということをしてみましょう。  
tailwind.config.js と同じ階層に`siteconfig.json`ファイルを作成し、以下のような記述をします。
```json
// siteconfig.json（このコメント行は記述しないでください）
{
  "title": "ブログのタイトルを記述",
  "description": "ブログの概要をここに記述"
}
```
記述を終えたら次に`index.js`ファイルを編集していきます。  
先ほど作成した siteconfig.json のデータをインポートしていきます。以下のように中身を書き換えてしまってください。
```javascript
// pages/index.js
const Index = ({ title, description }) => {
  return (
    <div className="text-center mt-10">
      site_title: {title} <br />
      description: {description}
    </div>
  )
}
export default Index

export async function getStaticProps() {
  const configData = await import(`../siteconfig.json`)

  return {
    props: {
      title: configData.default.title,
      description: configData.default.description,
    },
  }
}
```

![コンフィグの内容を表示](/images/siteconfig.png)

上の画像ような形でJSONファイル内に書かれた内容を表示することができたでしょうか？  
今回記述した内容の中で`getStaticProps()`について`簡単に`解説しておきます。  
getStaticProps()はNext.jsが用意しているファンクションで、そのファンクション内で返却したデータをビルド時にページコンポーネントに引き渡す役割を担ってくれています。今回のソースコード内でのことをザックリと捉えると、props というものの中に`title`と`description`という変数で siteconfig.json のデータを取得・格納し、Indexページのコンポーネント内に引き渡すということを行なっています。それを経て画面に表示されているということなんですね^^  
`getStaticProps()`について、詳しくは[Next公式データフェッチ](https://nextjs.org/docs/basic-features/data-fetching)の部分をご参照いただければと思います。

### ●レイアウトの作成
それでは、今度こそレイアウトのコンポーネントを作成していきましょう！  
まず、`components`フォルダをpagesと同階層に作成してください。その中に、`Header.js`、`Footer.js`、`Layout.js`、`PostList.js`の４ファイルを空の状態でいいので作成してください。  
そのあと、`Layout.js`を以下のように編集していってください。
```javascript
// components/Layout.js
import Head from 'next/head'
import Link from 'next/link'

export default function Layout({ children, pageTitle, ...props }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{pageTitle}</title>
      </Head>
      <section className="text-center mt-10">
        <header className="bg-blue-300 h-10">
          <nav>
            <Link href="/">
              <a className="pr-10">My Blog</a>
            </Link>
            <Link href="/about">
              <a>About</a>
            </Link>
          </nav>
        </header>
        <div className="bg-yellow-300 h-20">{children}</div>
      </section>
      <footer className="bg-green-300 text-center h-10">Footerのテキスト</footer>
    </>
  )
}
```
- __<Head>コンポーネント__

まず、`next/head`から読み込んでいる`<Head>`コンポーネント内ですが、`<meta>`情報や`<title>`などを書き込むことができます。
あらかじめサイト全体で読み込ませておきたい情報は、ここに置いておきましょう！

- __<Link>コンポーネント__

続いて、`next/link`から読み込んでいる`<Link>`コンポーネント内ですが、シンプルに捉えると、飛ばしたい先のリンクを作成することができます。

- __{children}パーツ__

最後に`{children}`の部分ですが、各ページでのコンテンツを表示する場所です。
詳しくは後ほど書く`index.js`で確認していただければと思いますが、各pagesのファイルの中でLayoutコンポーネントで挟んであげれば、
`{children}`の部分にコンテンツを表示することができます。  
では、`pages/index.js`で先ほどの`Layout`コンポーネントを読み込み、コンテンツを表示させてみましょう！以下のように変更してください。

```javascript
// pages/index.js
import Layout from '../components/Layout'

const Index = ({ title, description }) => {
  return (
      <Layout pageTitle={title}>
        <div>ここがLayoutコンポーネントのChildren部分です</div>
        <div>{description}</div>
      </Layout>
  )
}
export default Index

export async function getStaticProps() {
  const configData = await import(`../siteconfig.json`)
  return {
    props: {
      title: configData.default.title,
      description: configData.default.description,
    },
  }
}
```
編集を保存したあと、`http://localhost:3000`にアクセスすると以下のような画面が表示されていれば成功です！
![レイアウトコンポーネントの表示](/images/layout.png)

少し長くなってしまったので、コンポーネントの分割については次回書くことにします ^^/

###### ＜次回予告＞
次回は、今回のやり残しであるコンポーネント分割の方法とダイナミックルーティングについて解説していこうと思います！  
それでは乞うご期待 ^^/

[続きを読む→](/post/next-tailwind04)

Next.js+TailwindCSS製Blog構築④


※本記事は、component分割によるレイアウトの作成および動的ルーティングの確認をする内容となっております。  
初期の設定からご覧になられたい方は[こちら](/post/next-tailwind02)にお戻りください。
MDファイルのローディング部分からご覧になられたい方は[次の記事](/post/next-tailwind05)に移動してください！

# ｜Component分割
[前回](/post/next-tailwind03)でも少し触れたのですが、コンポーネントの分割に関しては、様々な思想がございますので、この記事内では深くは触れません。
分割ってこうやってやるんだな〜ぐらいの捉え方をして頂けるとありがたいです。  
それでは、前回作成した`Layout`コンポーネントの分割を行なっていきましょう！前回の時点での components ディレクトリの中は以下のような状態かと思います。
```
components/
  - Footer.js // 空ファイル
  - Header.js // 空ファイル
  - Layout.js
  - PostList.js // 空ファイル
```
また、`Layout.js`ファイル内の Layoutファンクションが返却している部分は以下のようになっているかと思います。
```javascript
// components/Layout.js の Layoutファンクション return()内
  <Head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{pageTitle}</title>
  </Head>
  <section className="text-center mt-10">
    <header className="bg-blue-300 h-10">
      <nav>
        <Link href="/">
          <a className="pr-10">My Blog</a>
        </Link>
        <Link href="/about">
          <a>About</a>
        </Link>
      </nav>
    </header>
    <div className="bg-yellow-300 h-20">{children}</div>
  </section>
  <footer className="bg-green-300 text-center h-10">Footerのテキスト</footer>
```
この部分を`Header.js`と`Footer.js`に分割していきたいと思います。  
まずは Header から分けていきましょう！先ほどのコードの`<header>`タグの始まりから終わりまでを切り取りし、Header.jsファイルを以下のように書き加えます。
```javascript
// components/Header.js
import Link from 'next/link'
export default function Header() {
  return (
    <header className="bg-blue-300  h-10">
      <nav>
        <Link href="/">
          <a className="pr-10">My Blog</a>
        </Link>
        <Link href="/about">
          <a>About</a>
        </Link>
      </nav>
    </header>
  )
}
```
その次に`Layout.js`ファイル内で、今ほど作った Header コンポーネントを読み込んでいきましょう！
```javascript
// components/Layout.js
import Head from 'next/head'
import Header from '../components/Header' // ←追記

export default function Layout({ children, pageTitle }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{pageTitle}</title>
      </Head>
      <section className="text-center">
        <Header />  {/* ←変更箇所 */}
        <div className="bg-yellow-300 h-20">{children}</div>
      </section>
      <footer className="bg-green-300 text-center h-10">Footerのテキスト</footer>
    </>
  )
}
```
一度画面を確認してみてください！前回と同様に以下のような画面が表示されましたか？
![レイアウト](/images/layout.png)

確認ができましたら、Footerも同様に分割してみてください！やり方は同じなので、一度ご自身でチャレンジしてみてくださいね ^^b

では、私の方もやっていきます！  
`Footer.js`ファイルを以下のように書き加えます。
```javascript
// components/Footer.js
export default function Footer() {
  return (
    <footer className="bg-green-300 text-center h-10">
      Footerのテキスト
    </footer>
  )
}
```
Header の時と同様に `Layout.js` で読み込みます。
```javascript
// components/Layout.js
import Head from 'next/head'
import Header from '../components/Header'
import Footer from '../components/Footer' // ←追記

export default function Layout({ children, pageTitle }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{pageTitle}</title>
      </Head>
      <section className="text-center">
        <Header />
        <div className="bg-yellow-300 h-20">{children}</div>
      </section>
      <Footer />  {/* ←変更箇所 */}
    </>
  )
}
```
再度画面を確認し、同じ状態を保てていれば成功です！  
以上のような感じでコンポーネントの分割を行なっていくことができます！
なぜ分割を行うの？という疑問が浮かんだ方もいらっしゃると思いますので、この作ったものを他のページで再利用する中で少しでも良さを実感してみようと思います！  
ということで、"about" としか表示のされないアバウトページにレイアウトを反映させてみましょう！`about.js`を以下のように編集してみてください！
```javascript
import Layout from '../components/Layout'

const About = () => {
  return (
    <Layout pageTitle="ここはアバウトページだよ">
      <div>Aboutページのコンテンツをここに書いていく！</div>
    </Layout>
  )
}
export default About
```
これだけの変更で以下の画像のようにレイアウトの反映ができました！  
![アバウトページ](/images/about.png)

ん？何か違和感が...

![タイトル](/images/title.png)

そうなんです！タイトルが変わっているんです！  
実はレイアウトコンポーネントで挟む時に`<Layout pageTitle="ここはアバウトページだよ">`という感じで
レイアウトコンポーネントに`pageTitle`を引き渡しています。レイアウトコンポーネント側にはこのpageTitleの受付口を
用意していましたので、「はいはい〜タイトルの変更ね！」という感じで書き換えてくれているわけですね！

このように、コンポーネントを分割し、共通パーツとして作成しておくと、複数ページ、
複数箇所での使い回しができるので便利だし、コーディングの量が減るので良いよね！という感じです ^^v  

### ●動的ルート
それでは本題に入っていきましょう！動的ルーティングについてです。  
前回までの状態で作られているルーティングは`/`と`/about`の２ページ分です。
必要に応じて`pages`ディレクトリにページを追加していけば良いのはご理解いただけたかと思います。
ただ、ブログ記事などのように、画面のデザインはほぼ変わらず、コンテンツの部分のみ変わっていくようなページに関しては、
記事作成ごとに、js ファイルを生成するのはどうも無駄な作業な気がします...  
そこで、`Dynamic Routes`(動的ルート)の出番です。`/post/3`や`/post/156`、`/post/nextjs`のような
記事のIDや記事のタイトルといった固有の情報を含んだURLにアクセスされた場合に、記事のデータを取得し表示できるようにしてあげると
毎回毎回記事を書くたびにjsファイルを生成しなくても済むようになりますね！^^v  
ということで、簡易的に動的ルートを体験してみましょう！  
`pages`ディレクトリ内に`post`ディレクトリを作成し、その中に`[post].js`ファイルを作成してください。
```
pages/
  post/         // ←作成
   - [post].js  // ←作成
 - _app.js
 - about.js
 - index.js
```
その次に、`[post].js`の中身を以下のようにしてください。
```javascript
// [post].js
import { useRouter } from 'next/router'
const Post = () => {
  const router = useRouter()
  const { post } = router.query
  return (
    <p className="m-10">
      Post: {post}
    </p>
  )
}
export default Post
```
ファイルを保存し`http://localhost:3000/post/1`や`http://localhost:3000/post/nextjs`にアクセスしてみてください。
Post: 1 や Post: nextjs という文字が画面に表示されたかと思います。  
簡単に解説しておきますと、基本的に Next.js では pages ディレクトリ以下のファイル名(.jsより前の部分)がルーティングを構成する要素となりますので、
今回作成した [post].js で考えると、`[post]`の部分がルーティングを構成する要素となります。
Next.js では、このあたりを動的にキャッチし、クエリオブジェクトとして持つことができます。
また、複数の動的な値をキャッチしたい場合は post ディレクトリの中に`[hoge]`ディレクトリを作成し、その中に`[huga].js`を作成すると、
`http://localhost:3000/post/today/comment`というリクエストに対して today や comment と行った値をキャッチすることができます。
その他いくつかのパターンが存在しますので、詳しくは[Next公式動的ルート](https://nextjs.org/docs/routing/dynamic-routes)をご確認ください。

この動的ルートを活用し、ルートとマッチするマークダウンファイルをローディングし、記事として画面に表示するというのが今回のブログ構築の狙いです！  
それでは、今回は以上です ^^v

###### ＜次回予告＞
次回は、マークダウンファイルを読み込むためのローダーのセットアップと読み込みの確認を行いたいと思います。  
少しづつ難しい内容になってくるかと思いますが、語弊を恐れずに平易に書いていきたいと思います！  
それでは乞うご期待 ^^/

[続きを読む→](/post/next-tailwind05)

Next.js+TailwindCSS製Blog構築⑤


※本記事は、マークダウンをローディングするためのライブラリのセットアップと読み込みの確認、記述したプログラムの説明をおこなっています。  
ライブラリについての概要については[こちら](/post/next-tailwind01)にお戻りください。  
本記事を既に読まれたという方は[次の記事](/post/next-tailwind06)に移動してください！

# ｜ローダーのセットアップ
まずは、３つのライブラリをインストールしていきます。  
ターミナルを開き、アプリのディレクトリに移動し、以下のコマンドを入力してください。
```
npm install react-markdown gray-matter raw-loader
```
続いて、row-loader でマークダウンファイルを読み込むための Next.js の設定ファイルを作成していきます。
package.json がある階層と同じ場所に`next.config.js`ファイルを作成してください。
`next.config.js`ですよ！nextconfig.js ではないですからね... このドット(.)が無いだけで私は２時間も時間を溶かしてしまいました(T.T)  
ファイル作成ができたら、以下のように記述してください。
```javascript
// next.config.js
module.exports = {
  target: 'serverless',
  webpack: function (config) {
    config.module.rules.push({
      test: /\.md$/,
      use: 'raw-loader',
    })
    return config
  },
}
```
次に、読み込み用のマークダウンファイルを作成していきます。  
public などと同じトップの階層に`posts`ディレクトリを作成し、その中に`mypost.md`ファイルを作成し、以下のように記述してください。
改行用に各行の末尾に半角スペース２個含まれたりしていますのでコピペしてしまってください。
```markdown
---
title: 'ブログのタイトル'
author: 'ブログの筆者'
---
↓ここからマークダウンのボディ↓  
色んなマークダウンの書き方を試してみて、  
`どのように表示されるか`確認してみましょう！
- リスト１
- リスト２
- リスト３
```
最後にこのマークダウンファイルを読み取る部分の作成をしていきましょう！  
`[post].js`を編集しましょう！少し長いですが以下のように書き換えてください。
```javascript
// [post].js
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'

export default function BlogPost({ frontmatter, markdownBody }) {
  if (!frontmatter) return <></>

  return (
    <article>
      <h1>{frontmatter.title}</h1>
      <p>By {frontmatter.author}</p>
      <div>
        <ReactMarkdown source={markdownBody} />
      </div>
    </article>
  )
}

export async function getStaticProps({ ...ctx }) {
  const { post } = ctx.params

  const content = await import(`../../posts/${post}.md`)
  const data = matter(content.default)

  return {
    props: {
      frontmatter: data.data,
      markdownBody: data.content,
    },
  }
}

export async function getStaticPaths() {
  const blogSlugs = ((context) => {

    const keys = context.keys()
    const data = keys.map((key, index) => {
      let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)

      return slug
    })
    return data
  })(require.context('../../posts', true, /\.md$/))

  const paths = blogSlugs.map((slug) => `/post/${slug}`)

  return {
    paths,
    fallback: false,
  }
}
```
各種ファイルを作成したあと、開発サーバーを立ち上げている場合は再起動してください。
立ち上げていない場合はターミナルにて`npm run dev`をしてください。  
`http://localhost:3000/post/mypost`にアクセスしてみると以下のような画面がみれましたでしょうか？

![マイポスト](/images/mypost.png)

いくつかに分けて解説をしていきます！  
### ● getStaticProps()
まずは、BlogPostファンクションの下にある`getStaticProps()`からですが、
[以前](/post/next-tailwind03)にもこのファンクションの説明はしてありますが、
もう一度コンパクトにお伝えすると`データをビルド時にページコンポーネントに引き渡すファンクション`です。
今回のものでいうとマークダウンファイルのデータを取得・解析し、[post].js のページに引き渡す役割を担っているという感じでしょうか。  
今回返却しているデータは`frontmatter`と`markdownBody`の２つです。 
frontmatter には何が入っているのかというと、mypost.md ファイルの冒頭で記述した
```markdown
---
title: 'ブログのタイトル'
author: 'ブログの筆者'
---
```
の部分（FrontMatter）を`gray-matter`というライブラリを用いて解析し、以下のようなJSONデータとして返却しています。
```json
{title: 'ブログのタイトル', author: 'ブログの筆者'}
```
また、markdownBody の中には、マークダウンファイルで記述した FromtMatter より下のテキストが
`content`というキーでJSONデータの中にそのまま格納されています。
これについては後述しますが、変換作業が必要です。

### ● ReactMarkdown
BlogPost ファンクションの中に`<ReactMarkdown source={markdownBody} />`という記述があるかと思います。
こちらは`react-markdown`というライブラリを使って、マークダウンで記述されているテキストをHTMLに変換している部分です。
`source={markdownBody}`という形で引き渡してあげても構いませんし、
`<ReactMarkdown># Hello, *world*!</ReactMarkdown>`という形で挟んであげても大丈夫です！  
次回以降の記事でスタイルを整えていきますが、マークダウンで書かれたテキストが、
どのようなHTMLに変換されているかについては色々と試して確認してみてくださいね @@/

### ● getStaticPaths()
最後に getStaticPaths() について説明して、この記事を終えたいと思います。  
`getStaticPaths()`とは、getStaticProps() と同様に Next.js が用意しているファンクションです。
どのようなことができるのかというのをザックリ言ってしまうと、
「ビルド時に特定のデータに基づいて動的ルートを静的に生成する」という感じかなと思います。@@;  
ブログでいうと記事が複数ある場合、その記事の全てのルートは確保しておきたいですよね。
その記事のルートを確保するために、今回でいうと、マークダウンファイルの名称をルートとして作成しよう！としているわけです。  
つまるところ、pages ディレクトリに `post01.md`ファイルと`post02.md`ファイルが格納されている場合、
`/post/post01`と`post/post02`のアクセスに関しては記事の表示をするが、
それ以外は404ページ（return 内の fallback: false が該当箇所です！）を表示するというコントロールをおこなっているという感じです！

いつものごとく、詳しくは[Next公式getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation)
をご確認ください。

機能面はこれで概ね完成ですね！超絶に簡易ですが、ブログシステムができました〜 ^^v

ということで、今回はこれで以上です！^^b

###### ＜次回予告＞
次回は、ブログ全体の表示項目の修正とデザインの修正をやっていこうと思います。  
それでは乞うご期待 ^^/

[続きを読む→](/post/next-tailwind06)

Next.js+TailwindCSS製Blog構築⑥


※本記事は、各ページの表示コンテンツの加筆修正とデザイン部分の修正をおこなっていく内容となっております。  
本記事を既に読まれたという方は[次の記事](/post/next-tailwind07)に移動してください！

# ｜表示コンテンツの整理
ブログシステムの構築も終盤となってまいりました！もうしばらくお付き合いください。  
それではやっていきましょう！まずは、トップページに表示するコンテンツを考えていきます。
トップページでは、ブログ記事の一覧と、記事へのリンクを設置していきたいと思います！  
`components/PostList.js`を開き、以下のように記述してください。
```javascript
// PostList.js
import Link from 'next/link'

export default function PostList({ posts }) {
  if (posts === 'undefined') return null

  return (
    <div>
      {!posts && <div>No posts!</div>}
      <ul>
        {posts &&
          posts.map((post) => {
            return (
              <div key={post.slug} className="container mx-auto">
                <Link href={{ pathname: `/post/${post.slug}` }}>
                  <div className="text-2xl mt-20 hover:underline hover:text-blue-800">
                    {post.frontmatter.title}
                  </div>
                </Link>
                <div className="flex items-center">
                  {post.frontmatter.author}
                </div>
                <div className="mt-8 mb-10 text-justify">
                  {post.frontmatter.excerpt}
                </div>
                <Link href={{ pathname: `/post/${post.slug}` }}>
                  <a className="underline hover:text-blue-800">続きを読む →</a>
                </Link>
              </div>
            )
          })
        }
      </ul>
    </div>
  )
}
```
それから、`pages/index.js`を以下のように修正してください。
```javascript
// index.js
import matter from 'gray-matter'
import Layout from '../components/Layout'
import PostList from '../components/PostList'

const Index = ({ title, description, posts }) => {

  return (
    <Layout pageTitle={title}>
      <div>ここがLayoutコンポーネントのChildren部分です</div>
      <div>{description}</div>
      <PostList posts={posts} />
    </Layout>
  )
}

export default Index

export async function getStaticProps() {
  const configData = await import(`../siteconfig.json`)

  const posts = ((context) => {
    const keys = context.keys()
    const values = keys.map(context)

    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,
        markdownBody: document.content,
        slug,
      }
    })

    return data
  })(require.context('../posts', true, /\.md$/))

  return {
    props: {
      posts,
      title: configData.default.title,
      description: configData.default.description,
    },
  }
}
```
また、記事の概要についてもリスト内で表示させたいので`mypost.md`ファイルの FrontMatter 部分に`excerpt`項目を追加してください。
```markdown
// mypost.md (※この行は含めないでください！)
---
title: 'ブログのタイトル'
author: 'ブログの筆者'
excerpt: 'ブログ記事の概要をここに記述ブログ記事の概要をここに記述ブログ記事の概要をここに記述ブログ記事の概要をここに記述'
---
↓ここからマークダウンのボディ↓  
色んなマークダウンの書き方を試してみて、  
`どのように表示されるか`確認してみましょう！
- リスト１
- リスト２
- リスト３
```
この状態で画面を確認してみると以下のようになっているかと思います。
少し不恰好ですが、後でレイアウト修正しますので、もうしばらく我慢してください。
![ポストリスト](/images/post_list.png)

現在、記事の件数（マークダウンファイルの枚数）は１件しかありません。この状態では複数ある場合の画面を確認できないので、
`posts`ディレクトリに別のマークダウンファイルを作成してみましょう！  
`another_post.md`ファイルを作成し、中身を記述してください。
```markdown
---
title: 'ブログのタイトル②'
author: 'ブログの筆者②'
excerpt: 'ブログ記事の概要をここに記述②ブログ記事の概要をここに記述②ブログ記事の概要をここに記述②ブログ記事の概要をここに記述②'
---
ブログ記事の中身です。ブログ記事の中身です。ブログ記事の中身です。ブログ記事の中身です。ブログ記事の中身です。ブログ記事の中身です。
```
保存後画面の確認をしてください！無事２つ目の記事がリストアップされましたでしょうか^^？  
ちなみに、Footerコンポーネントが意図した部分にないですよね ^^;  
`Lyaout.js`で{children}の div に`h-20`が当たっているのが原因なのですが、レイアウトの修正自体は後でおこなっていくので、心配しないでください！  
気になってムズムズが止まらない方は、`<div className="bg-yellow-300 h-20">{children}</div>`の`h-20`を削除しておいてください！  
次に、ブログ記事詳細ページも修正をしていきましょう。`[post].js`ファイルを開き、下記のようにしてください。
```javascript
// [post].js
import Link from 'next/link'
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
import Layout from '../../components/Layout'

export default function BlogPost({ siteTitle, frontmatter, markdownBody }) {
  if (!frontmatter) return <></>

  return (
    <Layout pageTitle={`${siteTitle} | ${frontmatter.title}`}>
        <Link href="/">
          <a className="underline">← トップページに戻る</a>
        </Link>
        <article>
          <h1>{frontmatter.title}</h1>
          <p>By {frontmatter.author}</p>
          <div>
            <ReactMarkdown source={markdownBody} />
          </div>
        </article>
    </Layout>
  )
}

export async function getStaticProps({ ...ctx }) {
  const { post } = ctx.params

  const config = await import(`../../siteconfig.json`)
  const content = await import(`../../posts/${post}.md`)
  const data = matter(content.default)

  return {
    props: {
      siteTitle: config.title,
      frontmatter: data.data,
      markdownBody: data.content,
    },
  }
}

export async function getStaticPaths() {
  const blogSlugs = ((context) => {

    const keys = context.keys()
    const data = keys.map((key, index) => {
      let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)

      return slug
    })
    return data
  })(require.context('../../posts', true, /\.md$/))

  const paths = blogSlugs.map((slug) => `/post/${slug}`)

  return {
    paths,
    fallback: false,
  }
}
```
大きな変更点は、レイアウトコンポーネントの反映と、トップページに戻るためのリンクの設置です。  
この時点で、URLに値を入力することなく、画面上で全ページへのルーティングが通ったかと思います。
一度存分にルーティングを体感してみてください〜

### ●デザイン修正
表示コンテンツの整理（文言等は未修正だが...）はできましたので、次に、デザインの修正に取り掛かっていきましょう！  
まずは、Header から修正します。`Header.js`を開き、以下のように修正してください。
```javascript
// Header.js
import Link from 'next/link'
export default function Header() {
  return (
    <header className="bg-black text-white sticky top-0">
      <nav className="mb-20 flex items-center h-20">
        <Link href="/">
          <a className="pl-8 md:pl-20 lg:pl-40 xl:pl-64 2xl:pl-80">My Blog</a>
        </Link>
        <Link href="/about">
          <a className="pl-20">About</a>
        </Link>
      </nav>
    </header>
  )
}
```
続いて、Footer の修正をしましょう！`Footer.js`を開き、以下のように修正してください。
```javascript
// Footer.js
import Link from 'next/link'
export default function Footer() {
  return (
    <footer className="text-white text-xs">
      <div className="bg-gray-900 flex-col text-center cursor-pointer">
        <Link href="/">
          <div className="h-20 flex justify-center items-center">
            Top Page
          </div>
        </Link>
        <Link href="/about">
          <div className="h-20 flex justify-center items-center border-t border-gray-500">
            About Page
          </div>
        </Link>
      </div>
      <div className="bg-black h-10 flex justify-center items-center">
        &copy;Daisuke All Rights Reserved.
      </div>
    </footer>
  )
}
```
続いて`Layout.js`の修正を行います！以下のように変更してください。
```javascript
// Layout.js
import Head from 'next/head'
import Header from '../components/Header'
import Footer from '../components/Footer'

export default function Layout({ children, pageTitle }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{pageTitle}</title>
      </Head>
      <section>
        <Header />
        <div className="m-8 md:mx-14 lg:mx-40 xl:mx-64 2xl:mx-80 mb-20">
          {children}
        </div>
      </section>
      <Footer />
    </>
  )
}
```
非常にシンプルなデザインとなっておりますが、Header と Footer、Layout の修正が終わり、
デザイン面は整ってきたのではないでしょうか ^^/  
![デザイン後](/images/after_design.png)
最後に、記事詳細のデザインを少しだけ整えましょう！
`[post].js`の BlogPostファンクションを以下のように修正してください。
```javascript
// [post].js の BlogPost ファンクションを修正
export default function BlogPost({ siteTitle, frontmatter, markdownBody }) {
  if (!frontmatter) return <></>

  return (
    <Layout pageTitle={`${siteTitle} | ${frontmatter.title}`}>
      <Link href="/">
        <a className="underline">← トップページに戻る</a>
      </Link>
      <article className="mt-10">
        <h1 className="text-2xl mb-4">{frontmatter.title}</h1>
        <p className="mb-6">By {frontmatter.author}</p>
        <div>
          <ReactMarkdown source={markdownBody} />
        </div>
      </article>
    </Layout>
  )
}
```
![ポストページ](/images/post_page.png)
お気づきかと思いますが、マークダウンで書かれた部分... デザインが無いですよね^^;  
ただ、少し長くなってきたということもありますので今回はここまでとします！

###### ＜次回予告＞
次回は、マークダウン部分のデザインを反映させていきましょう！
また、コードブロックはコードが読みやすいようにシンタックスハイライトが入るようにしたいと思います！  
ここまでできたら、Netlify にデプロイしましょう！
可能であれば、無料ですので、Netlify のアカウントを作成しておいて頂けますと次回以降の作業がスムーズに進みます〜  
それでは乞うご期待 ^^/

[続きを読む→](/post/next-tailwind07)

Next.js+TailwindCSS製Blog構築⑦


※本記事は、マークダウンで書かれた記事の部分のデザインの反映および
コードブロックにシンタックスハイライトを導入する内容となっております。  
本記事を既に読まれたという方は[次の記事](/post/next-tailwind08)に移動してください！

# ｜記事へのCSS反映
それでは、記事の部分へのCSSを反映させていきましょう！  
まずは`[post].js`ファイルの修正からやっていきます。
以下のように`<ReactMarkdown>`を囲っている div タグに`markdown`クラスを付与してください。
```javascript
// [post].js の BlogPostファンクション return 内
<div className="markdown">
  <ReactMarkdown source={markdownBody} />
</div>
```
続いて、`globals.css`ファイルを以下のように修正してください。
```css
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Markdown Styles */
/* Global */
.markdown {
    @apply leading-relaxed text-sm;
}
@screen sm {
  .markdown {
    @apply text-base;
  }
}
@screen lg {
  .markdown {
    @apply text-lg;
  }
}

/* Headers */
.markdown h1,
.markdown h2 {
  @apply text-xl my-6;
}
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  @apply text-lg my-3 ;
}
@screen sm {
  .markdown h1,
  .markdown h2 {
    @apply text-2xl;
  }
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6 {
    @apply text-xl;
  }
}

/* Links */
.markdown a {
  @apply text-blue-600;
}
.markdown a:hover {
  @apply underline;
}

/* Paragraph */
.markdown p {
  @apply mb-4 leading-8 md:leading-10 text-justify;
}

/* Lists */
.markdown ul,
.markdown ol {
  @apply mb-4 ml-8;
}
.markdown li > p,
.markdown li > ul,
.markdown li > ol {
  @apply mb-0;
}
.markdown ol {
  @apply list-decimal;
}
.markdown ul {
  @apply list-disc;
}

/* Blockquotes */
.markdown blockquote {
  @apply p-2 mx-2 my-2 bg-gray-100 mb-4 border-l-4 border-gray-400  rounded-r-lg;
}
.markdown blockquote > p {
  @apply mb-0;
}

/* Images */
.markdown img {
  @apply shadow-lg;
}

/* Code */
.markdown :not(pre) > code {
  @apply bg-indigo-50 p-1 font-semibold text-gray-600 rounded-lg ;
}

/* Pre */
.markdown pre {
  @apply mx-2;
}
```
全てのマークダウン記法に対応できている訳では無く、最低限これくらいあればいいかな〜という範囲を記述しています！  
もし、ご自身で不足しているものがある場合は、適宜追加してください。（コードブロックのシンタックスハイライトはこの後対応します。）  
では、一度画面を確認してみましょう！色々なパターンのマークダウン記法で書いて確認してみてください！
![マークダウンデザイン反映後](/images/markdown_design.png)
反映されてそうですね ^^b

では、最後にコードブロックのシンタックスハイライトを対応していきましょう！
今回は、`react-syntax-highlighter`というライブラリを使いたいと思います。

 - [react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter) - npm -

まずは、ライブラリのインストールからしていきましょう！  
ターミナルでアプリのトップの階層に移動して以下のコマンドを入力してください。
```
npm install react-syntax-highlighter --save
```
インストールが成功したら、次にコードブロック用のコンポーネントを作っていきます！  
components ディレクトリに`CodeBlock.js`ファイルを作成し、以下のように記述してください。
```javascript
// CodeBlock.js
import React from "react"
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
import { base16AteliersulphurpoolLight } from "react-syntax-highlighter/dist/cjs/styles/prism"

const CodeBlock = ({ language, value }) => {
  return (
    <SyntaxHighlighter language={language} style={base16AteliersulphurpoolLight}>
      {value}
    </SyntaxHighlighter>
  )
}
export default CodeBlock
```
このコンポーネントを`<ReactMarkdown>`内で読み込んであげると、コードブロックにシンタックスハイライトが反映されます。  
ということで、`[post].js`を以下のように修正してください！
```javascript
import Link from 'next/link'
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
import Layout from '../../components/Layout'
import CodeBlock from "../../components/CodeBlock" //←追記

export default function BlogPost({ siteTitle, frontmatter, markdownBody }) {
  if (!frontmatter) return <></>

  return (
    <Layout pageTitle={`${siteTitle} | ${frontmatter.title}`}>
        <Link href="/">
          <a className="underline">← トップページに戻る</a>
        </Link>
        <article className="mt-10">
          <h1 className="text-2xl mb-4">{frontmatter.title}</h1>
          <p className="mb-6">By {frontmatter.author}</p>
          <div className="markdown">
            <ReactMarkdown
              source={markdownBody}
              renderers={{ code: CodeBlock }} //←追記
            />
          </div>
        </article>
    </Layout>
  )
}
// 以下 getStaticProps(), getStaticPaths() が続きます
```
この状態で、マークダウンファイルにコードブロックを記述してみてください！
PHPや JavaScript といった言語を指定したい場合は、` ```javascript ` という感じでコードブロックの開始
バッククオートの横に書いてあげると読み込むことができます。反映されているか画面を確認してみましょう！

![コードブロック](/images/code_block.png)

無事反映していることが確認できました〜 ^^v  
ということで、以上で完成です！！  
細かな部分のデザインの修正やアレンジの続きは読者の皆様に委ねます！

最後までお付き合いありがとうございました！お疲れ様でした m(. . )m  
なんですが...

###### ＜次回予告＞
システム自体は完成したのですが、デプロイ部分が残っていますね ^^;  
ということで、次回は Netlify にデプロイしてみようと思います！
おそらく次回で最終回となりますね〜  
それでは乞うご期待 ^^/

[続きを読む→](/post/next-tailwind08)

Next.js+TailwindCSS製Blog構築⑧


# ｜Netlify へのデプロイ
とうとうこのシリーズも最終回となりました。  
せっかくMyブログを作ったのだから、公開するまでしないと！ですよね ^^  
公開する場所は`Netlify`というホスティングサービスを利用したいと思います！
一緒にデプロイしようという方は、Netlifyのアカウントの作成をしておいてください。
アカウント自体は後ほどGitHub等のソース管理サービスのアカウントと連携をしますので、そちらで登録をしてください。

- [Netlify](https://www.netlify.com/) - 簡単なことであれば無料で利用することが可能です！

アカウントの登録ができたら、デプロイの準備をしましょう！  
まず、`next.config.js`と同階層に`netlify.toml`というファイルを作成し、以下のように記述してください。
```
[build]
  command = "npm run build && npm run export"
  publish = "out"
```
先ほど記述したコマンドを`package.json`ファイルに追記します！以下のように修正してください。
```json
// package.json の scripts部分
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",   //←カンマ忘れずに
    "export": "next export"  //←追記
  },
```
ここまでできたら、ソースコードをGitHubにプッシュしましょう！  
作成した GitHub のリポジトリと紐付けて、マークダウン記事のPUSH時に自動でビルドが走るようにします！  
プッシュができましたら、Netlifyの管理画面に進み`New site from Git`というボタンを押してください。

![ネトリファイ登録画面](/images/create_new.png)

`GitHub`を選択し、先ほどソースコードをプッシュしたリポジトリを選択します。
そうすると、最終的にビルド時の設定ができる画面に移動しますので、
Build command の部分を`npm run build && npm run export`に変更、
Publish directory の部分を`out`に変更して`Deploy site`ボタンを押してください！

![デプロイ設定](/images/netlify_setting.png)

すると次の画面に遷移し、ビルドが走ります！

![ビルド](/images/build.png)

ビルド時のログも見ることができます！ログを確認し、最終的に以下のように書かれていれば完了です！

![ビルドログ](/images/finish.png)

ページのトップに戻って Preview Deploy でデプロイできているか確認しましょう！

![デプロイの確認](/images/preview.png)

ブログのトップページが確認できましたら完了となります ^^v  
お疲れ様でした！

### まとめ
Next.js & TailwindCSS を使ってのブログ構築の解説は以上となります！  
いかがでしたでしょうか^^ ？  
細かく解説したい部分もいくつかあったのですが、
あまり冗長になってしまうと、かえってわかりにくくなることも懸念されましたので、
飛ばすところはサラっと飛ばしてあります。
記述内容に間違いがあったり、分かりにくいところなどございましたら、
Twitter の方に連絡いただければと思います！  
ご拝読ありがとうございました〜  
それではまたお会いしましょう！

- [Daisuke’s Twitter](https://twitter.com/daisuke_phper)