API?

API란 Application Programming Interface의 약자로 컴퓨터나 컴퓨터 프로그램 사이의 연결을 의미한다.

Frontend-Service는 고객과, Backend-Service는 DB와 연결되어 있다. 고객이 DB에 접근하기 위해 FE는 BE에 연결되어 있어야 하고, 이때 API를 활용한다. 그리고 BE가 제공해주는 API를 통해 DB의 내용을 확인할 수 있다.

Next.js가 제공하는 API Routes

기본적으로 Routing 동작방식과 동일하게 파일 기반이고, Dynamic Route도 가능하다.
폴더구조에 pages/api를 추가해서 사용할 수 있다.

// pages/api
export default function handler(req, res) {
   res.status(200).json({name : "kim kane"})
}

import Layout from 'components/Layout'
import SubLayout from 'components/SubLayout'
import styles from '/styles/Home.module.css'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react';

export default function UsernameInfo() {
  const router = useRouter();
  const {username, info} = router.query

  const [name, setName] = useState("?")
  useEffect(() => {
    fetch('/api/user').then((res) => res.json()).then((data) => {
      setName(data.name)
    })
  }, [])
  return (
    <>
      <h1 className={styles.title}>{username}'s {info}</h1>
      <h1 className={styles.title}>Name:{name}</h1>
      {/* kim kane */}
    </>
  )
}

UsernameInfo.getLayout = function getLayout(page) {
  return (
    <Layout>
      <SubLayout>{page}</SubLayout>
    </Layout>
  )
}

Dynamic Api Routes도 가능하다.

// pages/api/user-info/[uid].js
export default function handler(req, res) {
    // req에 slug 값이 저장되어 있다.
    const {uid} = req.query 
    res.status(200).json({name: `kim kane ${uid}` })
}

import Layout from 'components/Layout'
import SubLayout from 'components/SubLayout'
import styles from '/styles/Home.module.css'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

export default function UsernameInfo() {
  const router = useRouter()
  const { username, info, uid } = router.query

  const [name, setName] = useState('?')
  // useEffect(() => {
  //   fetch('/api/user').then((res) => res.json()).then((data) => {
  //     setName(data.name)
  //   })
  // }, [])
  useEffect(() => {
    if (uid != null) {
      fetch(`/api/user-info/${uid}`)
        .then((res) => res.json())
        .then((data) => {
          setName(data.name)
        })
    }
  }, [uid])
  return (
    <>
      <h1 className={styles.title}>
        {username}'s {info}
      </h1>
      <h1 className={styles.title}>Name:{name}</h1>
      {/* kim kane */}
    </>
  )
}

UsernameInfo.getLayout = function getLayout(page) {
  return (
    <Layout>
      <SubLayout>{page}</SubLayout>
    </Layout>
  )
}

다만, 클라이언트 사이드에서 처음 렌더를 할때, uid는 undefined 상태이다. 그래서 uid가 null이 아닐때 api 요청을 하고, uid값이 바뀌면 새로 렌더링되게 변경해줘야 한다.
그리고 Routing에서 사용한 slug 활용법도 적용 가능하다.

API Middlewares

내장된 미들웨어도 사용할 수 있다. ex)req.cookies, req.query... 등

// pages/api/user-info/[uid].js
export default function handler(req, res) {
    // req에 slug 값이 저장되어 있다.
    const {uid} = req.query 
    const cookies = req.cookies
    res.status(200).json({name: `kim kane ${uid} ${JSON.stringify(cookies)}` })
}

이렇게 위와 같이 미들웨어를 사용해 쿠키값도 가져올 수 있다.