Vercelのスターターキットを試してみた

Vercelのスターターキットを試してみたメモ。

こんな記事をみました。
あまり読まずに「お、いいかんじ！」と思って触り出しました。

1時間くらいでできたのでメモ。

なにしたの

大体次の記事の通り。ハマることもなくすっとできた。

マルチナントのスターターキットでした。
以下で構成されている模様。

• Next.js as the React framework
• Tailwind for CSS styling
• Prisma as the ORM for database access
• PlanetScale as the database (MySQL)
• NextAuth.js for authentication
• Vercel for deployment

Next.jsとTailwindいいな。というのがぱっと思ったことです。気軽に使えるのならありがたいと。

Prisma、PlanetScale、そしてNextAuth.jsで利用するTwitter APIははじめて触りました。
Prismaでデータの読み書き、PlanetScaleがデータベース（MySQL）、NextAuth.jsでTwitter連携してログインする。というサービスがとても簡単にできちゃう！

中でもPlanetScaleは「The database for developers」を謳っているサービスでとても良さそうです。
本番、ステージング、シャドーのデータベースをCLIから一瞬で作れて、なんだかGitHubのDB版といったような使用感でした。

コマンドメモ

だいたいドキュメントのとおり。手順には .env をコピーするのがなかったくらい（わかれ）。

npx create-next-app --example https://github.com/vercel/platforms/tree/main platforms
cd platforms && npm run dev
npm install prisma --save-dev                                                    
brew update                                                                      
brew install planetscale/tap/pscale                                              
brew install mysql-client                                                        
pscale auth login                                                                
pscale connect platforms staging --port 3309                                     
pscale connect platforms staging --port 3310                                     
cp .env.example .env
npx prisma migrate dev --name init
pscale deploy-request create platforms staging
npm run dev  

管理画面

このキットを作って作られたブログサービス

hashnode というブログのサービスが、Vercel上で動いているようです。
シンプルなデザイン、SSR、SPAでとても良い。乗り換えたいくらいの勢いである。

以上メモでした。