Next.js でブログを作りたい
chocoタイトルの通り。ブログは既にあるがあまりメンテしてない。
Gatsby で作っていたがせっかくなので Next.js、TypeScript を使って作り直してみる。
CSS はてんでだめなので chakra-ui を使いつつ、既にあるリポジトリなどを参考にする。
chocoまずはプロジェクトのセットアップ。Next のブログテンプレートから作成する。
yarn create next-app --example blog-starter-typescript {blog-name}
ディレクトリが作成されたら早速 chakra-ui を追加する。
https://chakra-ui.com/guides/getting-started/nextjs-guide を参考。
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
# global theme を変更するので併せて追加
yarn add @chakra-ui/theme-tools
手始めに要素が少ない Footer から作ってみた。
https://panda-program.com/ の Footer が良いなと思ったので参考にした。
アイコンは react-icons の Feather を使用。
chocoNavBar を実装していく。
ポートフォリオのウェブサイトの作り方☆ Next.js, Chakra UI, Framer Motion, Three.js を参考にする。
chocoNavBar はタイトルだけ設置した。
記事一覧まで実装。2 カラムか悩んだ末、1 カラムにした。
カードのコンポーネントは https://chakra-templates.dev/components/cards の Blog Post with Image を元にタイトルと日付だけのものに改変した。
chocoコードハイライトに shiki を使いたかったがうまく動作させられなかった。
react-markdownでコードをシンタックスハイライトさせる | Goodlife.tech を参考に react-markdown と react-syntax-highlighter を使ってハイライトを適用した。
choco試しに Vercel を使ってデプロイしてみたらエラーが出ていてデプロイに失敗した。
Next と react-syntax-highlighter とで @types/react が異なっていることが原因そう。
'Component' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("node_modules/@types/react-syntax-highlighter/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
@types/react、@types/react-dom のバージョンを上げることで解消した。また React のバージョンも上げてしまって問題ないと思ったので併せて latest にした。
choco試しに Vercel へデプロイした。（確認用なので不要になったら消す）
対応できていない箇所がいくつかあるが大方動くようになった。