안녕하세요!
질문자님께서 말씀하신대로 Next.js는 React “프레임워크”입니다.
개발자가 React를 기반으로 앱을 좀 더 편리하게 구현할 수 있게 도와주는 애인 것이죠.
그럼 뭘 도와주냐? 라고 한다면, 저는 대표적으로 3가지 정도가 떠오릅니다.
1. 서버 사이드 렌더링을 쉽게
2. 페이지 라우팅 설정을 쉽게
3. React 트랜스파일 속도를 빠르게
이미 어느정도 아실거란 생각이 들지만 좀 더 부연설명 드리면,
1번은 Next.js를 쓰지 않고 React만 사용해서도 SSR 설정이 가능합니다. 저도 이건 직접 해본 적은 없지만, 꽤나 복잡해서 그냥 Next.js를 쓰는 것이 몇배는 쉬울 것 같아요. 그래서 SSR이 필요한 앱이라고 한다면, 누구든 Next.js 도입을 가장 먼저 생각하겠지요. 아래 링크는 Next.js를 쓰지 않고 SSR을 세팅하는 방법에 대한 글인데요, 혹시 궁금하시면 한 번 참고해보세요!
- https://kimsangyeon-github-io.vercel.app/blog/2022-07-10-react-ssr
2번은 Next.js에서 pages 폴더를 기준으로 페이지 단위 라우팅을 할 수 있습니다. 저는 개인적으로 React에서 react-router-dom을 따로 설치하고 라우팅을 했던 것보다 Next.js의 폴더 기반 라우팅 시스템이 훨씬 편하다고 생각합니다.
3번은 Next.js 12버젼부터 내장되어 있는 SWC(Babel보다 트랜스파일 속도가 5배가량 빠르다고 알려져 있는)에 대한 얘기입니다. next 패키지만 다운받으면 별도 설치 및 설정없이 SWC를 사용할 수 있습니다. React만 사용한다고 했을 때는 SWC관련 패키지를 설치하고 Webpack에 따로 설정을 해야한다는 점과 비교하면 이것도 나름 Next.js의 장점이라고 말할 수 있을 것 같아요. 아래 링크는 트랜스파일과 Babel, SWC에 대해서 정리해둔 글들인데요, 얘네도 궁금하시면 한 번 참고해보세요!
- https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/
- https://im-developer.tistory.com/230
결론은 저라면, 예컨대 SSR가 필요없는 앱을 만든다고 해도 2, 3번의 이유로 React가 아닌 Next.js를 선택할 것 같습니다. (러닝 커브관점에서도 React를 사용할 수 있으면 Next.js의 러닝 커브랄 건 따로 없을 것 같구요!)