reona.dev

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 に送信しました。

nextjs-sitemap-generator

画像圧縮

imagemin

パフォーマンスを落としたくなかったので、画像圧縮の仕組みを作りました。 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 のライブラリは他にも色んなコンポーネントを提供してくれているみたいです。

自動デプロイ

Next.js チュートリアル

上記のチュートリアルでもデプロイ手順が書いてあるので参考にしました。独自ドメインでも設定は簡単でした。 基本的に、now(もしくは vercel)コマンドでデプロイできますが、GitHub リポジトリと紐づければ master ブランチへの Push 時にデプロイしてくれて便利です。