Open4
Next.js + Typescript + Chakra-UI + MDX でブログを作る
komenzar個人的なブログを作ることになった
技術
| Name | メモ | |
|---|---|---|
| Language | typescript |
|
| Framework | next.js |
将来的に solidjs にしてみたい |
| UI library | Chakra-UI | |
| コンテンツ管理 | MDX ファイル | 画像の最適化を楽にできる |
| Formatter & linter |
|
最近 solidjs が面白そうだったので使うことを検討したけれど、SSGする next.js と比べてどれくらいパフォーマンスが変わるのかわからなかった。サクッと実装できる next.js で始めることにする。
newt など CMS を使おうかとも思ったが、 next.js ならではの画像最適化が簡単にできるので直接 MDX ファイルで書くことにした。
Advanced Features: Using MDX | Next.js
Linter に xo を使おうとしたけれど、どうもうまく動作しなかったので Prettier + ESLint にする。
komenzarまず next.js + typescript のテンプレート
next.js 公式サイトにのっているテンプレートを使う。
yarn create next-app --typescript <リポジトリ名>
Prettier + ESLint セットアップ
Vercelの公式を参考に進める。といってもyarn lintを実行するとセットアップしてくれる。
Prettier 対応
yarn add --dev eslint-config-prettier
Chakra-UI を導入
Getting Started with Nextjs - Chakra UIを参考に
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6