[따라하면 돼!] Next JS 완벽 파헤치기 (1 - Next JS란)

이번에는 Next JS로 웹사이트 만들기에 대해서 시리즈 형태로 글을 써보려고한다.

해보고 괜찮다고 판단되면 계속 해볼 예정이다.

SPA의 큰 문제

React로 개발을 하다 보면 하나의 큰 문제와 직면하게된다.

그것은 바로 검색엔진 최적화이다. 각 브라우저 마다 검색엔진이 존재 하는데, 검색엔진은 검색 결과를 보여주기 위해 자료를 수집하고 내부적으로 순위를 매기는 작업을 한다. 검색 결과 상위에 노출이 되려면 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 개발 해야한다. 하지만 React로 개발을 하게 되면 자연스럽게 SPA (Single Page Application)으로 개발을 하게 된다.

이렇게 되면 개발중인 웹 페이지에 메타 태그들을 다이나믹하게 변경 하기 어려워진다.

검색엔진 최적화에 필요한 요소 중 중요한 비중을 차지하는 메타 태그 정보를 각 페이지마다 변경하기 어렵단 뜻은 내가 만든 사이트의 대한 정보를 검색엔진이 잘 알 수 없게 된다는 뜻이고, 이렇게 되면 검색 결과 순위에서 상단에 노출되기 어려워 진다.

 

이러한 문제를 해결 하기 위해서는 SPA로 개발중인 것을 SSR (Server Side Rendering)으로 변경해야한다.

하지만 React 프로젝트에서 SSR을 구현하는 것은 생각보다 손이 많이가는 작업인데 이것을 쉽게 구현하게 해주게끔 나온 프레임 워크가 Next.js이다.

 

"따라하면 돼!" 시리즈 처음 글은 Next.js를 이용한 SSR 웹 사이트 만들기를 해볼 예정이다.

 

Next.js 란

Next.js란 Vecel에서 만든 프레임 워크로 SSR을 쉽게 구현 할 수 있게 도와준다.

Next.js를 사용하여 개발을 하게 되면 사용자가 처음 페이지에 방문 했을 때 페이지를 서버에서 받아 랜더링하여 보여주게 된다. 이렇게 되면 각 페이지 마다 서버에서 받아서 랜더링 하기 때문에 다이나믹하게 페이지 메타 태그 정보를 변경 할 수 있게 되고 SEO에 유리한 페이지를 개발 할 수 있게 된다.

 

마무리

처음부터 스압주의 + 빡빡한 코드가 나오면 시작부터 겁을 먹고 도망 갈 수 있다고 생각한다.

이번 글에서는 우리가 무엇을 해볼 예정이고 왜 하게 되었는지에 대해 간단하게 짚어봤다.

 

다음 글에서는 Next.js 환경을 세팅하고 페이지를 만들어 볼 예정이다.

 

@JJoGeon