next.js 미니 앱 만들기
1.Next.JS 미니 앱 만들기
업로드중..Next.JS의 시작으로 미니 앱을 만들어 보고자 합니다
2.페이지별 타이틀 지정하기
페이지별로 문서의 타이틀을 만드는 과정을 하려 한다 Next.js에 내장 되어 있는 Head 설정를 설정하여 react-helmet과 같은 역할을 할 수 있다.react helmet 처럼 따로 설치를 해서 사용하지 않는것이 큰 장점인 것 같다.
3.영화 목록 데이터 받아오기 & 타입스크립트와 useState , map
기본적으로 useState는 따로 타입을 지정하지 않아도 타입을 유추해주지만 이렇게 데이터값을 받아올 때는 타입을 전부 any값으로 취하기 때문에 따로 타입을 지정해야줘야 한다.
4.Server Side Rendering
Next.JS는 app을 pre-render한다 그리고나서 초기화면으로 html을 준다. 그렇기 때문에 페이지를 inspect하게 되면 입력했던 Loading... 값이 있을 것이다. 값을 확인 할수 가 있다.개발자의 기호에 따라 이 Loading 상태를 보고 싶지 않
5.getServerSideProps 구성하기
Next.js는 기본적으로 SSG방식이 default 값으로 정해져 있다. 이 말은 즉 SSR 방식을 사용하려면 따로 지정을 해야한다는 것이다. 이와 같이 공식문서에 나와있다. 함수명은 반드시 getServerSideProps로 해야하며 props 안에 키값으로 우리가
6.Next.js getServerSideProps 타입스크립트 적용
getServerSideProps 함수를 타입스크립트에서 사용하라면 어떻게 해야 하는지 공식문서에 나와있다. getServerSideProps함수의 타입을 지정하려면 GetServerSideProps 타입을 import 해오며 그 다음 우리가 사용할 데이터의 type을
7. next/router - useRouter(2)
제목을 클릭했을 때 뿐만 아니라 영화 포스터를 클릭했을 때도 디테일 페이지로 넘어가게 만들고자 한다. 영화 제목을 클릭하였을 때 페이지를 넘어가는 것은 Link만으로 충분히 가능하지만 포스터와 타이틀 전체를 Link로 구현하는 것보다 useRouter를 사용하는 것이
8.next/router - useRouter(1)
useRouter는 Next.js에서 제공하는 내장되어 있는 hook이다. react를 사용할 때는 react-router를 설치해야하며 클릭할시 페이지를 이동하기 위해 useParams를 따로 지정해줘야하는 번거로움등 여러가지로 처음 개인프로젝트를 할 때 힘들었던 부
9.Catch all routes
