nextJS

NextJs 13버전으로 포트폴리오 제작을 이어가던 중, SSG 관련 문제가 발생하였습니다. SSG를 통해 페이지가 빌드될때 필요한 데이터를 getStaticProps 함수에 담아 사용해보려 했으나, 위 결과처럼 getStaticProps 함수에서 반환된 데이터가 undefined가 반환되고 있습니다. 열심히 정보를 찾아보니 getStaticProps를 통한 SSG는 NextJs 12 버전까지만 지원한다는 사실을 알게되었고, 추가로 NextJs 공식문서에 13버전에서 DataFetching은 Fetch 함수를 통해 SSG를 이루면 된다는 사실도 볼 수 있었습니다. 위 형태로 SSG를 진행하자 undefined로 반환됐던 값들이 원하는 내용을 반환하기 시작했습니다. 문제 해결-!

NextJs를 사용해서 포트폴리오 페이지를 만들던 중 lottie player를 사용하던 과정에서 오류와 마주했습니다. 오류 내용 error - useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component at stringify () 이 오류는 SSR에 사용할 수 없는 React hook을 사용하려고 하면 발생하는 오류입니다. NextJs에서는 서버 컴포넌트와 클라이언트 컴포넌트를 구분하는데, 두 컴포넌트는 다른 환경에서 실행됩니다..

리액트에서는 유저의 라우팅에 따라 해당하는 페이지를 모두 지정해줘야했습니다. 하지만 Next.js에서는 자동적으로 파일과 폴더를 통해 라우팅을 구현할 수 있습니다. 아래는 app디렉토리의 내용입니다. layout.js 먼저 layout.js(tsx)는 page.js(tsx)를 감싸는 파일입니다. 다시말해 page.js는 layout.js 내부에 속해있는 파일입니다. 왜 이렇게 구성되어있을까요? 그 이유는 페이지 바깥에 적용시킬 컴포넌트 혹은 내용이 있다면 layout.js에 넣으면 됩니다. 가령 예를 들면 head 태그 안에 들어가야하는 내용, 상단 메뉴 (nav바) 등을 layout에 적용시키면 됩니다. Next.js 라우팅? 라우팅 기능을 사용해서 페이지의 엔드포인트를 /about-me로 만들고 싶다..