Zenn
🌷

Next.jsを使った個人ブログ作成のまとめ

2023/01/05に公開
Next.js
React
初心者
Tailwind CSS
#
ブログ
tech

はじめに

新卒エンジニアのyajium(@yajium_)といいます。

今は社会人1年目で、プログラミングも今年の4月から始めました。業務ではC#を使っているので、今回のNext.jsやReactは本当に全く知らないところから勉強しました。

React+Next.js+Tailwind CSSを使った個人ブログ作成をしたので、同じく全く知らないところから始めるよ～みたいな人の参考になればうれしいです！

筆者はNext.jsのチュートリアルをやってからブログ作成を始めたので、段階としてはまずチュートリアルから始めるのがおすすめです。

↓Github
https://github.com/yajium/yajium-blog

環境構築

blog-starterのセットアップ

私のブログではNext.jsのチュートリアルと同じ普通のcreate next-appでやってしまったのですが、こっちのblog-starterのほうが良さそうでした。
今回はこのblog-starterで話を進めます。

https://github.com/vercel/next.js/tree/canary/examples/blog-starter

  1. yarnのインストール
    そのままnpmで進めてもよいのですが、yarnのほうが速度的にも早いらしいので(npmの上位互換)yarnを使います
    ※nodeはインストールされている前提です。yarnがすでにある場合はスキップしてください。
cmd
npm install --global yarn
  1. blog-starterのリポジトリを作成
cmd
// 自分がリポジトリを作りたい場所に移動した後
yarn create next-app --example blog-starter 好きなプロジェクト名
  1. 2で作った[好きなプロジェクト名]ディレクトリに移動してyarn devを実行
cmd
cd 好きなプロジェクト名
yarn dev
  1. http://localhost:3000/ にアクセスして下のページが表示出来たらOK
    blog-starterのホーム

あるといい設定

🌟Prettierのインストール
Prettierとはコードフォーマッターのことで、設定したコーディングスタイルに沿ったソースコードにすることができるものです。

  1. VSCodeの拡張機能をインストールすることでリアルタイムでPrettierを実行できます。
    以下の拡張機能をVSCodeでインストールします。
    https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

  2. 上の環境構築で作ったプロジェクトをVSCodeで開いて、そのプロジェクトディレクトリ直下に.vscodeディレクトリとsetting.jsonという設定ファイルを作成します

  3. setting.json内で以下のコードを追加します。

setting.json
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

  1. Format On Saveを有効にする
    VS Codeの設定を開き、検索欄にonsaveと入力する。そして、Format On Saveにチェックを入れる。

  2. Default FormatterをPrettierに設定する
    4と同じ設定画面の検索欄にformatと入力し、Default Formatterという項目でPrettierを選択して、右上のボタンで設定の同期をオンにする。

  3. これで保存したときにフォーマットされるようになりました！

🌟ESLintのインストール
※今回は個人ブログの作成であり必須ではないので飛ばしてOK
ESLintとはリンターと言われるもので、プログラムを静的に解析し、バグや問題点を発見するツールのことです。例えば、ソースコードにconsole.logがある状態でESlintを実行すると、「console.logが残ってますよ！修正してください。」みたいなエラーを出すことが出来ます。チーム開発で書き方を統一したい時などの手助けになります。

↓詳しく知りたい人
https://typescriptbook.jp/tutorials/eslint

Prittierと同様にVSCodeの拡張機能を利用できます。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

setting.json内に以下のコードを追記します。

setting.json
{
	"editor.codeActionsOnSave": {
	  "source.fixAll": true
	},
	"eslint.alwaysShowStatus": true,
}

Tailwind CSSのインストール

めちゃ簡単です。
TailwindCSSとはCSSのフレームワークのことで、CSSフレームワークといえばBootStrapが有名かもしれません。
基本的なTailwindCssの使い方は、例えばfont-sizeのcssを書きたいときにclassName="text-xl"のように記述することでcssを簡単に適用できます。
https://tailwindcss.com/docs/font-size

  1. 今回作ったリポジトリに移動した状態で、以下のコマンドを実行
cmd
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p
  1. tailwind.config.js内のcontent配列にTailwindCSSを適用する予定のディレクトリやファイルパスを指定する
tailwind.config.js
module.exports = {
  content: [
+   "./pages/**/*.{js,ts,jsx,tsx}",
+   "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  ...
}

デフォでpagesやcomponentsは追加されていたので、これらが既にある場合はこの項目は不要です。

  1. index.css(globals.css)にTailwindCSSのインポートを追加する
    このblog-starterではglobals.cssではなくてindex.cssになっているため、これに下記のインポートを追加します。(既にある場合は不要)
index.css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

globals.cssやindex.cssが何かというと、どのページにも適用されるcssのことです。例えば、このファイル内でpタグに対するcssを書いたとすると、このcssファイルが_app.tsxでインポートされているのでどのページのpタグにもそのCSSが適用されます。

  1. 実際に使ってみる
    下記のような形で記述すれば使えるようになっています。
index.tsx
<h1 className="text-3xl font-bold underline">
  Hello world!
</h1>

🌟番外編
使いまわしが多くなるもの(liタグとか)に対するクラスを毎度<li className="text-3xl font-bold underline"></li>などで書いていたら大変なので、普通のcssを書くみたいにTailwind CSSを使う方法があります。

下記のようにして@applyを使うことでTailwind CSSの書き方ができます。

xxx.tsx
import styles from "../styles/yyy.module.css";

<div className={styles["profile-detail"]}>・・・</div>
yyy.module.css
.profile-detail {
  @apply mx-10 my-16 grid grid-cols-1 gap-14 text-left;
}

.profile-detail h2 {
  @apply border-b border-b-gray-300 pb-3 text-center text-lg font-semibold;
}

VS Code上だと@applyでエラーになる可能性があります。その時はPostCSS Language Supportという拡張機能で解決できるので導入してみてください。

フォント設定

Tailwind CSSで好きなフォントを使えるようにします。

  1. Google Fontsなどで好きなフォントの@importとfont-familyをコピーする

https://fonts.google.com/

  1. index.css(またはgobals.css)に@importを追加する

  2. tailwind.config.jsにfont-familyを追加する

tailwind.config.js
theme: {
    extend: {
+     fontFamily: {
+       fancy: ["Kiwi Maru"],
+     },
    },
  },

fancy部分は好きな名前でOK。[]の中にfont-familyの名前を入力する。

  1. 実際に使う
    下記のように、font-3で設定した名前のような形で使う
<div className="font-fancy">
   <main>{children}</main>
</div>

☃小技集☃

ここまでくると開発は基本出来るようになったので、個人ブログ作成で使ったライブラリや躓いたところなどを載せます。

マークダウンをZenn風にする

ブログ記事をマークダウン形式にするときなど、そのままで出力したり独自にcss作るとかなり手間だと思うので、私は今回Zennのライブラリを使ってZenn風になるようにしました。
https://zenn.dev/team_zenn/articles/intro-zenn-markdown
すごく簡単に適用できたのでとてもおすすめです！

アイコンの設定

下記画像のようなアイコンを出したいときに便利なのがReact Iconsです。

https://zenn.dev/taichifukumoto/articles/how-to-use-react-icons
ここにまとまっているので良かったら見てみてください。

SNSのシェアボタン

例えば投稿ページをSNSでシェアする用のTwitterボタンとかのことです(↓の画像みたいなもの)。これもreact-shareという便利なライブラリがあります。
Readmeに使い方は書いてあります。

https://github.com/nygardk/react-share

OG画像の自動生成

↑のSNSシェアボタンなどを作るとOGPの設定も絶対あったほうがいいので紹介します。
私は@vercel/ogを使いました。下記を参考にすれば大体できると思います。
https://zenn.dev/hiromu617/articles/c03fef6f4d6c6e

しかし、私はこのOG画像の設定で沢山沼ったので注意点としてここに残しておきます。

  • 日本語フォントを適用する

投稿のタイトルを使って動的にOG画像を変えたいときなど、そのタイトルが日本語の場合、初めのデプロイをする前に日本語フォントを入れといた方がいいです。
なぜデプロイする前かというと、日本語や全角記号があるとvercel/og側がうまく対応できず、真っ白な状態の画像が生成されてしまい、その状態でデプロイするとTwitter側にキャッシュが残って修正した後のコードをあげてもキャッシュされた真っ白画像が１年間で続けてしまうからです。
キャッシュを短くすることもできるみたいなのですが、そこまで出来ませんでしたので、有識者いたらぜひコメントで教えていただきたいです。

mdファイル内の画像

mdファイル内で画像を挿入するときにその画像があるパスが必要になるのですが、localhostやデプロイした後、その画像を拾ってこれず、Not Foundになってしまいました。

どうやらマークダウンをHTMLにした後に、Reactコンポーネントの<Image>に変換する必要があるみたいです。
下記手順に従えば良さそうなのですが、zenn-markdownと合わせたりすると訳が分からなくなったので私はGoogle Driveから読み込むことにしました。
https://blog.ryou103.com/post/next-js-markdown-image/

ただ、今のままだと画像表示がかなり遅いので↑のやり方にしたり、何かしら変えたいなという気持ちがあります。
他にいい方法知ってたらコメントで教えていただけると喜びます😃

最後に

以上、Next.jsを使って個人ブログを作成したときにやったことをまとめました。
参考にして頂けると嬉しいです！

参考記事
https://zenn.dev/var/articles/616b6c6ae78c02
https://tailwindcss.com/docs/guides/nextjs

Discussion