• JSとJSXの違いとコンパイル
  • Reactのコンセプト。コンポーネント、プロップス、ステート
  • コンポーネントと再利用性、ネスト
  • PropsやStateはReactの公式チュートリアルをやっていたらわかるかも
  • nextjsでReactを動かす
  • ネットワーク境界
  • サーバーで処理するか、クライアントで処理するか
    • サーバーコンポーネントとクライアントコンポーネント

どうでもいいこと

  • 〇〇ランドは丸々王国って訳したほうがいいのでは?

2024年2月16日 はゆっくりNext触っていいこー

目標は4章!

  • インストール

  • 最初からTypescript使うのがいいチュートリアル

  • 4章までおわった

  • Tailwindとかのちょっとした知識が要求されるけど比較的わかりやすいかも。

12章

  • サーバーアクション

    • サーバーアクションはAPIを作る必要がない

    • 逆に言うと今までAPIを作ってやってたことをショートカットする機能がサーバーアクションなのかもしれない

    知っておくべきこと: HTML では、URL を属性に渡しますaction。この URL は、フォーム データの送信先 (通常は API エンドポイント) になります。

    ただし、React では、このaction属性は特別な prop とみなされます。つまり、React はその上に構築され、アクションを呼び出すことができるようになります。

    サーバー アクションは舞台裏でPOSTAPI エンドポイントを作成します。これが、サーバー アクションを使用するときに API エンドポイントを手動で作成する必要がない理由です。

    • セキュリティ的にもいいらしい
    • キャッシュのこととか色々わからないことはある
  • 型の検証用ライブラリ Zod

  • Schemaっていう単語よく聞くけど、あれだよね変数名と型の定義(宣言)のことだよね

  • SQLの使い方わからない

  • 再検証とリダイレクトわからない

  • 動的ルートセグメント

  • NextのLinkコンポーネント

  • これあとで調べる。

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;
  // ...
}
  • UUID と自動インクリメントキー

**注:**フォーム内で非表示の入力フィールドを使用することもできます (例<input type="hidden" name="id" value={invoice.id} />)。ただし、値は HTML ソースにフルテキストとして表示されるため、ID などの機密データには理想的ではありません。

これなに

  • revalidatePathとredirect

2024年3月22日