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

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

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

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

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を使わないように実装した。

おわりに

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

参考

• Markdown Image gets wrapped inside Paragraph #208
• Create a blog post using Next.js, MDX and Prism