Next.js] Next.js란?

next.js는 React 개발자라면 반드시 알아야 하는 프레임 워크입니다.

순수 React는 오히려 안 쓰고, React에 Next.js를 얹어서 주로 개발환경을 구성한다고 보시면 됩니다.

그러면 Next.js란 무엇인지부터 해서 같이 공부를 하려고 합니다.

이미 프로젝트 진행할 때 계속해서 사용하고는 있지만, 딱히 공부를 해서 알고서 사용하기보다는

그때그때 맞춰서 찾아보고 했던 터라 이번기회에 정리할 겸 공부할 겸 겸사겸사 하고 싶었습니다.

 

 

 

 

Next.js란?

React로 만든 서버 사이드 렌더링(SSR) 프레임 워크입니다. 

정확히는 SSG에 구분될 것입니다.

CSR인 React환경에서 SSR기능을 구사할 수 있게 해 줍니다.

 

• SSR의 특색을 구현할 수 있기 때문에, 만약 리소스가 큰 페이지가 있거나, 데이터를 미리 로드해 놓는 게 좋다고 판단된다면, SSR로 특정페이지만 구현할 수 있습니다.
• CSR의 단점인 SEO에 취약한 점을 보안할 수 있습니다. SSR로 구현하게 되면서 검색엔진에 노출이 될 수 있게 된 것입니다.
• 추가로 meta태그를 자유롭게 추가하여 SEO를 용이할 수 있습니다.

 

 

---

 

 

주요 기능

1. Hot reloading
   • 개발 중 저장되는 코드를 자동으로 새로고침 해줍니다.
2. Automatic routing
   • page폴더에 있는 파일 이름으로 라우팅이 됩니다. (13 버전부터는 파일 구조가 조금 바뀐 거 같습니다..)
3. Single file components
   • JSX, TSX 컴포넌트 내부만 스코프를 가지는 CSS를 만들 수 있습니다.
4. Global style
   • 프로젝트 전체 CSS파일인 globals.css 파일이 있으며, _app.tsx에서 정의하여 전체로 적용할 수 있습니다.
5. SSR
   
   • 계속 얘기하는 서버사이드렌더링을 구현할 수 있습니다.
6. Code splitting
   • dynamic import를 이용하면 손쉽게 코드 스플리팅이 가능합니다
7. 동적 로드
   • 폴더 구조를 pages/test/[id].tsx로 만들게 되면 동적으로 id별로 만들 수 있습니다.

Code splitting
webpack 같은 모듈 번들러를 이용해서 하나의 번들파일을 여러 개로 나누는 것을 의미합니다.
나눈 번들을 이제 필요한 부분만 불러와서 속도가 빨라지게 됩니다.

 

 

이거 말고도 Next.js 통해 할 수 있고, 설정해 줄 수 있는 게 굉장히 많을 것입니다.
웬만하면 하나씩 다 공부해 보고 사용하지 않더라도 알고만 있는 쪽으로? 생각하고 있습니다.