今年2月に書いた記事の続きです。重い腰がようやく上がりました

今回の完成品

変更点

ChakraUIをやめる

ChakraUIをやめました。自分でCSSを書いた方が楽だったためです。やはりプロフィールページにUIライブラリはオーバースペックです。バージョンの追従も面倒なのでやめました。vanilla-extractにしました。TypeScriptの恩恵を受けながらCSSかけるのもありがたいです。

vanilla-extract.style

ブレイクポイント作ってみる

スマートフォン

VSCode

// ブレイクポイント定義
export const breakpoints = {
  mobile: "screen and (max-width: 767px)",
  tablet: "screen and (min-width: 768px) and (max-width: 1023px)",
  desktop: "screen and (min-width: 768px)",
  largeDesktop: "screen and (min-width: 1024px)",
} as const;

これでPC表示では横並び、スマートフォン表示では縦並びができました。やったー。

   "@media": {
        [breakpoints.desktop]: {
            flexDirection: "row",
        },
    },

学び

変更を加え、Vercelに反映しようとしたら yarn run build で失敗していた。

imgタグよりImageコンポーネント

7:5  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

Imageコンポーネントの方が最適化されているらしい。ホスティング環境は確認しておくと良いらしい。

nextjs.org

余談だが、昔Cloudflare Pagesでnext/imageを使おうとしたら上手くいかなかったことがある。Cloudflare Imagesを使えば良いのかな

developers.cloudflare.com

CSSの置き場所

ビルドコマンド実行時に下記がターミナルに出力された。

> Build optimization failed: found page without a React Component as default export in 
pages/profile/profile.css

See https://nextjs.org/docs/messages/page-without-valid-component for more info.

pagesディレクトリの中では export default を使うらしい。もしくは追加で設定が必要。

nextjs.org

今後

やりたいことはまだある。

i18n対応
リンクをカードにしたいかも
簡単な職務経歴とか外部登壇も追加したいな(Speakerdeckのリンク追加でもよいか...)

時間を見つけて更新します。

カピバラ生活

仕事や日常で感じたことをつらつらと書いていくよ

プロフィールページを直している (2025年7月)

今回の完成品

変更点

ChakraUIをやめる

ブレイクポイント作ってみる

学び

imgタグよりImageコンポーネント

CSSの置き場所

今後