Next 개발일지 1

Posted on In ,

현재 next.js로 앱 두개를 개발중이며 하나씩 오류를 수정중이며 어떤 오류가 있었는지 그리고 어느 부분에서 고생하였는지 한번씩 기록을 남기려고 한다.

notion api 연동 포트폴리오 사이트

https://github.com/Jeong-hoyun/portfolio-site

배운점

  1. next js의 Image url 파싱할떄 초기 설정이 필요하다는 부분을 배웠다.
    next.config 설정시에 url 의 내용을 파악하고 jpg인지 png인지 혹은 null 일때 처리는 어떻게 해야하는지에 대해서도 한번
    깊게 생각하는 계기가 되었다.
  2. getServerSideProps와 getStaticProps 를 실제적으로 경험하여 SSR과 CSR 의 차이를 어느정도 알게 되었다.
    getStaticProps는 최초 빌드 시에 딱 한 번만 호출된다는 점이 매우 중요한 차이를 만든다는 것을 알수 있게 되었다. 예를 들어 notion api 사용을 한다고 getStaticProps를 사용한다면 notion을 수정한다해도 getStaticProps를 쓴 페이지는 변함이 없다. 반대로 getServerSideProps는 실시간으로 렌더시에 데이터가 수정될 경우에 사전렌더링이 되기 때문에 promise 를 통한 비동기 방식으로 데이터를 받아온다면 실시간 변동도 바로 확인이 가능하다. 왠만하면 수정이 거의 없는 상품 설명서, 또는 제품 목록 등은 SEO를 생각하면 getServerSideProps가 좋지 않을까 생각해본다.
    밑에와 같이 ({ params })과 같은 객체를 넘겨 API주소를 변동시켜서 데이터를 바꿀수도 있기에 다른 방식으로도 써볼 생각이다.
1
2
3
4
5
6
7
8
9
10
11
12
// getStaticProps 페이지 안에서만 쓸수 있다. 
export async function getStaticProps({ params }) {   
    // API 호출
    const response = await fetch(`https/example.com/posts/${params.id}`); // 
    const post = await response.json();

    return {
        props: { post },  //  컴포넌트가 전달받을 props 객체
        revalidate: false,  // 페이지의 Regeneration을 수행하기 위한 유예 기간
        notFound: false  // 404 페이지 반환 여부 (fallback: false일 때는 불필요)
    };
}

에러 사항

  1. cannot find module ‘fs’

    모듈 문제를 한번더 import 한 결과 이와 같은 결과가 나올수 있다는 것을 알았다.