はじめに 転職してからサーバーサイドの勉強や AWS の SAA の勉強をしていて、一旦一区切り着きました。(SAA は無事合格しました。) TypeScript もかなりアップデートが入り、気づいたらバージョンは5.5でした。 ここのキャッチアップから始めようと思い、勉強用の実行環境を久しぶりに立ち上げふと思いました。 「環境だいぶ昔に作ったからパッケージのバージョン古いんじゃね？」 なので確認してみました。 かなり古かったので、勉強の前に環境をアップデートしようと思いました。 既存のパッケージのバージョンアップ 当初は既存のパッケージのバージョンアップで進めていたのですが、1 つ障壁にぶつかったのがESLintです。 バージョンが9.xから仕様が変わり.eslintrc.jsonからeslint.config.jsへ変更し、動作確認を行いました。 一見動いてそうかと思いきや見慣れない

はじめに Next.js を使用して LP を制作した際の失敗談です。 知識不足の戒めとして、記事に残しておきます。 開発環境 Next.js 13.4.19 事象 Next/Image を使用して画像を表示させ、width/heightを Figma で確認した値を直接指定して実装進めていました。 勿論、レスポンシブ対応も事前に分かっていましたが、一旦 PC サイズで実装してから、スマホサイズでの調整を行う予定でした。 ところが、width/heightを固定値にしていたためレスポンシブ対応ができない状況に陥ってしまいました。 調べたり、試行錯誤して出来上がったのが以下のコードです。(完全再現とまではいかないですがおおよそこんな感じです) import Image from 'next/image' import styles from '@/app/sample/image/style