Blog を MDX, Next.js で作成した
なぜ MDX と Next.js で作成したか
2 か月前に GitHub Pages × Hugo でブログを始めました。始めた経緯などは次の記事に書いてあります。 GitHub Pages × Hugo で技術ブログを始めた
- GitHub Pages を使うことでデプロイを自動化
- ブログ記事は使い慣れている Vim で Markdown で書くことができる。
- ページパフォーマンスも高い
などのメリットがあり、割と気にいっていた反面、
- 選択したテーマはブログ主体のものではなかった
- もう少しカスタマイズしたい
- 業務で触れる機会がないフロントエンドの技術を触りたい
など、気になる点もいくつかありました。 Vue や React は去年それぞれ 1 か月ほど触った経験があったので、TypeScript と相性が良いと言われている React を選択しました。 （普段 Ruby を使っていることもあり、型のある TypeScript が触りたかった）
また、Hugo からの移行ということもあって、まずは SSG の Gatsby も触ってみたのですが、
- プロジェクト生成後のディレクトリ構成が割と煩雑
- GraphQL が難しそう（これは食わず嫌い）
上記の理由から、よりシンプルな Next.js を選択しました。 リポジトリはこちらです。 reona5/dev
github.io も気に入ってはいましたが、良い機会なので reona.dev のカスタムドメインを取得しました。
MDX
MDX は Markdown に JSX を挿入できるフォーマットです。Markdown ファイルは .md 、MDX ファイルは .mdx です。オープンソースのライブラリとなっています。
mdx-js/mdx JSX in Markdown for ambitious projects
JSX を挿入できるので、Markdown で書くブログ記事に React のコンポーネントを組み込むことができます。
import Layout from
- lib/components/layout;
import { Link } from
- @zeit-ui/react;
export const meta = {
title:
- ブログタイトル,
date:
- 2020-06-01T00:00:00.000Z,
description:
- ,
image:
- ,
};
<Link href=
- https://twitter.com icon color target=
- _blank>
Twitter
</Link>
export default ({ children }) => <Layout meta={meta}>{children}</Layout
>このように使いたいコンポーネントを import します。 React のコードを書くような感覚でブログ記事を書けるのがとても良いですね。
SEO 対策
以前のブログで SEO 周りの設定は一通り行ないましたが、URL も変わったので再度 Search Console に登録しました。
Sitemap
Next.js 用の nextjs-sitemap-generator を用いて生成し、Search Console に送信しました。
画像圧縮
パフォーマンスを落としたくなかったので、画像圧縮の仕組みを作りました。 scripts/imagemin.jsにスクリプトを書いて、ビルド・デプロイ時に実行するようにします。
- scripts: {
- start:
- npm run collect && next dev && yarn imagemin,
- dev:
- npm run collect && next dev && yarn imagemin,
- now-build:
- npm run collect && next build && yarn imagemin,
- imagemin:
- node scripts/imagemin.js
}
Twitter/Youtube の埋め込み
react-twitter-embed react-youtube
上記のライブラリは記事中に Tweet や Youtube のリッチなコンポーネントを提供してくれます。
import YouTube from
- react-youtube;
import { TwitterTweetEmbed } from
- react-twitter-embed;
<TwitterTweetEmbed tweetId={
- 1266741023612387334} />
<YouTube videoId=
- at-XZggSRho />Twitter のライブラリは他にも色んなコンポーネントを提供してくれているみたいです。
自動デプロイ
上記のチュートリアルでもデプロイ手順が書いてあるので参考にしました。独自ドメインでも設定は簡単でした。
基本的に、now（もしくは vercel）コマンドでデプロイできますが、GitHub リポジトリと紐づければ master ブランチへの Push 時にデプロイしてくれて便利です。