TIL : 오늘 내가 발견한 것은

Next.js  에서  환경변수 파일은 어떻게 설정하는가 ?

env 파일은  왜 필요할까요?  그냥  url써도 되는데 왜 구지  있어야 될까를  생각해보면 , 나는  여기에  사용자의 소중한 정보 ( 비밀번호 , 유저 정보) 를  가지고  있기 때문에  그것을 보존하기 위해서 필요하다고 봅니다.

 

NEXT_PUBLIC 으로 접근합니다.

 

 

다음과 같이  process.env 를 이용해서 접근합니다.

  // NEXT_PUBLIC_TODO_URL = "경로"
  
  process.env 를 이용해서 접근합니다.

 

---

tailwindCSS

 

태어나서 난생 처음으로 tailwindCSS를 사용하였습니다.  

 

느낀점     CSS까지  맞아야하는 개발자들의  피로를 덜어줄수 있다고 생각합니다.    className를 맞게만 입력하면  나옵니다.  어려운 점    저는  처음 이용하는 것이다 보니  tailwindCSS 공식문서에서 다 찾아야 되는 것이  힘들었습니다.        총합       그래서  어느 기술이라도  익숙해지기만 하면  괜찮아진다 라는 것을 알게 되었습니다.

 

 

---

next.js 빌드과정 중 에러 

 

개발자 서버에서는  잘 실행되었습니다.

빌드를 하면  다음과 같이  prerendering page 에러가 발생하였습니다.

데이터를 불러오는 것에 실패했다.   그리고  에러를 일으키는 페이지는  todos-ssr 입니다.   그래서  생각한 것은  구글링이었습니다.  그래서 다음과 같이 검색했습니다.

 

다음 글을 참고하였습니다.

https://velog.io/@ysm3471/Next.-js-Error-occurred-prerendering-page-build-%EC%97%90%EB%9F%AC

[Next. js] Error occurred prerendering page - build 에러

이 글쓴이의 글을 읽고  생각이 들은  것은

저의  생각입니다. 이 문제가 발생한  이유    우리가  지금  이용하는 ssr 페이지는  서버 컴포넌트이기에  백엔드 서버로부터 데이터를  받아옵니다. 그리고 그러한 기능을     하는 것이  api router인데   api router의 포트 위치가  저의  서버가 실행되는 포트와 동일해서   활성화되지 않아서       데이터를  못받아옵니다 라고 에러를  발생시킨다. 그래서 해결책은       저는   ssr 데이터가 존재하는   json  서버를   실행해서  json 서버 url 로  바꾸고 build를 진행하였습니다.     아래 사진 참고  바람니다.

 

1.  그 json 서버를 실행하였습니다.

 

2.  그 다음  해당 url로  fetch부분을 바꿈니다.

 

3.  그리고 build를  실행했더니  성공했습니다.

4.  실행화면은  다음과 같습니다.

 

( 1 )  build 후 서버는  잘 실행됩니다. 

 

( 2)  화면