デモ・ドキュメントをリニューアル（Next.js）

[qrac]

227 #246 で作ったものが重たく辛かったので、シンプルで高速なものを作りたく他で検討。

• Next.js
  • MDXが完全に対応している
  • Next.js | MDX
  • next.js/examples/with-mdx at master · zeit/next.js
  • 設定が少なくてリポジトリが散らからないかも
  • 起動・ビルド・初回アクセスのどれもが早い
  • いつの間にかSSR以外の静的ビルドができるようになっていた
  • Next.js + microCMS + NetlifyでJAMstackな世界に入門する - Qiita
  • いつの間にか自動ルーティングが実装されていた
  • ルーティングからのメニュー（node）は自作の必要あり
  • メニューが少なく手動で順番を設定したかったので直書きする
  • Styled JSXがデフォルトで実装されている（呼ばなくて良い）
  • SCSSとStyled JSXを同居させるのは厳しい
• Gatsby
  • MDXは使えそうな気配
  • gatsby-plugin-mdx | GatsbyJS
  • 静的ビルド・自動ルーティング・メニュー（node）など一通り実現可能
  • 使い慣れているのでNext.jsに難があった場合に検討
• Gridsome
  • MDX風のことができるが準拠しているものではない
  • @gridsome/vue-remark - Gridsome
  • MDXではないのでMarkdownの一部をコンポーネントに差し替えられないと思う
  • preをコピー機能つきのpreに差し替えるなどはしたいため
• VuePress
  • MDX風のことができるが準拠しているものではない
  • オーバーライドなど諸々カスタマイズ周りが辛い
  • Stylus押しでSCSSをデフォルトにはできない
  • 一応SCSSをデフォルトで使えるテーマを作ってみたものの...（qrac/vuepress-theme-musubii）
  • MDXではないのでMarkdownの一部をコンポーネントに差し替えられないと思う
• Nuxt
  • MDX風のことができるが準拠しているものではない
  • NuxtPress
  • まだどれほど使えるのか未知数

※VueでMDXを使う方法も出てきているが、まだ安定していない様子。

• Vue | MDX

ちなみにMDX内にはJS/JSXが書けるがStateが必要なReactコンポーネントはかけなかった。動くかもしれないがシンタックスハイライト・Prettierは効かない。Reactコンポーネントは別ファイルにして読み込む使い方が良さそう。

結局、Next（またはGatsby）でもGridsomeでも作れそうだったけど、Markdownの一部をコンポーネントに差し替えられる手法が確立しているMDXが使えるNextを選んだ。

[qrac]

Next.jsをブランチ分けて作ってが安定したらmasterにマージする。

• https://github.com/qrac/musubii/tree/next

[qrac]

Netlifyへの静的ビルドテスト成功。全ページへのダイレクトアクセス・コンポーネントの挙動もOK。初回アクセスも遷移も早い。

[qrac]

Gatsbyのドキュメント見返したら同じの作れそうだったけど、設定し直すの面倒だし、ブログ機能つける機運がない限りはNextのままで良い。立ち上がるの早いし。