T#

個人ブログリニューアル後の初記事

December 30, 2022

これまでの個人ブログからリニューアルしました。hugo+firebase hostingだったものを、next.js+vercelに変更。今後はThree.jsの機能を入れていきたい。

個人ブログリニューアル後の初記事

あまり深い理由はないんですが、以下のような理由で個人サイトリニューアルしたくなった。

  • 今年は社外の人と話す機会が増えて、比例して自己紹介の機会が増えた
  • Three.js の試し斬りをする場所が欲しい
  • SNS の id を変えた
  • hugo で管理していたけど、デザインを改修したくなったが React で書けない
three.js
three.js

next-mdx-remoteを使って実装したが、2 点ハマった。

  • img のカスタムコンポーネント実装時に、デフォルトでは markdown 上の画像が p で囲まれてしまうため、next.js で hydration error が発生。 plugin を書いたよという人がいたため、調べると image を unrwap するプラグインがあったので以下のように採用。
    const content = await serialize(post.content, { // next-mdx-remoteを使用
    mdxOptions: {
    remarkPlugins: [remarkUnwrapImages],
    ...,
    },
    });
  • code block のカスタムコンポーネント実装時に、pre内ではデフォルトでcodeが使われるため、実装上 inline code との区別がつかず、スタイリングができなかった。 prism-react-rendererを使って分解しcodeを使わないように実装した。

おわりに

今後、コツコツブログ書きながらカスタムコンポーネントちょっとずつ拡充していく。 その他のやりたいこと ↓

参考

© 2023 Takashi Toyofuku All rights reserved.