Agile育成ブログ
未来を変える喜びを
未分類

Next.js 13とSupabaseでAI画像生成アプリ構築


Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

uuidとは世界中で重複しないIDのこと。
idが1,2,3と連番にならず複雑な文字列を作れる

uuid_generate_v4()この関数はバージョン4 UUIDを生成します。

作成済みのテーブルに制約を加えます。ALTER TABLE コマンドを使用します。

サインアップすると同時にプロフィールテーブルが作成されるようにする。

Next.js 13において、コンポーネントはサーバー側でレンダリングされるサーバーコンポーネントがデファクトになりました。

クライアント側でインタラクティブな処理を行いたい場合は Client Component としてコンポーネントを設定する必要があります。

Sever Component と Client Componentの使い分け
  • Fetch data については Server Component だけではなく Client Component でも行うことができますが特別な理由がなければ Server Component での利用を推奨すると記載されています。
  • アクセストークンや API キーなど外部に漏れてはいけない情報を利用する場合には Server Component で処理を行うことになります。
  • click イベントや useState, useEffect, ブラウザが持つ API を利用する場合は Server Component では利用できないので Client Component を利用することになります。

React.jsでDOMにCSSクラスを指定する場合には、classNameプロパティを使います。

{/*CSSクラスを指定する例*/}
<div className={'login'}>
    ログイン
</div>

タブの表示を変更

$ npx create-next-app@latest .
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

OpenAI の API キーを取得

You cannot copy content of this page