Nextjs API basic

Nextjs 공부좀하려고 js파일로만든 간단한 예제 데이터를 불러온뒤 useState를 활용했는데

데이터가 undefined라고 뜬다..ㅠ 아 또왜...

찾아보니 API폴더를 활용해 API route를 만드는 방법이있어서 별수없이 이걸 이용하기로했다.

 

예제

[pages] > [api] > index.js

export default function handler(req,res){
    res.status(200).json({name:'Home API route test'})
}
//localhost:3000/api

 

이제 프론트서버를 켜고 주소/api를 입력해주면

참고,

만약 [pages] > [api] > hello.js를 만들경우 route경로는 localhost:3000/api/hello 가 된다.

만약 [pages] > [api] > [blabla] > index.js를 만들경우 route경로는 localhost:3000/api/blabla 가 된다.

만약 [pages] > [api] > [blabla] > blabla2.js를 만들경우 route경로는 localhost:3000/api/blabla/blabla2 가 된다.

 

활용

[pages] > [api] > index.js

export default function handler(req,res){
    res.status(200).json([
      {
        id: 0,
        title: "White and Black",
        content: "Born in France",
        price: 1200000,
      },

      {
        id: 1,
        title: "Red Knit",
        content: "Born in Seoul",
        price: 110000,
      },

      {
        id: 2,
        title: "Grey Yordan",
        content: "Born in the States",
        price: 130000,
      },
    ]);
}
//localhost:3000/api

 

[pages] > index.js

export default function Home({data}) {
//   let [shoesList, setShoesList] = useState(자바스크립트에서 데이터추출);//이방법 실패했음
  return (
      <>
        <Container>
          <Row>
              {data.map((item) => <Card item={item}/>)}
          </Row>
        </Container>
      </>
  );
}

function Card({ item }) {
  return (
    <div className="col-md-4">
      <h5>{item.title}</h5>
      <p>{item.price}</p>
    </div>
  );
}

export async function getStaticProps() {
    const res = await fetch('http://localhost:3000/api')//방금만든 api route
    const data = await res.json()
  return {
    props: {
      data,
    },
  };
}

이제 데이터 잘출력됨ㅠㅠ

예외처리

만약 성공했을때(200)가 아닌경우 예외처리는 어떻게 할지 공부할예정!