Zenn
Open4

v0を使いたいのでNext.jsを学ぶ

Sut103Sut103

学習のモチベーション

  • 今までフロントエンドにほぼ触れてこなかったが、Vercel v0を使えば簡単にモダンなUIが作れそうだ。
  • v0はNext.jsとTailwindCSSでコード生成するようだ。
  • 大部分を作成してくれるとはいえ、デプロイや修正にはフレームワークの知識が必要だ。
  • v0を使用したUI生成を最大限活用するために自分でもNextを扱えるようになっておこう。

https://v0.dev/

Sut103Sut103

Reactの学習

  • 過去にりあクト！の第3版で基礎を学んだ気がするが、使う機会がなかったためほぼ忘れてしまった。
  • Vercel がReactの学習リソースを公開しているので、改めて学んでみる。

https://nextjs.org/learn/react-foundations

Next.jsの学習

  • Reactのガイドが途中からNext.jsのガイドになった。

https://nextjs.org/learn/react-foundations/installation

疑問点

Server Components と Client Components の違いと使い分け

Server Components ざっくり理解

  • デフォルトで使用される
  • サーバー側で実行されてレンダリングされたHTMLだけがクライアントに送信される
    • JavaScriptは含まれない
    • SEOに強い
    • 早い
  • イベントやステートを持つことができない(インタラクティブな動作ができない)
  • サーバー上のデータを扱える

Server Components ざっくり理解

  • クライアントのJavaSctiptとして動作
  • イベントやステートを扱うインタラクティブな動作ができる
  • ブラウザ上のデータを扱える
Sut103Sut103

Imageコンポーネントで登場したclassName="hidden md:block" とは？

          <Image
            src="/hero-desktop.png"
            width={1000}
            height={760}
            className="hidden md:block"
            alt="Screenshots of the dashboard project showing desktop version"
          />
  • Tailwindのレスポンシブクラス
  • mdはミディアムサイズの画面のこと
  • 基本的に小さい画面(sm)を基準にして考える
  • この場合、smサイズの時はhiddenで、md以上の時にblockになる
  • 逆にsmの時だけ表示するのは"block md:hidden"
  • blockはHTMLまたはのブロック要素に相当