Next.js로 프로젝트 시작하기 ⚡️
이번 프로젝트에서 Next.js를 사용하게 되면서 세팅을 위해 관련 개념을 이것저것 찾아보고 이해하기 위해 노력했다. 처음 사용해 보는 것은 아니지만 그동안 이렇게 제대로 써 보려고 시도한 적이 없기도 했고, 그 사이에 달라진 것도 많아서 공부할 주제가 많았다.
공부한 내용을 정리하며, Next.js가 무엇이고 왜 쓰는지에 대한 이야기를 담아 보려고 한다 😆
Next.js란?
Next.js는 React 기반의 웹 어플리케이션 프레임워크이다. 이 말을 이해하기 위해서는 우선 '프레임워크'가 무엇인지 알 필요가 있다.
💡 프레임워크와 라이브러리 구분하기
이 둘은 제어를 어디서 주도하느냐에 따라 구분할 수 있다.
라이브러리를 사용할 경우 개발자가 자신의 코드 내에서 라이브러리를 호출해 그 안에 정의된 요소를 활용한다. React는 JavaScript로 UI 컴포넌트를 구축할 수 있게 해 주는 라이브러리이다. 나의 의도대로 가져다 사용하는 공구상자 같은 느낌이다.
프레임워크를 사용할 경우 프레임워크가 정해진 뼈대를 제공함으로써 제어를 주도하고, 개발자는 프레임워크에 맞춰 자신의 코드를 작성한다. 이쪽은 프로젝트를 위한 가이드, 또는 설계도에 빗댈 수 있다.
즉, 개발자는 React라는 라이브러리를 내 코드에서 호출해 그 라이브러리에 구현되어 있는 요소를 컴포넌트 구현에 활용할 수 있다. 그리고 여기에 Next.js라는 프레임워크를 적용한다면, Next.js에서 제시하는 설계도에 맞추어 코드를 구현하게 될 것이다.
그럼 우리가 Next.js의 설계도를 따를 때 얻을 수 있는 이점은 뭘까? 개발자는 이 설계도에 맞춰 자신의 코드를 작성함으로써, Next.js에서 제공하는 기능을 사용할 수 있게 된다. 예를 들어 초기에 Next.js의 정체성은 SSR (Server Side Rendering) 중심이었는데...
⚙️ Next.js: 이 설계도대로 만들면 요 부분은 내가 알아서 서버 측에서 렌더링되게 할게~
🧑💻 개발자: ㅇㅋ 그렇게 만들게~
프레임워크를 사용하는 건 (잘 정리된 설계도는 그 자체로도 도움이 되지만) 이런 느낌이라고 생각해 볼 수 있겠다.
Next.js 최신 버전의 특징
사실 현 시점에서 React 프로젝트를 구성하고자 하면 거의 필수적으로 Next.js를 거치게 될 것이다. 이전에는 create-react-app을 사용해 별도의 프레임워크를 끼우지 않은 프로젝트를 생성하는 방식을 사용하기도 했지만, 이제는 React 공식문서에서 프레임워크를 사용하는 걸 권장하고 있다. 그리고 그 프레임워크로 가장 먼저 제시되는 것이 Next.js이다.
현재 Next.js 기반 프로젝트가 갖는 대표적인 특징은 다음과 같다.
- 라우팅: 개발자가 직접 라우터를 구성하지 않아도 프로젝트의 폴더 구조에 기반한 라우팅 시스템을 제공한다.
- 렌더링: Client Side Rendering, Server Side Rendering, Static Site Generation을 필요에 따라 구분해서 사용 가능하다.
- 최적화: 이미지, 폰트와 같은 리소스를 최적화해 성능을 향상시킨다.
- 데이터 호출: fetch API를 확장해 자체적으로 데이터 캐싱과 같은 기능을 포함한다.
- API Routes: API 엔드포인트를 구성해 프론트엔드뿐 아니라 간단한 백엔드 기능까지는 풀스택으로 구현할 수 있다.
이제 Next.js는 단지 SSR을 사용하기 위한 프레임워크가 아닌 셈이다. 다음 글에서는 이 중에서도 Next.js가 제공하는 라우팅 시스템에 대해 더 정리해 볼 예정이다.
읽어 주셔서 감사합니다. 내용에 부족한 부분이 있다면 댓글로 조언해 주세요! 🤍
