TIL - 20220628

 오늘도 어제에 이어서 Next.js에 대해서 공부했다.

 

 Next.js에는 _app.js라는 파일이 있다. 반드시 이름이 _app.js여야 하며, Next.js는 page가 렌더링 되기 전에 먼저 _app.js를 참고한 다음 page의 내용물을 렌더링한다. 그렇기 때문에, Header나 global로 적용해야 하는 CSS를 중복 없이 한 번에 적용할 수 있다. React.js와 비교하면 Header를 적용하려면 모든 컴포넌트에 Header 컴포넌트를 넣어줘야 하는데 Next.js는 이러한 기능을 한 번의 코드로 적용할 수 있는 것이다.

 

 redirects와 rewrites라는 기능이 있다.

 

redirects는 말 그대로 사용자가 어떠한 url을 입력하면 그 url을 개발자가 설정한 url로 자동으로 이동한다.

redirects

사용자가 /old-blog/1 url로 이동하면 /new-sexy-blog/1로 자동으로 입력하는 것이다. 또한, url이 자동으로 바뀌는 것을 사용자가 볼 수도 있다. 사용자가 url이 바뀌는 것을 모르게 하는 방법도 있다.

 

rewrites는 사용자가 어떠한 url을 입력하면 url은 그대로지만 내용이 바뀌게 된다.

rewrites

사용자가 /api/movies를 요청하면(source), https://api.themoviedb.org~에 대한 요청(destination)으로 변경되는 것이다. 이를 통해 사용자는 정상적인 url에 바꼈음을 인지하지도 못한다는 점과 주요 api를 감출 수 있다는 장점이 있다. 

 

또, HTML head 내용을 바꾸려면 React-Helmet을 사용해야 하지만 Next.js에서는 기본적으로 제공하는 next/head가 있고 이 외에도 Next.js에 제공하는 매력적인 기능들이 많다.

HTML head 내용을 바꾸는 next/head

이번 Next.js 공부를 통해 Next.js가 Server Side Engineering이라는 강력한 기능을 비롯하여 편리한 부가 기능도 많이 갖고 있는 정말 매력적인 프레임워크라는 것을 알게 된 계기였으며 신세계라는 표현이 떠오를 정도였다. Next.js를 이용한 프로젝트도 나중에 꼭 한 번 해봐야겠다!