reona.dev

Blog を MDX, Next.js で作成した

mdx

Next.js

Blog

なぜ MDX と Next.js で作成したか

2 ヶ月前に GitHub Pages × Hugo でブログを始めました。始めた経緯などは以下の記事に書いてあります。 GitHub Pages × Hugo で技術ブログを始めた

等のメリットがあり、割と気にいっていた反面、

など、気になる点もいくつかありました。 Vue や React は去年それぞれ 1 ヶ月ほど触った経験があったので、TypeScript と相性が良いと言われている React を選択しました。 （普段 Ruby を使っていることもあり、型のある TypeScript が触りたかった）

また、Hugo からの移行ということもあって、まずは SSG の Gatsby も触ってみたのですが、

上記の理由から、よりシンプルな 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 時にデプロイしてくれて便利です。