Open9

Next.jsを勉強したい

obizipobizip

これまでに勉強したことも含めて、勉強したことを追加していきたい。

obizipobizip

参考 Webサイト

obizipobizip

Twitter クローンを作ろう

参考: https://www.youtube.com/watch?v=Z_9EpoGXH8k
supabaseの設定参考:

型安全に環境変数を読む: https://creatures.sh/blog/env-type-safety-and-validation/
{ type A } -> type { A }

supabaseのメール認証の登録は毎時3通まで？

nextjs-withsupabase: https://github.com/vercel/next.js/tree/canary/examples/with-supabase
loginのエラー内容はクエリに入れてredirectしていた。

一旦中断

obizipobizip

supabase, shadcn/ui, zodを用いた認証画面をつくりたい

まず認証画面単体から作りたくなった

pnpm dlx create-next-app@latest
✔ What is your project named? … .
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

pnpm add --save-dev --save-exact @biomejs/biome
pnpm biome init

pnpm install @supabase/supabase-js @supabase/ssr

pnpm install zod

supabaseのsetupを https://supabase.com/docs/guides/auth/server-side/nextjs に従って行う

signout: https://supabase.com/docs/reference/javascript/auth-signinwithsso

password認証のみだが一応完成した。https://github.com/obizip/auth-page-with-supabase

メモ

  • login と sign up をどう使い分けるか
  • パスワード認証以外の認証を使いたい
  • supabase cliを使いたい
  • localのsupabaseで上手く完結させたい
  • RLSとは何か
  • guiでなくsql文で今回と同様なテーブルを作るにはどうすればよいか(特にAuthとの連携)
  • supabaseにはauth用のuiがあったが、今はdeprecateされている https://supabase.com/docs/guides/auth/auth-helpers/auth-ui
obizipobizip

Dashboardを作りたい

参考: https://www.youtube.com/watch?v=YthqiuzEXBs&t=4s
これをNext.js化する

pnpm dlx create-next-app@latest
✔ What is your project named? … .
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

pnpm add --save-dev --save-exact @biomejs/biome
pnpm biome init

pnpm install boxicons --save
pnpm install chart.js

Next.js with boxicons: https://medium.com/@michaelquarcoo04/boxicons-react-next-js-typescript-integration-87216f00d594

obizipobizip

Quiz generator

pnpm dlx create-next-app@latest
✔ What is your project named? … .
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

pnpm add --save-dev --save-exact @biomejs/biome
pnpm biome init
pnpm install zod
pnpm dlx shadcn-ui@latest init

shadcn初期設定: https://ui.shadcn.com/docs/installation/next
https://github.com/shadcn-ui/ui/discussions/2137