Next.js 시작

오랜만에 새로운 기술을 공부하게 되었다 ! 🚀

왜 Next.js?

NextJS를 시작하는 이유는 CSR의 경험 뿐이기 때문이다.
SSR을 지원하는 NextJS의 경험은 개발자로서는 꼭 필요한 역량이라 판단된다.
일찍 시작할 걸 아쉬움이 남지만 늦었다 생각할때가 (진짜늦은) 가장 빠를 때다 !

NextJS를 시작하기 전에 사전조사를 해보았다. NextJS는 어떤 장점이 단점이 있길래 사람들이 많이 사용하는 걸까 !

단지 SSR때문만은 아니군

NextJS를 사용하는 이유는 SSR을 지원하기 때문인지 알았다.
그것도 맞는 말 이지만 이것 뿐 아니라 많은 장점을 가진 리액트 프레임워크이다.

Next JS는 React "프레임워크"로 다양한 기능을 제공한다.
이제 배우기 시작한 단계이기 때문에 많은 장점을 직접 정험해본 건 아니지만
조사한 바로는 다음과 같은 기능이 있다.

• SSR(+ 하이브리드 렌더링 )
• 파일 시스템 기반의 라우팅
• 이미지 최적화
• Full Stack 개발 가능
• SEO (이는 SSR을 지원하니까)

등이 있다.

하이브리드 렌더링 ?

React로 개발할 때를 생각해보자. 많은 컴포넌트를 나누고 해당 컴포넌트를 조합해서 하나의 페이지를 개발하지 않았나?

그런데 React, 즉 SPA의 경우 동적인 컴포넌트든 정적인 컴포넌트든 번들링 된 전체 js파일은 최초에 1회 클라이언트로 보내지게 된다.
이는 초기 로딩 속도를 지연 시킬 수 있다.

그런데 만약 정적인 컴포넌트를 원할 때만 가져오게 된다면 초기에 보내지는 js파일도 줄어들고 그만큼 서버 자원을 적절하게 사용할 수 있지 않을까?

이처럼 정적인 컨텐츠 혹은 비교적 많은 데이터를 불러오는 과정은 SSR의 방식으로 처리해주면 효율이 좋을 것이다. 왜냐면 필요할 때 해당 페이지(코드)를 불러올 수 있기 때문이다.

물론 CSR도 Lazy - Loading을 통해 필요한 코드를 적절하게 불러올 수 있지만 Lazy-components가 많아지게 되면 그만큼의 청크파일도 늘어나고 이는 네트워크의 부하, 배포과정의 복잡도 증가가 나타날 수 있다.

그리고 SSR로 HTML을 제작해 받아오게 되면 SEO에도 유리한 결과를 가져올 수 있다. 하지만 코드의양이 적고 정적인 콘텐츠가 적고 또 SEO가 중요치 않다면 CSR에 Lazy-loading을 사용하는 방법이 더 효율이 좋을 수 있다.

지금 NextJS를 학습하기 전에 필자가 상상하는 NEXTJS로 구현한 컴포넌트는 다음과 같다.

파일 시스템으로 라우팅

NextJS는 라우팅이 아주 간편하다.

React로 개발을 할 때 보통 router-dom을 사용한다.

url에 각 컴포넌트를 연결하여 직접 url의 경로에 해당하는 페이지(컴포넌트)를 연결해주는 작업이 필요하다.

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route
        path="/users/:id"
        render={({ match }) => (
          <User id={match.params.id} />
        )}
      />
    </Switch>
  );
}

이런식으로 최상단 App 컴포넌트의 Router 컴포넌트를 렌더링하도록한다.

그런데 NextJS에서는 이렇게 개발자가 직접 라우팅하는 경로를 코드로 작성하지 않아도 된다.
파일시스템으로 라우팅을 설정할 수 있다.

현재 필자는 Next 14.2.13 v을 학습중이다.

위 폴더구조처럼 도메인이 nice.com이라면
https://nice.com/about-us는 위 about-us/page에 있는 JSX(TSX) 코드의 HTML을 보여준다.

만약 https://nice.com/user에 어떤 컴포넌트를 보여주고싶다면
user/page에 원하는 컴포넌트를 JSX(TSX)를 작성해주면 된다.

사실 위 라우팅이 신기해서 블로그 글을 작성하게 됐다 ㅋㅋ
이게 프레임워크의 맛인가? 프레임워크가 설정해준대로 하면 개발이 편리하도록 설정되어 있다..

그런관점에서 리액트(라이브러리)와의 차이점도 확실히 알 수 있어서 신기하다.

마무리 ☕️

이제 NextJS를 시작(이제 IDE에 Next띄움 🤣)하면서 알아본 조금의 특징을 정리한 글이다. 그냥 오랜만에 새로운 걸 하다보니 흥분되기도하고 신기해서 좀 급하게 글을 작성했다. 다음 글은 좀 더 학습 후에 천천히 작성을 해봐야겠다 !