機動戦士ガンダムから学ぶ、vercel/examples入門

vercel/examples

アムロ
「シャア少佐、見てください！　この『vercel/examples』というもの、すごく便利そうです。僕ら、エンジニアとして活用できるんじゃないかなって。」

シャア
「フフ、アムロ。君は相変わらず良いものを見つける。しかし、それが単なる『サンプル集』ではない、ということを理解しているか？」

アムロ
「そうなんです！ただのサンプルコード集だと思ってたら、大間違いでした。これって、単なるコードの断片じゃなくて、Vercelというプラットフォーム上で動かすことを前提に、ベストプラクティスが詰まった『設計図』なんですね。」

シャア
「その通りだ。戦場でモビルスーツの性能を最大限に引き出すためには、優れた設計図が必要不可欠だ。この『vercel/examples』も同じこと。Next.jsのようなフレームワークを使って、高速でスケーラブルなウェブアプリケーションを構築するための『戦術』を教えてくれる。」

アムロ
「特に、認証機能やデータベース連携、Eコマース機能といった、僕たちが一から作ると手間のかかる機能の『完成形』が用意されているのがありがたいです。これをベースにすれば、開発時間を大幅に短縮できますよ。」

シャア
「フフ、実践の場に移ろう。導入は簡単だ。君のMS（モビルスーツ）...いや、開発環境を準備するんだ。」

アムロ
「まずは、GitHubからリポジトリをクローンします。この例では、nextjs-blogをクローンしてみますね。」

git clone https://github.com/vercel/examples.git

アムロ
「次に、目的のサンプルディレクトリに移動して、依存関係をインストールします。」

cd examples/nextjs/blog
npm install

シャア
「フム、そこからが本番だ。ローカルで動作確認を行う。」

npm run dev

アムロ
「これで、ローカルサーバーが起動して、ブログアプリの動作を確認できます！ 実際に動くものを見ながら、コードを読み解いていけるのがすごく分かりやすいです！」

シャア
「そして、この『戦果』を宇宙（インターネット）に展開する。Vercelアカウントにログインし、プロジェクトをデプロイするんだ。」

アムロ
「Vercel CLIを使えば、コマンド一つでデプロイできますよ！ vercelコマンドを打つだけで、自動的にプロジェクトが認識されて、URLが発行されるんです。」

vercel

アムロ
「シャア少佐、このwith-prismaのサンプル、見てください！ Next.jsとデータベースのPrismaを連携させる方法が、すごくシンプルにまとまっています。」

シャア
「ふむ、見事な設計だ。フロントエンドとバックエンドの連携が、まるで一つのモビルスーツのように統合されている。」

アムロ
「はい。pages/api/ディレクトリの中に、APIのエンドポイントが定義されていて、prismaクライアントを使ってデータベースにアクセスしています。」

// pages/api/post/index.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { prisma } from '../../lib/prisma'

export default async function handle(req: NextApiRequest, res: NextApiResponse) {
  const posts = await prisma.post.findMany({
    where: { published: true },
    include: { author: true },
  })
  res.json(posts)
}

シャア
「そして、フロントエンドでは、このAPIを呼び出すことでデータを取得しているわけだ。API RouteというVercelの仕組みを最大限に活用しているな。」

// pages/index.tsx
import { useState, useEffect } from 'react'
import axios from 'axios'

export default function Home() {
  const [posts, setPosts] = useState([])
  useEffect(() => {
    axios.get('/api/post').then(response => {
      setPosts(response.data)
    })
  }, [])

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>By {post.author.name}</p>
        </div>
      ))}
    </div>
  )
}

アムロ
「はい。これを見れば、Next.jsでAPIをどう作って、どう使うのかが、一目瞭然です。これなら、僕でも色々な機能を試すことができます！」

シャア
「アムロ、君の成長は、このサンプル集のように、常に新しい可能性を秘めているな。しかし、忘れるな。コードは手段に過ぎない。重要なのは、その先に何を作り出すかだ。」

アムロ
「はい、シャア少佐！この『設計図』を活かして、もっともっと、人々の役に立つものを作ってみせます！」