🎃

【Next.js】基礎から始めるNext.js API Routes【１１Get Users】

2022/12/20に公開

Next.js

Prisma

tech

【１１Get Users】

YouTube: https://youtu.be/_rHmtQdv9hA

https://youtu.be/_rHmtQdv9hA

今回はクライアント側からユーザーの一覧を取得する処理を実装します。

今回は「prisma client」を使用してますので、
クライアント側でこちらのメソッドを使用すると
APIを経由することなく、直接データの取得ができてしまうのですが、
それだとAPIを作成した意味がなくなってしまうので、
今回はこちらの方法は使用しません。

また、通常のAPIと同様にSSRやSSGも使用可能ですが、
今回はuseEffectを使用してクライアントサイドから
フェッチを行います。

ドメインが共通ですので、
「/api/users」のようにドメインの省略ができます。

pages/index.tsx

import Head from 'next/head'
import Image from 'next/image'
import { useEffect } from 'react'
import styles from '../styles/Home.module.css'

export default function Home() {
  useEffect(() => {
    ;(async () => {
      const res = await fetch('/api/users')
      const users = await res.json()
      console.log(users)
    })()
  }, [])

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

【１１Get Users】

Discussion