[Next.js] API 라우터 (API Router)

// API Router

- HTML 코드를 리턴하지 않고 HTTP request를 받는다.

- DB와 연결해 데이터를 주고받을 수 있다.

---

1. 서버 코드 작성

- pages 폴더 하위에 api 폴더를 생성한다.
  - 포함되는 파일의 이름은 URL에서 경로가 된다.

- pages > api > 파일명   => api/파일명

- Server-side 코드를 포함하는 함수를 정의한다.

- Next.js에서 DB연결 코드는 https://sorrel012.tistory.com/402 참고

---

2. 클라이언트에서 서버 연결

await axios
  .post('/api/파일명', data)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    window.alert(error);
  });

---

import NewMeetupForm from '../../components/meetups/NewMeetupForm';
import axios from 'axios';
import { useRouter } from 'next/router';

function NewMeetupPage() {
  const router = useRouter();

  async function addMeetupHandler(enteredMeetupData) {
    await axios
      .post('/api/new-meetup', enteredMeetupData)
      .then((response) => {
        router.push('/');
      })
      .catch((error) => {
        window.alert(error);
      });
  }

  return <NewMeetupForm onAddMeetup={addMeetupHandler} />;
}

export default NewMeetupPage;

 

import { Pool } from 'pg';

const pool = new Pool({
  user: process.env.DATABASE_USER,
  host: process.env.DATABASE_HOST,
  database: process.env.DATABASE_NAME,
  password: process.env.DATABASE_PASSWORD,
  port: parseInt(process.env.DATABASE_PORT, 10),
});

async function handler(req, res) {
  console.log(req, 'req');
  if (req.method === 'POST') {
    const { title, image, address, description } = req.body;

    try {
      const client = await pool.connect();

      const result = await client.query(
        'INSERT INTO meetup(title, image, address, description) VALUES($1, $2, $3, $4) RETURNING *',
        [title, image, address, description],
      );

      client.release();

      res
        .status(201)
        .json({ message: 'Meetup inserted!', data: result.rows[0] });
    } catch (err) {
      console.error('Database connection error', err.stack);
      res.status(500).json({ message: 'Database connection failed' });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

export default handler;