Next js Catch-All URL / serverSideProps Context
Catch-all URL 이란 아래 사진과 같이 url 뒤에 붙여진 parameter 값을 다 받아오는것을 말합니다. 위 URL 에 영화 제목을 넣어 SEO 최적화를 시켜줄겁니다. 이 방법을 사용하게 되면 영화의 제목을 바로 받아올 수 있을 뿐더러 홈페이지에서 클릭 후 상세페이지를 들어오지 않더라도 영화의 제목을 확인할 수 있게됩니다. 우선 index.js URL 라우팅을 다음과 같이 영화제목도 url에 들어갈 수 있도록 바꿔줍니다. [...] 으로 Catch-All 그리고 이전에 만들었던 pages > movies > [id].js의 파일명을 [...params].js 로 바꿔줍니다. 여기서 id > params 로 바꾼 이유는 더이상 id의 파일명 보다는 catch all 할 url이 하나의 para..
Next js Layout Patterns
이전 공부까지 1차 Next js 의 기본적인 구조를 알아보았습니다. 지금부터는 노마드코더분의 강의를 보며 영화 앱을 만들면서 Next js 공부를 진행해보려합니다. Layout Pattern 많은 사람들이 Next js 를 사용할 때 쓰는 패턴이 있다고합니다. custom app component에서 layout 패턴이라는것을 사용한다고합니다. 파일 생성하기 우선 components 폴더에 Layout.js 라는 파일을 생성하고 내부는 다음과 같이 코드를 작성합니다. Layout 컴포넌트의 children props를 받아서 자식 컴포넌트를 Layout 내부에 렌더링을 해주고 마찬가지로 NavBar을 같이 넣어줍니다. // Layout.js import NavBar from "./NavBar"; exp..