Zenn
Open1

Next.jsに入門する

Next.js
React
初心者
citron633citron633

Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた でReactとその周辺技術に入門する。

  • Tailwind CSS
    • cssファイルを用意せずclass要素に記載をすることでcssを適用できるもの
      シンプル目のアプリケーションだとよさそうな予感
  • JSX(JavaScript XML)
    • HTMLのような構文でJavaScriptを記述できるもの
        const heading = <h1>Hello</h1>;
  • .tsx
    • .tsと違いJSXを含む
  • next/image
    • 画像よりブラウザの表示幅が小さいときに元の大きさで画像を送るとブラウザ側で画像を縮小して表示するためパフォーマンスが低下する
    • img タグではなく next/image を使うとブラウザ幅に適したサイズの画像を自動で生成して最適化できる。
      サーバー側で必要なサイズに圧縮してからブラウザに送信するので表示速度が改善される。
    • 参考資料