books.tsx

import Head from 'next/head'
import Image from 'next/image'
import { useEffect, useState } from 'react';
import {api} from './api/api'

interface IBooks {
  title: string;
}

export default function Home() {


  const [books, setBook] = useState<IBooks>();

  const getBooks = async () => {
    try {
      const myBooks = await  api.get("/books").then((response) => setBook(response.data))
      console.log(myBooks)

    }catch(err) {
        console.error(err)
    }
  }

  useEffect( () => {
    getBooks()

  }, [])

   
  return (
    <>
      <ul>
        {books?.title}
        {/* {books.map((book) =>{<li key = {book.id}>{book.title}</li>})} */}
      </ul>
    </>
  )
}


// O axios

import axios from 'axios';

export const api = axios.create({
  baseURL: 'http://localhost:3000',
})

export default api;