Next.js가 뭐고 왜 사용할까?

오늘은 Next.js를 생각도 없이 사용하다 문득 이유를 알고 사용해야 하는데

나는 이유를 모르고 또 사용을 하고 있었구나...

라는 생각이 들어 자세히 알아보려고 합니다

나는 애송이..

---

❓ Next.js 그게 뭘까?

Next.js

Next.js는 React 기반의 프레임워크입니다

vercel에서 개발 했습니다

 

React는 라이브러리, Next는 프레임워크라고 합니다

둘의 가장 큰 차이점은 응용 프로그램의 흐름 주도권을 누가 가지고 있느냐입니다

Next.js는 특정 스타일과 규칙을 따르지 않으면 에러가 발생할 수 있습니다

그래서 Next.js의 규칙과 스타일을 준수하는 것이 중요합니다

 

 

그리고 Next는 SSR을 쉽게 구현할 수 있게 해 준다고 합니다
밑에 글에서 SSR에 대해 자세히 설명하고 있습니다!!

https://baeougi.tistory.com/6 

SSR을 구현하면 SEO가 되기 때문에 Next를 쓴다고 합니다

++ 페이지를 변경할 때에는 CSR 방식으로 처리하기 때문에 SPA의 장점도 유지할 수 있다고 합니다

 

Next를 사용하면 자동으로 따로 라우팅을 해주지 않아도 pages 디렉토리에 있는 파일을 기준으로 라우터별로 다른 페이지로 넘어가게 해 줍니다

 

자동으로 코드 스플리팅을 합니다

코드를 분할하여 번들해서 초기 구동을 빠르게 할 수 있습니다

 

이렇게 정말 많은 장점들과 기능들이 있는 Next입니다

---

🎯 어떻게 사용할까?

npm install next react react-dom

next, react, react-dom 패키지를 설치

 

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

package.json 파일에 스크립트를 추가합니다

 

npm run dev

코드를 작성하고 실행을 해줍니다 

---

✨ 마무리

제가 SSR을 구현할 수 있는 것을 큰 장점으로 내세웠는데 React로도 SSR을 구현할 수 있긴 하다고 합니다

그리고 react-helmet 라이브러리로도 SEO를 최적화할 수 있다고 합니다 

하지만 Next로 구현하는 게 훨씬 깔끔하다고 하니 이미 진행 중인 프로젝트가 아니라면
Next를 사용하는 것이 좋을 것 같습니다

이렇게 장점을 알고 사용하니 더 잘 이해하면서 사용할 수 있을 것 같아서 기대가 됩니다

그리고 이 글을 쓰면서 한번 더 반성하게 되었습니다 

내가 쓰는 것에 장점이나 기능도 제대로 모르고 쓰다니 ㅠㅠ
더욱 열심히 공부해야겠다는 생각이 드는 계기가 된 것 같습니다

그리고 제가 빠뜨린 것이 있을 수도 있으니

https://nextjs.org/

Next.js by Vercel - The React Framework

공식 문서를 꼭 읽어보시면 좋을 것 같습니다