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
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
npm i @supabase/auth-helpers-nextjs @supabase/supabase-js @types/uuid date-fns server-only sharp supabase uuid zustand
npm i -D encodingページ作成
ローディング画面
エラー画面
404 ページは頻繁にアクセスされます。アクセスのたびにエラーページをサーバーサイドレンダリングすると、Next.js サーバーの負荷が高くなってしまいます。その結果、コストが増加したり、体験が遅くなったりすることがあります。
これを避けるためにpages/404.jsファイルを作成することで、カスタマイズされた 404 ページを作ることができます。このファイルはビルド時に静的に生成されます。
'use client'
// エラー画面
const Error = () => {
return (
<div>
<div className="text-center text-5xl font-bold mb-3 text-white">500</div>
<div className="text-center text-xl font-bold text-white">Server Error</div>
</div>
)
}
export default Errorデータが存在しないときの画面
.env.localファイル作成
npx supabase loginnpx supabase initnpx supabase link --project-refsupabaseテーブルの型をインポート。
npx supabase gen types typescript --linked > utils/database.types.tsSupabase 連携
サーバー側
// Supabase Client
import { headers, cookies } from 'next/headers'
import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
import type { Database } from '../utils/database.types'
export const createClient = () =>
createServerComponentSupabaseClient<Database>({
headers,
cookies,
})ミドルウェア
ミドルウェアは、ユーザーのセッションを更新するために使用します。
クライアント側
サービスや機能を使う側のコンピュータを「クライアント」といいます。
プロバイダー
Supabase クライアントのインスタンスを作成
リスナー
認証状態の監視を行う。
ユーザーがログインやログアウトをすると最新の認証状態を取得する。
サーバーサイドのみ動作するように限定する
import 'server-only'ページ作成
サインアップ
プロフィール
ログイン
プロフィール画面作成
