Next js 404Page / 수박 겉핥기 공부 끝
404 Page Next js 에서 404 페이지를 만드는 방법은 아주 간단합니다. pages폴더에 404.js를 만들고 다음과 같이 페이지 구조를 작성해주면 끝입니다. // 404.js export default function NotFound() { return ( 404 : 없는 페이지 입니다. ); } 그럼 없는 페이지에 접속했을때 해당 페이지를 렌더링 시켜주죠 공부를 마치며... 노마드 코더님의 기초 Next js의 강의를 모두 수강하였습니다. 이상으로 NEXT.js 의 수박 겉핥기 식 기초 공부를 마치고, 더욱 심화되게 NEXT js를 공부해보려합니다.
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 Dynamic Routes / 중첩 라우팅 / URL 변수 / router state 전달 및 마스킹
create-react-app 에서는 router를 react-router-dom 으로 처리하고 url parameter 를 "movies/:id" 와 같이 해서 movies/123 movies/124 를 넣어 dynamic url을 만들었습니다. 하지만 Next js 에서는 router를 기본적으로 지원을 해주고 그 속에서 dynamic routes를 구현할 수 있습니다. Routes 간단한 라우팅의 예시로 /movies/all 페이지를 만들고 싶다고 하면, pages 폴더에 movies 폴더를 만들고 all.js 페이지 파일을 생성해주어 만들면 됩니다. 폴더의 트리 구조로 url이 만들어집니다. // movies / all.js export default function ALL() { return "..
Next js SSR : get server side props
지금까지 공부했던 화면들은 next js의 장점인 SSR( Server Side Rendering ) 보단 CSR( Client Side Rendering ) 으로 화면 렌더링을 해주었습니다. 따라서 해당 화면을 브라우저에서 inspect 하게 되면 다음과 같이 데이터가 없는상태로 Loading 컴포넌트가 붙여진 채로 서버쪽으로 부터 html 소스파일을 받아오게됩니다. 지금까지의 플로우 즉 html 을 받아오고 > 화면 렌더링을 하고 > data fetch를 시작하고 pending 상태에서는 loading 화면을 보여주고 > fetch가 완료되면 그때서야 받아온 데이터를 가지고 렌더링하게 됩니다. 지금까지의 화면 이미지는 다음과 같습니다. Server Side Rendering next js에서는 서버측..
Next js ( Redirect / Rewrite ) , Rewrite 로 API key를 숨기자
Styling 스타일링은 해당 강의에서 미리 완료하여 제공해주는 코드를 사용하겠습니다. export default function Home() { const [movies, setMovies] = useState(); useEffect(() => { (async () => { const { results } = await ( await fetch( `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}` ) ).json(); setMovies(results); })(); }, []); return ( {!movies && Loading...} {movies?.map((movie) => ( {movie.original_title} ))} ); } *..
Next js Fetching Data / public 경로
NavBar 스타일링 본격적으로 기초 영화 앱을 만들기 위해서 네비게이션 스타일링을 다시 해줍니다. 스타일링에 시간을 들이지 않기위해 기존 만들어진 스타일을 그대로 붙여넣어줍니다. // NavBar.js import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); return ( Home About ); } public 폴더에서 가져와 쓰기 위 코드에서 img src="/vercel.svg" 를 보면 알 수 있듯이 Next js 에서는 public 폴더 내부의 파일의 경로를 쉽게 가져와 사용할 수 있습니다. 따로 상대경로로 ....