[Next.js] Next.js | 기술적 분석 + 사용해보며 느낀점

 Next.js 기술적 분석 + 사용해보며 느낀점

[index]

1. Next.js란?

2. Next.js의 주요 기능 및 이점

3. Next.js의 단점

4. 프론트 개발자의 입장에서 보는 Next.js의 이점

5. React와 비교해보기

6. 사용해보며 느낀점

---

 

1. Next.js란?

Next.js는 Vercel이라는 회사에서 개발된 React 기반의 웹 프레임워크입니다. 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(Static Site Generation, SSG)과 같은 기능을 사용할 수 있도록 하여 신속하게 대규모 및 기업용 애플리케이션을 개발하고 배포할 수 있도록 지원합니다. 특히 사용자 친화적이며 매우 빠른 정적 사이트를 구축할 수 있습니다. 또한 Automatic Static Optimization기능을 사용하여 하이브리드 애플리케이션(서버 측 렌더링 페이지와 정적으로 생성된 페이지를 모두 포함하는)을 구축할 수 있습니다.

 

다음은 Next.js 공식 문서에서 언급한 6가지 주요 기능들입니다.

• Routing
  레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터입니다.
• Rendering
  클라이언트 및 서버 구성 요소를 사용한 클라이언트 측 및 서버 측 렌더링. Next.js를 사용하여 서버에서 정적 및 동적 렌더링으로 더욱 최적화되었습니다. Edge 및 Node.js 런타임에서 스트리밍합니다
• Data Fetching
  서버 구성 요소의 async/await를 사용하여 데이터 가져오기를 단순화하고 요청 메모, 데이터 캐싱 및 재검증을 위한 확장된 fetch API.
• Styling
  CSS 모듈, Tailwind CSS, CSS-in-JS 등 선호하는 스타일 지정 방법 지원
• Optimizations
  이미지, 글꼴 및 스크립트 최적화를 통해 애플리케이션의 핵심 웹 바이탈 및 사용자 경험을 향상할 수 있습니다.
• TypeScript
  더 나은 유형 검사, 더 효율적인 컴파일, 사용자 정의 TypeScript 플러그인 및 유형 검사기를 통해 TypeScript에 대한 지원이 향상되었습니다.

 

---

2. Next.js의 주요 기능 및 이점

1. Routing

Next.js의 핵심 기능 중 하나는 파일 기반 라우팅 시스템입니다. 간단한 파일 및 폴더 구조를 통해 URL을 직접 파일에 매핑하여 애플리케이션의 라우팅을 간편하게 구성할 수 있습니다.

 

Next.js 라우팅 시스템은 3가지 유형으로 나누어지며, 아래에서는 각 유형을 살펴보겠습니다.

인덱스 라우팅

- pages
  - index.js
  - profile
    - index.js
    - [user].js

• /pages 폴더 내의 파일과 폴더는 자동으로 URL로 변환됩니다.
• 예: /pages/index.js는 홈페이지의 루트 경로(/)에 매핑합니다.
• 폴더에는 자동으로 index.js가 있어 해당 경로의 기본 페이지를 정의할 수 있습니다.

중첩된 경로

- pages
  - index.js
  - dashboard
    - index.js
    - user.js

• 중첩된 경로를 생성하려면 상위 경로/폴더를 생성하고 그 안에 파일 또는 폴더를 추가하여 중첩 경로를 생성합니다.

동적 라우팅

- pages
  - dashboard
    - [user].js
        - profile

• [user].js와 같이 대괄호를 사용하여 동적 라우팅 가능합니다.
• 동적 경로는 API 호출 또는 URL에 ID/슬러그 할당을 위해 사용합니다.

더 자세한 라우팅 시스템에 대한 정보는 Next.js 공식 문서 참조.

2. Rendering

서버 사이드 렌더링 (SSR)

초기 로딩 속도 향상과 SEO에 유리합니다. 서버에서 페이지의 일부 또는 전체를 렌더링하고 초기 데이터를 미리 가져와 완전한 페이지 렌더링이 가능합니다.

 

정적 사이트 생성 (SSG)

페이지를 빌드 시에 미리 렌더링하고 정적 파일로 생성합니다. CDN에 배포하여 성능 향상시키고, 서버의 부하를 감소시킵니다.

3. Serverless Functioning | 서버리스 기능

서버리스 아키텍처를 활용하여 벡엔드 작업을 간편하게 처리할 수 있습니다. 클라우드 호스팅을 통해 서버 관리가 단순화되어 효율적으로 운영할 수 있습니다.

4. Hot Module Replacement (HMR) | 핫 모듈 교체

코드를 수정할 때 전체 페이지를 리로드하지 않고 모듈을 실시간으로 교체할 수 있습니다. 코드 수정과 테스트를 빠르게 진행하여 개발 생산성을 높일 수 있습니다.

5. Zero Config

추가 구성 없이 자동으로 컴파일 및 빌드되며, 핫 리프레시를 지원합니다. 프로덕션 애플리케이션의 자동 확장과 최적화를 제공하여 더 효율적인 배포가 가능합니다.

6. 데이터 통합

Next.js는 getStaticProps, getServerSideProps, getInitialProps와 같은 메서드를 통해 데이터를 가져오는 방법을 지원합니다. 이를 통해 페이지를 렌더링하기 전에 필요한 데이터를 사전에 가져올 수 있으며, 필요한 경우 서버에서 동적으로 데이터를 로드할 수 있습니다.

7. 정적 파일 제공

Next.js에서는 public 폴더를 통해 정적 파일, 아이콘, 자체 호스팅 글꼴, 이미지 등을 제공합니다. 이는 정적 자산을 관리하는 간편한 방법을 제공하며, public 폴더는 정적 자산의 유일한 정보 소스입니다.

8. TypeScript 지원

공식적으로 TypeScript를 지원하며, TypeScript를 사용하여 정적 타입 검사를 수행할 수 있습니다. 코드의 안정성을 높이고 개발자가 더 신속하게 오류를 찾아 수정할 수 있도록 도와줍니다.

9. 이미지 최적화

이미지 최적화를 간소화하고 자동화하여 개발자가 복잡한 수동 구성 없이도 이미지를 효율적으로 관리할 수 있습니다. 특히 프로덕션 환경에서 이미지 관리의 중요성을 강조합니다.

 

 

Next.js는 이러한 다양한 기능을 제공하여 프론트엔드 개발자들이 빠르고 효율적으로 웹 애플리케이션을 구축하고 유지보수할 수 있도록 돕는 강력한 웹 프레임워크입니다. 여러 이점을 선택적으로 활용하면 프로젝트에 적합한 솔루션을 유연하게 구성할 수 있습니다.

 

---

3. Next.js의 단점

Next.js는 많은 강점을 가지고 있지만, 몇 가지 제한적인 측면도 고려해야 합니다. 아래는 Next.js의 일부 단점에 대한 설명입니다.

 

1. 개발 및 유지관리 비용

Next.js는 강력하고 유연한 프레임워크이지만, 사용하기 위해서는 특정 기술에 대한 숙련된 개발자가 필요합니다. 개발 및 유지 관리 비용이 높을 수 있으며, 특히 초보자에게는 학습 곡선이 높을 수 있습니다.

2. 내장 상태 관리자 부족

Next.js는 상태 관리에 대한 명시적인 내장 기능을 제공하지 않습니다. 애플리케이션에서 상태 관리가 필요한 경우 별도의 상태 관리 라이브러리를 도입해야 합니다. Redux, MobX 등을 사용하여 상태 관리를 구현할 수 있습니다.

3. 플러그인 부족

Next.js는 많은 플러그인을 지원하고 있지만, 다른 프레임워크와 비교할 때 상대적으로 플러그인 생태계가 다소 부족할 수 있습니다. 특정 기능이나 라이브러리를 통합하기 위해서는 직접 구현하거나, 커뮤니티에 의존해야 할 수 있습니다.

4. 제한된 개인화 및 커스터마이징

Next.js는 일부 규약과 설정을 강제하므로, 프레임워크가 원하는 구조와 규칙을 준수해야 합니다. 이로 인해 특정한 개인화나 커스터마이징이 어려울 수 있습니다. 특히 프레임워크가 기본적으로 제공하는 동작을 변경하려면 추가적인 노력이 필요할 수 있습니다.

5. 프로젝트 구조의 제약

Next.js는 파일 시스템 기반의 라우팅을 사용하므로, 프로젝트 구조에 제약이 생길 수 있습니다. 특히 큰 규모의 프로젝트에서는 구조를 유지하기 위해 몇 가지 조치를 취해야 할 수 있습니다.

 

---

 

4. 프론트 개발자의 입장에서 보는 Next.js의 이점

1. Server-Side Rendering (SSR) | 서버 사이드 렌더링

웹페이지를 서버 측에서 생성하고 랜더링되도록합니다. 이를 통해 완전한 형태의 HTML 문서가 클라이언트의 브라우저에 직접 전송됩니다. 이러한 방식의 이점은 초기 로딩 시 시차적으로 표시되던 콘텐츠를 사전 랜더링 한 후 브라우저에서 보여지도록하여 사용자 경험에 긍정적인 효과를 가져옵니다.

2. SEO Benefits | SEO의 효율성

Next.js는 SEO 친화적인 기능으로 검색 엔진 최적화에 이점이 있습니다.

• Server-Side Rendering (SSR) | 서버 사이드 렌더링
  Next.js의 SSR은 웹페이지를 서버 측에서 완전한 HTML 형태로 생성하므로, 검색 엔진은 페이지의 전체 콘텐츠를 쉽게 읽고 색인화할 수 있습니다. 검색 엔진은 초기 로딩 시 완전한 콘텐츠를 받아오기 때문에 사용자 경험이 향상되고, 이는 검색 엔진에서 긍정적으로 평가될 수 있습니다.
• Structured Data Support | 구조화된 데이터
  SEO에 중요한 측면 중 하나는 구조화된 데이터의 지원입니다. Next.js는 구조화된 데이터를 쉽게 통합할 수 있는 방법을 제공하여 검색 엔진이 페이지의 의미와 콘텐츠를 더 잘 이해하도록 도움을 줍니다.
• Automatic Head Tag Management | 자동 메타 태그 관리
  <head> 태그는 SEO에 중요한 부분입니다. Next.js는 자동으로 <head> 태그를 관리하고 각 페이지에 필요한 메타태그를 추가합니다. 이는 검색 엔진이 페이지의 제목, 설명, 및 기타 정보를 쉽게 이해할 수 있도록 도와줍니다.
• Canonical URLs | 중복 컨텐츠 방지
  중복 콘텐츠는 SEO에 부정적인 영향을 미칠 수 있습니다. Next.js는 페이지의 주소를 쉽게 관리할 수 있도록 Canonical URL을 자동으로 처리합니다. 이는 검색 엔진이 어떤 URL을 주요 URL로 간주해야 하는지를 알려줌으로써 중복을 방지합니다.
• SEO-friendly Routing | 파일 기반 라우팅 시스템
  Next.js의 파일 시스템 기반 라우팅은 URL을 의미있게 생성합니다. 이로 인해 검색 엔진은 페이지의 구조를 이해하기 쉽고, 사용자에게도 직관적인 URL이 제공됩니다.
• Performance Optimization | 성능 최적화
  검색 엔진은 페이지의 로딩 속도를 고려하여 순위를 결정합니다. Next.js의 성능 최적화는 빠른 페이지 로딩을 지원하여 사용자 경험을 향상시키고, 이는 SEO에 긍정적인 영향을 미칩니다.

이러한 다양한 기능을 통해 Next.js는 SEO를 고려한 웹 애플리케이션을 쉽게 개발할 수 있도록 지원하고 있습니다.

3. Built-in Static Site Generation (SSG) | 정적 사이트 생성

SSG를 사용하여 빌드 시 웹페이지를 사전 랜더링합니다.

SSG는 웹페이지가 서버나 클라이언트 측에서 동적으로 렌더링되는 대신 빌드 시 미리 렌더링 되는 웹 개발 기술입니다. 콘텐츠가 랜더링 되어 CDN( 콘텐츠 전송 네트워크)에 저장 됩니다.

• 서버 부하 및 비용 절감
  빌드 프로세스 중에 페이지가 사전 렌더링되기 때문에 사용자 요청 시 서버 측의 동적 처리가 필요 없어집니다. 이로써 서버의 부하가 감소하고 호스팅 비용을 절감할 수 있습니다.
• 향상된 처리 속도
  콘텐츠가 이미 사전 렌더링되어 있기 때문에 요청 시 콘텐츠를 매우 빠른 속도로 전달할 수 있습니다. 이는 페이지 로드 시간이 크게 단축되어 사용자 경험을 향상시키는 데 도움이 됩니다.
• 콘텐츠의 안정성과 일관성
  SSG를 통해 생성된 정적 HTML 파일은 변하지 않습니다. 이는 콘텐츠의 일관성과 안정성을 보장하며, 사용자가 항상 최신 정보를 확인할 수 있습니다.
• SEO 향상
  검색 엔진은 정적 페이지를 쉽게 색인화하고 순위를 매길 수 있습니다. 따라서 SSG를 사용하면 SEO 관점에서도 이점을 얻을 수 있습니다.

SSG 적용하기 적합한 사이트

• 대용량 데이터를 처리하는 웹사이트에 이상적입니다. (뉴스 또는 전자 상거래 플랫폼)
• 블로그, 제품 설명 등 업데이트 빈도가 낮은 동적 데이터가 포함된 페이지에 유용합니다.
• 빠른 로드 속도를 요구하거나 높은 트래픽 급증을 처리해야 하는 마케팅 캠페인 사이트에 유용합니다.

4. Enhanced Developer Experience | 향상된 개발자 경험

개발자 친화적인 기능으로 원활한 개발 환경을 제공합니다. 아래는 개발자 친화적인 기능의 일부 입니다.

• 자동 코드 분할
  JavaScript 번들을 더 작고 실행 가능한 작은 단위로 자동 분할합니다. 이는 필요한 코드만 클라이언트에 전송되므로 페이지 로드 시간이 향상됩니다. 항상 수동 구성이 필요하지 않기 때문에 개발 생산성 향상에 도움이 됩니다.
• 핫 리로딩
  핫 모듈 교체를 통해 전체 페이지를 새로 고칠 필요 없이 실시간으로 코드 변경 사항을 확인할 수 있습니다.
• 배포 용이성
  서버리스 배포 또는 기존 서버 호스팅 중 무엇을 선택하든 프로젝트를 배포하기 용이합니다. 파일 배포의 유연성 덕분에 개발자는 프로젝트 요구사항에 더 적합한 방식으로 설정을 선택할 수 있습니다.

5. Higher Flexibility and Customization | 더 높은 유연성과 맞춤화

Next.js는 개발자에게 유연성을 보장하며 사용자 정의 기능을 제공합니다.

• 사용자 정의 라우팅
  Next.js는 페이지 및 경로를 자동으로 관리하지만, 사용자는 필요에 따라 라우팅을 제어할 수 있습니다. 사용자 정의 경로, 중첩 경로, 동적 경로 매개 변수를 정의하여 복잡한 라우팅 구조를 만들 수 있습니다. 예를 들어, 이커머스 사이트에서 각각의 상품 페이지와 다양한 카테고리에 대한 사용자 정의 경로를 설정할 수 있습니다.
  
• API 경로
  Next.js에서는 API 경로를 사용하여 서버리스 기능을 생성할 수 있습니다. 이는 백엔드 로직 처리를 위한 편리한 방법을 제공하며, 서버리스 아키텍처를 활용하여 백엔드 작업을 단순화할 수 있습니다. API 경로를 활용하면 데이터의 동적인 처리나 외부 서비스와의 통합을 효과적으로 구현할 수 있습니다.
  
• 외부 라이브러리와의 통합
  Next.js는 다양한 외부 라이브러리와 기술과의 원활한 통합을 지원합니다. GraphQL과 같은 강력한 쿼리 언어나 다른 상태 관리 라이브러리 등을 프로젝트에 통합하여 개발자가 프로젝트의 요구 사항에 가장 적합한 도구를 선택할 수 있습니다. 이는 개발자들이 자신이 선호하는 도구와 기술을 자유롭게 사용할 수 있도록 합니다.
  
• 서버 동작 사용자 정의
  Next.js에서는 서버 동작을 사용자 정의할 수 있습니다. 개발자는 서버 미들웨어를 구현하고 프로젝트 요구 사항에 따라 인증 및 권한을 부여할 수 있습니다. 이는 애플리케이션의 보안을 강화하는 데 도움이 되며, 특히 정적 웹사이트의 경우 데이터베이스, 종속성, 사용자 데이터 등과의 직접적인 연결이 없어 데이터 보안에 이점을 제공합니다.
  

6. 타입스크립트 지원

 Next.js는 타입스크립트를 공식적으로 지원하며, 이는 프레임워크의 핵심적인 일부로 채택되어 있습니다. 이는 Next.js 개발팀이 타입스크립트와의 호환성을 지속적으로 유지하고 개발자들이 안정적으로 사용할 수 있도록 보장합니다.

7. 이미지 최적화

Next.js에서의 이미지 최적화는 웹 애플리케이션에서 이미지를 효율적으로 관리하고 성능을 향상시키는 핵심 기능입니다. 아래는 관련된 주요 특징들입니다:

• 간소화된 최적화
   Next.js는 이미지 최적화를 개발자가 복잡한 설정 없이도 간소화합니다. 이미지 업로드 시 자동으로 최적화 작업이 수행되어 불필요한 데이터를 제거하고 파일 크기를 최소화합니다.
• 자동화
  이미지 최적화는 자동화되어 개발자는 수동으로 최적화 작업을 수행할 필요가 없습니다. 이는 효율성을 높이고 일관된 성능을 유지할 수 있도록 도와줍니다.
• 효율적인 CDN 관리
  최적화된 이미지는 CDN에 효과적으로 저장되어 성능 향상을 실현합니다. CDN을 활용하면 이미지를 빠르게 제공하고 서버 부하를 감소시킬 수 있습니다.

---

5. React와 비교해보기

1. Rendering  | 렌더링
   
   • React: React는 주로 클라이언트 측 렌더링(CSR)을 사용하며 렌더링은 클라이언트 측에서 수행됩니다. 서버 사이드 렌더링 (SSR)은 Next.js와 같은 도구를 사용하여 별도로 구현할 수 있습니다.
   • Next.js: Next.js는 서버 사이드 렌더링(SSR)을 제공하며 빌드 프로세스 중에 페이지를 사전 렌더링하는 정적 사이트 생성(SSG)도 지원하여 성능과 SEO를 향상시킵니다.
2. Routing  | 라우팅
   • React: React 자체에는 내장된 라우팅 솔루션이 제공되지 않지만 React Router와 같은 서드파티 라이브러리를 사용하는 경우가 많습니다.
   • Next.js: Next.js는 내장 파일 시스템 기반의 라우팅 시스템을 제공합니다. "pages" 디렉터리 내의 페이지는 자동으로 라우트로 사용됩니다. 이는 라우팅 설정을 단순화하지만 복잡한 시나리오에 대해 React Router보다는 유연성이 낮을 수 있습니다.
3. Development speed  | 개발 속도
   • React: React 애플리케이션을 빌드하기 위해 Webpack 및 Babel과 같은 도구를 설정하고 구성해야 합니다. 개발 속도는 구성의 복잡성에 영향을 받을 수 있습니다.
   • Next.js: Next.js는 제로 구성 방식을 채택하여 React 애플리케이션에서 필요한 많은 설정을 자동화합니다. 이는 개발 프로세스를 크게 가속화할 수 있습니다.
4. Data fetching |  데이터 가져오기
   • React: React 자체는 데이터 가져오기에 대한 구체적인 규칙을 제공하지 않습니다. 개발자들은 주로 Axios 또는 fetch와 같은 라이브러리를 사용하여 API 호출을 처리합니다.
   • Next.js: Next.js는 클라이언트 측 및 서버 측 데이터 가져오기를 모두 지원합니다. getStaticProps 및 getServerSideProps와 같은 함수를 제공하여 데이터를 빌드 프로세스 중에 또는 각 요청마다 가져올 수 있도록 하여 유연성을 높입니다.
5. SEO |검색 엔진 최적화
   • React: 순수 React 앱에서 SEO는 도전적일 수 있으며 검색 엔진이 클라이언트 렌더링된 콘텐츠를 효과적으로 색인화하지 못할 수 있습니다.
   • Next.js: Next.js는 사전 렌더링 기능(SSR 및 SSG)을 통해 검색 엔진에 미리 렌더링된 HTML 콘텐츠를 제공함으로써 SEO를 개선합니다.
6. 이미지 최적화:
   • React: React 자체에는 내장 이미지 최적화 기능이 없습니다.
   • Next.js: Next.js는 이미지 최적화를 간소화하고 자동화하여 복잡한 설정 없이도 이미지를 효율적으로 관리할 수 있도록 지원합니다.
7. TypeScript support | 타입스크립트 지원
   • React: React 자체는 JavaScript로 작성되어 있으며 TypeScript는 React와 함께 널리 사용되지만 추가 구성이 필요합니다.
   • Next.js: Next.js는 공식적으로 TypeScript를 지원하며 정적 타입 검사를 통해 코드 안정성을 높이고 개발자가 빠르게 오류를 찾아 수정할 수 있도록 도와줍니다.

요약하면 React는 강력한 사용자 인터페이스를 구축하기 위한 라이브러리이며, Next.js는 이러한 React의 능력을 확장하여 기본 기능 외에도 서버 사이드 렌더링, 라우팅 및 향상된 개발 경험을 제공합니다. React와 Next.js 중 어떤 것을 선택할지는 프로젝트 요구 사항과 원하는 추상화 및 규칙 수준에 따라 다를 수 있습니다.

 

 

6. 사용해보며 느낀점

장점

1. 개발 속도 향상
   개발 속도 측면에서 Next.js는 정말 빠릅니다. 특히 자체 컴파일러 도입으로 빌드 속도가 향상되면서 코드 수정 후 결과를 확인하는 시간이 크게 단축되었습니다.
   
   
2. 편리한 라우팅
   Next.js의 파일 시스템 기반 라우팅은 개발자가 별도의 라우팅 설정을 신경 쓰지 않아도 되게 해줍니다. 새로운 페이지를 만들면, 그 페이지는 자동으로 해당 경로로 매핑되어지고, 폴더에 index.js 파일이 있으면 해당 폴더의 기본 페이지로 동작합니다. 덕분에 새로운 페이지를 추가하거나 프로젝트를 확장할 때 생기는 귀찮은 설정 작업을 최소화할 수 있었습니다.
   
   
3. TypeScript 지원
   TypeScript를 공식적으로 지원해줘서 정적 타입 검사를 통한 안정성이 높아졌습니다. 런타임 오류를 사전에 방지하고 개발 생산성을 향상시킬 수 있었습니다.
   
   
4. 이미지 최적화 및 자동화
   이미지 최적화를 자동으로 처리해주는 부분이 편리했습니다. 설정에 신경 쓰지 않고도 효율적인 이미지 관리가 가능했습니다.
   
   
5. 핫 리로딩으로 즉각적인 코드 수정
   핫 리로딩, 자동 코드 분할 등의 기능은 개발자 경험을 향상시켜주었습니다. 코드 수정 후 즉각적인 결과 확인이 가능하여 개발 과정이 더 원활해졌습니다.
   
   
6. Zero Config
   초기 설정이나 빌드 프로세스에 대한 복잡한 설정 없이 프로젝트를 빠르게 시작할 수 있었습니다. 

단점

1. 러닝 커브
   처음에는 Next.js의 개념을 이해하는 데 어려움을 겪었습니다. 특히 React만 사용해보았던 상황에서 Next.js의 컨셉 및 구조에 적응하는 데 시간이 필요했습니다.  개인 프로젝트를 진행하는 과정에서는 초기 설정이 간단하지 않아 처음 프로젝트를 시작할 때 설정에 대한 이해가 필요했습니다.
   |
2. 제한된 상태 관리
   상태 관리에 대한 내장된 솔루션이 없어서 별도의 라이브러리를 도입해야 했습니다. 이 부분은 팀 내에서 협의를 통해 해결해나가야 했습니다. 
   
   
3. 프로젝트 구조의 제약
   파일 시스템 기반의 라우팅은 처음에는 직관적으로 느껴졌지만, 프로젝트가 커지면서 구조를 유지하기 위해 몇 가지 노력이 필요했습니다.
   
   
4. 플러그인 부족
   Next.js는 생태계가 확장되고 있지만, 아직 몇 가지 특정한 플러그인이 부족합니다. 다른 프레임워크와 비교하면 플러그인 생태계의 다양성이 부족한 편입니다. 따라서 특정한 요구를 충족시키기 위해 직접 구현해야 하는 경우가 있었습니다.

 

결론

 Next.js를 사용하면서 초기에는 적응하기위해 시간이 필요했지만, 적응하고 난 이후로는 편리한 기능과 성능 향상을 경험했습니다. 개발자가 신경써야하는 반복 작업 중 상당 부분을 Next.js가 자동으로 처리해주기 때문에 개발 생산성 측면에서 크게 향상됨을 느꼈습니다. SSR으로 화면단을 구성하는 경험을 처음 해보았는데 프로젝트에 특성에 따라 유의미한 결과값을 낼 수 있을것 같다고 생각했습니다. 그리고 typeScript와의 연계성으로 보다 안정적으로 개발이 가능하다는 점도 이점이라고 생각합니다. 다만 프로젝트를 진행한 후 이어진 내부 회고에서는 프로젝트의 특성상 SSR이 가지는 이점이 크지않아 Next.js를 사용함 으로써 더 큰 이득을 취하지 못한 느낌이었다는 의견도 있어 Next.js의 사용은 팀의 요구 사항과 프로젝트 규모를 고려하여 선택하는 것이 무엇보다 중요하다고 느꼈습니다. 

 

---

참고문서

https://ninetailed.io/blog/next-js-vs-react

Next.js Pros and Cons | Clean Commit

Next.js vs. React: A Comparative Tutorial | Toptal®

Why Next.js 13 is a Game-Changer

What is Next JS and Why Should You Use it in 2023? - Pagepro

Next.js Benefits: 5 Key Reasons for Your Next Front-End Development

Next.js by Vercel - The React Framework

What Is Next.js? A Look at the Popular JavaScript Framework