Next.js + MDX + TypeScript でブログを作った
Next.js と MDX 、 TypeScript で
使っている技術
-
React 製の
フレームワーク。GatsbyJS と 比較して コントローラブルな点で 優位なので 採用した。 一方、 単に ブログサイトを 作る 点では Gatsby の 方が 便利な プラグインは 多い。 Next は v9.5 で 動的コンテンツを 静的ページで 生成できる Incremental Static Regeneration と いう 機能の 安定板を リリースしている。 この 機能の デモはこちら。 ツイートを iframe を 使わない 静的な コンテンツと して 生成する ことで ページの 表示速度を 向上させている。 -
マークダウンに
JSX を 埋め込める。 他にも
.mdx ファイル内に 1export const metadata = {...}と
書く 以下のように import で 利用できる。 default export されている MDXDocumentはマークダウンコンテンツ そのもので JSX と して 埋め込める。 1import React from "react"; 2import MDXDocument, { metadata } from "posts/post.mdx"; 3export default () => ( 4 <> 5 <MDXDocument /> 6 <footer> 7 <p> 8 By: {metadata.authors.map((author) => author.name).join(", ") + "."} 9 </p> 10 </footer> 11 </> 12); -
JavaScript に
静的型づけ機能を 加えた プログラミング言語。 構造的部分型に よる 柔軟な 型づけが 可能。 型推論に 基づく インテリセンスが 助かる。 ソフトウェアドキュメンテーション的にも 導入しない手は ない。 -
本ブログを
デプロイする ときに 使っている ホスティングサービス。 GitHub と 連携して ぽちぽちクリックしているだけで デプロイできた。 -
CSS の
名前衝突を 回避できる。 Next.js が 正式サポートしているので 特に 設定は 不要。 最初は Styled-Components を 使おうと 考えたが CSS-in-JS だと SSR に なって SSG の 強みがなくなってしまう ため、 こちらを 採用した。 フィジカルな 利点と して、 スタイリングが 分離できるので 1 つの ファイルの 行数が 削減できて スクロールする 回数が 減らせる。 これまでは Styled-Components を 使っていた ときは 行数が 増えると 同じ ファイルを ウィンドウ分割で 開いて 見ていた。
追記 (2021/1/28)
"CSS-in-JS だと
解決策と
参考
Next.js が
Next.js × TSX に
-
UI コンポーネントを
カタログ化できる。 コンポーネント単体の 見た目を 確認したくて 導入したが、 今の ところ dev モードで 十分だし、 データの 準備など 手間も 多いので あんまり 使っていない。 その分記事を 書こう。 勇み足。 -
syntax highlighter。
参考にさせてもらったサイトや記事
機能面
-
Next.js + MDX + tailwindcss で
構築されている。 ファイルストラクチャや .mdx ファイルから メタ情報を 取得する ときの 方法などを 参考に した。 本ブログは tailwindcss を 使わないうえで TS 化したような ものになっている。
デザイン面
カードコンポーネントや
-
GatsbyJS + TS の
ブログ。 サイト上の 文言や 画像が ぐわっとなる ところなどを 参考に した。 この 記事とは 関係ないが、ESLint の Plugin と Extend の 違い は めちゃく ちゃ 読んだ。
その他
-
Next.js + MDX + AMP + TS の
ブログ。 表示が めちゃく ちゃ 速いことに 感動して Next.js で ブログを 作る きっかけと なった。 Next だけでも まあ速いので 本ブログの AMP 化は ひとまず 見送る。
さいごに（雑感）
スプラトゥーン 2 を