[ NEXT.JS ] Next.js에 대해 알아보기.

 

 

NEXT.JS는 무엇일까?

 

 

Next.js 는 빠른 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 React 프레임 워크로, React에 필요한 도구 및 구성을 처리하고 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공한다.

 

Next.js는 SSR(Server-Side-Rendering), 정적 웹 페이지 생성 등 React 기반 웹 애플리케이션 기능들을 가능하게 하는 Node.js 위에서 빌드된 오픈 소스 웹 프레임워크이다.

 

React를 사용하여 UI를 구축한 다음, Next.js 기능을 점진적으로 채택하여 라우팅, 데이터 가져오기, 통합과 같은 일반적인 애플리케이션 요구 사항을 해결하는 동시에 개발자 및 최종 사용자 경험을 개선할 수 있다.

 

 

React의 공식 페이지에서는 아래와 같이 소개한다.

Next.js

Next.js는 인기 있는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션입니다. 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각합니다.
Next.js를 정식 가이드를 보면서 배워보세요.

 

출처 - NEXT.JS

NEXT의 웹 애플리케이션 빌딩 블록 

• UI (사용자 인터페이스) - 사용자가 애플리케이션을 사용하고 상호 작용하는 방법.
• Routing (라우팅) - 사용자가 애플리케이션의 다른 부분 사이를 탐색하는 방법.
• Data Fetching (데이터 가져오기) - 데이터가 있는 위치와 가져오는 방법.
• Rendering (렌더링) - 정적 또는 동적 콘텐츠를 렌더링하는 시기 및 위치.
• Integrations (통합) - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 연결 방법.
• Infrastructure (인프라) - 애플리케이션 코드(서버리스, CDN, Edge 등)를 배포, 저장 및 실행.
• Performance (성능) - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.
• Scalability (확장성) - 팀, 데이터 및 트래픽이 증가함에 따라 애플리케이션이 조정되는 방식.
• Developer Experience (개발자 경험) - 팀의 애플리케이션 구축 및 유지 관리 경험.

 

 

---

 

Next.js 작동 방식

 

 

 

 

Compiling

출처 - Next.js

 

 

 

Minifying

주석, 공백, 들여쓰기 및 여러 줄과 같이 코드를 실행하는데 필요하지 않은 추가 정보를 제거 하는 프로세스로 파일 크기를 줄여 응용 프로그램의 성능을 향상시키는 것이 목표이다.

출처 - Next.js

 

 

 

 

Bundling

모듈, 구성 요소 및 기능과 같은 내부 모듈과 외부 타사 패키지를 내보내고 가져오면 파일 종속성이 복잡한 웹이 생성 되므로, 사용자가 웹 페이지를 방문할 때 파일에 대한 요청 수를 줄이는 것을 목표로 웹 종속성을 해결하고 파일(또는 모듈)을 브라우저에 최적화된 번들로 병합(또는 패키징) 하는 프로세스이다.

출처 - Next.js

 

 

 

 

Code Splitting

Next.js에서는 해당 페이지를 실행하는 데 필요한 코드만 로드하여 애플리케이션의 초기 로드 시간 개선등을 위해 디렉토리 내의 'page/' 안에 있는 각 파일들을 빌드 단계에서 자체 JS번들로 자동 코드 분할을 기본적으로 지원한다.

출처 - Next.js

 

 

 

 

 

 

 

 

 

출처)

NEXT.JS

React

About Next.js