ã¯ããã« Next.js ã§ã¢ããªãä½ãã¨ãã«ã¼ãã£ã³ã°ãAPIãèªè¨¼ããã«ãæé©åã¾ã§å ¨é¨ãã¬ã¼ã ã¯ã¼ã¯ããã£ã¦ããããéçºã¯å¿«é©ã ããããªããã®æ§æãªã®ãããèãããã¨çãã«è©°ã¾ãå ´é¢ããã£ãã ããã§ãä¼è¨ã·ã¹ãã ãé¡æã« Next.js ã使ããã« React + Hono + Supabase ã§åããã¨ãå®ç¾ããæ§æã§éçºãã¦ã¿ãã ãã®è¨äºã§ã¯ãNext.js ãè£ã§ãã£ã¦ããã¦ãããã¨ã1ã¤ãã¤åãåºãã¦ããèªåã§ããã¨ã©ããªããããæ¯è¼ãããNext.js ãå¦å®ããè¨äºã§ã¯ãªãã便å©ãã®è£ã«ããä»çµã¿ãçè§£ããããã®è¨é²ã 1. ã«ã¼ãã£ã³ã° Next.js ã®å ´å app/ âââ page.tsx â / âââ login/ â âââ page.tsx â /login âââ dashboard/ âââ page.tsx â /dashboard
ããã¯ãªã«ï¼ æ¬çªç°å¢ã§ç´2å¹´é Prisma ã使ã£ã¦ããããã¸ã§ã¯ãããAtlas + Kysely ã«ç§»è¡ããè¨é²ã§ããSupabase ã® PostgreSQL ã使ã£ã¦ããç°å¢ã ã£ãã®ã§ãããã¤ã注æç¹ãããã¾ããããã®è¨äºã§ã¯ãç§»è¡ã®åæ©ããå ·ä½çãªæé ãããã¦ç§»è¡ãªã¹ã¯ãæããããã«è¿½å ãã E2E ãã¹ãã¾ã§ãä¸é£ã®æµããå ±æãã¾ãã ããã¸ã§ã¯ãã®èæ¯ ãã®ããã¸ã§ã¯ã㯠2021å¹´8æã« Next.js ã§éçºãéå§ããç´4å¹´åéç¨ãã¦ãã¾ãã æè¡ã¹ã¿ãã¯ã¯ä½åº¦ãå¤ãã£ã¦ãã¦ãæå㯠Next.js 㨠Supabase SDK ã使ã£ã¦ãã¾ãããèªè¨¼ã Supabase Auth ã使ã£ã¦ããã®ã§ããã2023å¹´7æã« Remix ã¸ç§»è¡ããã¿ã¤ãã³ã°ã§ Supabase SDK ãå¤ããPrisma ã¨èªåã®èªè¨¼ã«åãæ¿ãã¾ããã2024å¹´11æã«ã¯ React
AI颿¥å®ãå®è£ ãã¦ã¿ãããªãï¼ãã®åç»ã§ã¯ãAIã使ã£ãæ¡ç¨æ å½ã¨ã¼ã¸ã§ã³ããèªåã§éçºã»ãããã¤ããæ¹æ³ãä¸å¯§ã«è§£èª¬ããã¦ãã Next.jsãReactãSupabaseãVapiã使ã£ã¦ã - AIãç¨ãã¦é³å£°ã§ããã¨ãã§ãã - è·ç¨®ã«åããã¦è³ªåãèªåçæ - 颿¥å¾ã®ã¹ã³ã¢ä»ããã£ã¼ãããã¯ãèªååºå ã¨ãã£ãæ©è½ããã¡ããã¨ãã«ã¹ã¿ãã¯ã§ä½ããã UIã¯shadcnãèªè¨¼ã¯Supabaseãæ§æãæ´ç·´ããã¦ã¦ãã®ã¾ã¾åèã«ã§ããã¬ãã«ãåã«è©¦ããã ããããªããåç¾æ§ãé«ãã¦å¦ã³ãå¤ãã®ããããããã AIãæ´»ç¨ããSaaSã«èå³ããäººãæ¡ç¨ããã»ã¹ãæè¡ã§æ¹åããã人ã«ã¯ããªãåºããã¯ãã 5æéè¶ãã®ãã¥ã¼ããªã¢ã«ã ããã鱿«ã«ãã£ãã触ã£ã¦ã¿ãã®ãããããã
2025å¹´4æ13æ¥è¿½è¨ï¼ Xã§å ±æããã¦ã覧ã«ãªã£ã¦ããæ¹ãå¢ãã¦ãããããªã®ã§è¿½å ã§è£è¶³ãã¦ããã¾ãããã®åé¡ã¯RLSã®è¨å®ãã¹ã«ãã£ã¦çºçãã¦ãããã®ã§ãããSupabaseèªä½ã«ã¯åé¡ããã¾ãã ãç¾æç¹ã§ã®åã®èãã§ã¯ ããã³ãã¨ã³ãã ãã§å®è£ ããã®ã¯ãæå¤ã¨ä½¿ããã·ã¼ã³ãéãããã ã§ããã¦ã¼ã¶ã¼èªèº«ã®ç®¡çç»é¢ãªã©ã§ä½¿ãç¨åº¦ã«çãã¦ããã¨è¯ãã§ããããç¹ã«ä¸ç¹å®å¤æ°ã®ã¦ã¼ã¶ã¼ãé²è¦§ãããããªã¦ã¼ã¶ã¼äº¤æµåãµã¼ãã¹ã«ã¯å ¨ãåãã¾ãããããã¯å®éã«Supabaseã使ã£ã¦éçºãã¦ã¿ãã¨çè§£ã§ããã¨æãã¾ããå ¨ã¦ã®ã¦ã¼ã¶ã¼ãé²è¦§ã§ããããã«ããã«ã¯RLSã§ç¡æ¡ä»¶ãªtrueè¨å®ã«ããå¿ è¦ããããpublicã¹ãã¼ãã«ã³ãã¼ããã¦ã¼ã¶ã¼æ å ±ãå¿ ç¶çã«ç¡æ¡ä»¶ãªtrueã«ããå¿ è¦ããããããé©åãªDBæ§é ããã¦ãªããã°ã¡ã¼ã«ã¢ãã¬ã¹ãæ¼ãã¦ãã¾ãã®ã§ããç¡æ¡ä»¶ãªtrueè¨å®ã«ãã = HTT
ãã®è¨äºã¯Supabaseã®ãã¯ãã«æ¤ç´¢æ©è½ã®ç´¹ä»ã§ãã Supabase ãã¯ãã«æ¤ç´¢ã¨ã³ã¸ã³ Supabaseã¯åºæ¬çã«ã¯ãµã¼ãã¬ã¹ã®Postgresãã¼ã¿ãã¼ã¹ã§ãããpgvectorã¨ããæ¡å¼µã使ç¨ãããã¨ã§ãã¯ãã«æ¤ç´¢ã¨ã³ã¸ã³ã¨ãã¦ã使ç¨ãããã¨ãã§ãã¾ãã ãã¯ãã«æ¤ç´¢ã¨ã³ã¸ã³ã¨ã¯ãæç« ã»ç»åã»é³å£°ãªã©ããã¯ãã«åãããã¯ãã«éã®ã³ãµã¤ã³é¡ä¼¼åº¦ã使ç¨ãã¦é¡ä¼¼æ§ã®é«ãã³ã³ãã³ããåå¾ããDBã§ãã ããã¦ããã¯ãã«æ¤ç´¢ã¨ã³ã¸ã³ã¨RDBãæªéåä½ããããã¨ã§ãSQLã®WHEREå¥ããã¼ãã«ã»ã¸ã§ã¤ã³ãªã©RDBã®æ©è½ã使ãããããã¨ãã©ããªDBã«ãªãã¾ãã
TypeScriptãNode.jsãNext.js App RouterãReactãShadcn UIãRadix UIãTailwindã®ã¨ãã¹ãã¼ãã ã³ã¼ãã®ã¹ã¿ã¤ã«ã¨æ§é - æ£ç¢ºãªä¾ãç¨ãã¦ãç°¡æ½ã§æè¡ç㪠TypeScript ã³ã¼ããæ¸ãã¾ãã - 颿°åã¨å®£è¨åã®ããã°ã©ãã³ã°ãã¿ã¼ã³ã使ç¨ããã¯ã©ã¹ã¯é¿ããã - ã³ã¼ãã®éè¤ãããå復ã¨ã¢ã¸ã¥ã¼ã«åãåªå ããã - è£å©åè©(isLoading, hasErrorãªã©)ãç¨ãã説æçãªå¤æ°åã使ç¨ããã - æ§é ãã¡ã¤ã«ï¼ã¨ã¯ã¹ãã¼ããããã³ã³ãã¼ãã³ãããµãã³ã³ãã¼ãã³ãããã«ãã¼ãéçã³ã³ãã³ããåã å½åè¦å - ãã£ã¬ã¯ããªã«ã¯ããã·ã¥ä»ãã®å°æåã使ç¨ããï¼ä¾ï¼components/auth-wizardï¼ã - ã³ã³ãã¼ãã³ãã«ã¯ååä»ãã¨ã¯ã¹ãã¼ãã使ç¨ããã TypeScriptã®ä½¿ç¨æ³ - ãã¹ã¦ã®
çæAIãæ´»ç¨ãããããã¯ãéçºã®å®ä½é¨ã«é¢ãããã¨ã以ä¸ã®åå¼·ä¼ã§çºè¡¨ãã¾ããï¼ ã2/16éå¬ï¼åå¼·ä¼ãã¼ãã»ãããã®ã¨ã³ã¸ãã¢ã¨ãã¦ã®çæAIæ´»ç¨åå¼·ä¼ï¼ãã³ãºãªã³ããï¼ https://aigeeks01.peatix.com/view
ã¡ã³ããã³ã¹
ã©ã³ãã³ã°
ãç¥ãã
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}