Next.jsで技術ブログを作成

2021-09-08 (Wed)

Next.js+TypeScriptで技術ブログを作成した話

はじめに
技術スタック
- Next.js
- TailwindCSS
- MDX
こだわりポイント
まとめ

はじめに

記念すべき初記事 🎉

最近Next.jsを勉強しており、ようやくある程度イメージしたものを実装できるようになってきました。
今後のアウトプット先の確保の意味も込めて、Next.jsを使ってフルスクラッチでブログを作成してみました。
ZennやQiitaはかなり~~パクらせて~~参考にさせていただきました。

まだまだ実装できていないものも多いですが、とりあえず形になってきたので初記事を投稿します。
足りてない部分については今後実装しながら、その様子も記事として紹介してみようと思います。

技術スタック

今回は以下の技術スタックでブログを作成しました。

Next.js (+TypeScript)
TailwindCSS
MDX

Next.js

実は、以前からHUGOを使った技術ブログを持っていました。
作成当時はフロントエンドの知識が乏しく、他の方が作成したテンプレートをちょこっとだけいじって使っていました。
HUGOのテンプレートをいじる場合、直接HTMLやCSSをいじる必要があり、メンテナンス性が高くないことが課題でした。

また、Next.jsの最大の魅力であるパフォーマンスも理由の一つです。
以前、知人から頼まれてNext.jsでブログを作ってみたのですが、Lighthouseのスコアがほぼカンストしたことに衝撃を覚えました。
せっかくならサクサク遷移するブログを自分用にも作ろうと思ったのです。

TailwindCSS

スタイリングにはTailwindCSSを使いました。
TailwindCSSはUtility Classと呼ばれる、CSSプロパティにそれぞれ対応したClass属性を付与していくことでスタイリングが行えます。
ページやコンポーネントを実装しながら、スタイリングできるため、効率的に開発を進めることができます。
また、Utility ClassはCSSプロパティと対応しているものが多いため、ある程度慣れるとドキュメントを見なくてもUtility Classを選択できるようになるのもお気に入りポイントです。

MDX

MDXはMarkdownの中でReactコンポーネントを使えるというものです。
せっかくReactのフレームワークであるNext.jsを使っているので、MDXを採用して記事の中でも必要に応じてコンポーネントを埋め込めるようにしました。

例えば、記事の中で以下のような記述を行うと、

JSX

<div className="rounded-lg border-2 border-blue-200 text-center text-2xl">こんな感じで装飾できる</div>

以下のように表示されます。

こんな感じで装飾できる

今後、よく使うコンポーネントがあれば、別ファイルで作成しておけば、importして使うこともできます。

こだわりポイント

最後に、今回のブログを作成するにあたりこだわったポイントを紹介します。
今回、最もこだわったのはコードブロックです。
プログラミングに関するブログということで、ソースコードを記載することも多いと想定されます。
なるべく見やすく、使いやすくなるように実装しました。

まずはコードのシンタックスハイライトです。
以下のように言語を指定することで、その言語に応じて色をつけてくれます。

```javascript
const hello = "Hello World!";

console.log(hello);
```

JavaScript

const hello = 'Hello World!';

console.log(hello);

シンタックスハイライトにはprism-react-rendererを使いました。
これは、シンタックスハイライトを実現するPrism.jsのReact用コンポーネントです。

また、ZennやQiitaなどと同様に、ファイル名を記載すると、それも表示してくれます。

```python:hello.py
hello = "Hello World!"

print(hello)
```

hello.py

hello = "Hello World!"

print(hello)

少しこだわって、ファイル名の横に言語のアイコンも表示されるようにしてみました。
また、このアイコンはタグの部分にも表示されるようにしてみました。
この部分はZennを見ていて「いいなぁ」と思った部分です。
せっかくなので、コードブロック部分にもアイコンを表示するようにしてみた、という感じです。

さらに、右上のCopyボタンを押すと、このコードブロックのコードをコピーできます。
たまにこのようなコピーボタンがついているサイトがありますが、個人的にはこれがあると助かると感じていたので、今回実装してみました。

まとめ

Next.jsを使って技術ブログを作成してみました。
まだまだ実装できていない部分も多いですが、今後どんどん改善していきたいと思います。

現状のTODO

未実装ページの実装 (Works, About)
RSSやサイトマップの実装
モバイルのデザイン強化

HACKING FRONTLINE