Next.js+TailwindCSS製Blog構築 vol.1

2021年4月16日2021年5月19日

｜対象となる方

　HTML、CSS、JavaScriptをチュートリアルレベルで書いたことのある方であればなんとなくで理解できると思います。
　Reactを多少書いたことのある方であれば理解は進むと思います。

｜開発動機

　React の基礎的な学習を終えたのもあって、何か自分でも作ってみたいな〜と思い、色々考える中、「Blogを作って見るのはどうだろう？」と自分の中で思ったので、作っていく過程を記録したいと思います。

　作ってみたいとは言ったものの、あまり多くの時間をかけたくないという気持ちもありましたので、サクッとできる方法を思案し、Next.js を使っての開発をすることにしました。また、バックエンドが主戦場の私としては、できる限りCSSを書かなくてもいいようにしたいというのもあって、CSSフレームワークの TailwindCSS を使って構築することに致しました。皆様の参考になりますと幸いです。

　技術スタック
 　・ Next.js v10.0.7
 　・ React v17.0.1
 　・ TailwindCSS v2.0.3
 　・ 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のインストールから行なっていきたいと思います。
とその前に、Next.js アプリを作成するためには Node.jsをインストールしておく必要があります。公式ドキュメントによりますと、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画面を拝んでおきましょう！ ↙︎[project-name]はご自身で作成したアプリ名です！[]は不要です！

 cd [project-name]  // アプリのディレクトリに移動して
 npm run dev        // または yarn dev でもいいです

すると、コンパイルが始まって、しばらく経つとcompiled successfullyという文字が表示されると思いますので、ブラウザから http://localhost:3000 にアクセスすると以下のようなTOPページが確認できるかと思います！

次にTailwindCSSのセットアップに移りましょう！
ターミナルにて以下のコマンドを入力　(※以下のコマンドは作成したプロジェクトのディレクトリ内で入力してください)

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

次にコンフィグファイルを作成していきます。
以下のコマンドを入力するとtailwind.config.jsとpostcss.config.jsが自動的に生成されます。

npx tailwindcss init -p

生成されたtailwind.config.jsファイルを編集していきましょう。生成時はpurgeの値が空っぽになっているかと思いますので、以下のように追記します。

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を開き、中身を全て消去し、以下の３行に書き換えてください。

@tailwind base;
@tailwind components;
@tailwind utilities;

以上で TailwindCSS の設定は完了です！ちなみに、このCSSファイルはpages/_app.jsの中でインポートしています。もし、他のCSSファイルを作成した時は、適宜読み込みを行なってください！
ということで、一応確認のためと Next.js の動きの確認のためにHello World!!を表示させてみましょう！
pages/index.jsファイルを開いてください。以下のようになっているかと思います。

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>を全て消去し、以下のように書き換えてください。以下が書き換え後のソースコードです。

export default function Home() {
  return (
    <div className="text-red-400">
      Hello World!
    </div>
  )
}

変更後、ターミナルでnpm run devを実行してください。※コマンドを実行する場所はアプリのあるディレクトリ内でです。
（先程実行したままで、止めていない場合はこのコマンドを実行する必要はないです！）
実行後にhttp://localhost:3000にアクセスすると…

React で class を付与させるには class=”hoge” と書くのではなく、className="hoge"と書く必要があります。
今回の divタグ内のtext-red-400は TailwindCSS のクラスで、文字色を赤の400にするというものです。色見本については TailwindCSS公式ドキュメントで確認してみてください！また、他のどのようなクラスがあるのかも見てみてください〜

続いて、簡単にルーティングについても確認しておきたいと思います。
npm run dev は止めずに、そのままで進めていきましょう！止めた方は、再度実行しておいてください！
それでは、まず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 とは違うアロー関数の形で記述しエクスポートする様な書き方をしています。以後はこの様な書き方も織りまぜながら進めて行きたいと思います！
今回は以上です！