[Next.js] Next.js 프레임워크의 기능 및 사용 이유

Next.js 란 무엇인가

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공합니다. 

 

+ 확장 가능하고 유지 보수가 쉬운 웹 애플리케이션을 만들기 위한 여러 가지 방법을 제공

 

최근 몇 년 사이 웹 개발 분야에는 많은 변화가 있었습니다. 최신 자바스크립트 프레임워크들이 개발되기 전에는 동적 웹 애플리케이션을 만들기가 어렵고 복잡했습니다. 수없이 많은 라이브러리를 사용해야 했으며 원하는 대로 작동하도록 설정하는 것도 버거웠습니다.

 

Angular, React, Vue와 같은 프레임워크가 등장하면서 웹 개발 분야는 급속도로 변하기 시작했으며 프론트엔드 웹 개발 분야에서 여러 혁신적인 아이디어를 이끌어냈습니다.

 

다만 리액트에는 한 가지 큰 문제점이 있습니다. 바로 리액트가 기본적으로 클라이언트 사이드에서만 작동한다는 점입니다.

 

사용자의 웹 브라우저에서만 실행되기 때문에 리액트를 사용한 웹 애플리케이션은 검색 엔진 최적화search engine optimization(SEO)의 효과를 거의 볼 수 없으며, 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 애플리케이션 실행 초기에 성능 부담이 생깁니다.

 

웹 앱을 완전히 표시하려면 브라우저가 전체 웹 애플리케이션 번들을 다운로드한 다음 그 내용을 분석하고 코드를 실행해서 결과를 얻어야 하기 때문입니다. 그래서 아주 큰 웹 애플리케이션에서는 첫 화면을 표시하기까지 수 초가 소요되기도 합니다.

 

이 문제를 해결하기 위해 많은 개발자들이 웹 애플리케이션을 서버에서 미리 렌더링해두는 방법을 연구하기 시작했습니다. 

 

서버 사이드 렌더링을 사용할 수 있다면 리액트 앱을 순수한 HTML 페이지로 미리 렌더링해둔 다음 브라우저가 이를 다운로드하여 즉각 화면에 표시하고, 클라이언트에서 자바스크립트 번들을 다 받으면 사용자가 웹 앱과 상호 작용할 수 있게 됩니다.

 

이러한 연구의 결과로 Vercel이 Next.js를 만들었습니다. Next.js는 첫 릴리스부터 리액트가 제공하지 않는 다양한 기능을 제공하면서 리액트 웹 앱 개발 분야의 판도를 뒤흔들어 놓았습니다. 

 

코드 분할code splitting, 서버 사이드 렌더링, 파일 기반 라우팅, 경로 기반 프리페칭pre-fetching 등으로 말이죠.

 

이제 개발자는 Next.js로 클라이언트와 서버 모두에서 아주 복잡한 작업을 별다른 노력 없이 쉽게 구현할 수 있게 되었습니다.

 

이 외에도 현재 Next.js는 다음과 같은 기능을 제공합니다.

• 정적 사이트 생성
• 증분 정적 콘텐츠 생성
• 타입스크립트에 대한 기본 지원
• 자동 폴리필polyfill 적용
• 이미지 최적화
• 웹 애플리케이션의 국제화 지원
• 성능 분석

 

Next.js는 현재 넷플릭스, 트위치, 틱톡, 훌루, 나이키, 우버, 엘라스틱과 같은 유명 기업에서 사용되고 있습니다. 

어떤 회사들이 Next.js를 사용하는지 궁금하다면 웹 사이트를 참고하기 바랍니다.

 

Next.js는 리액트가 규모에 상관없이 다양한 웹 애플리케이션을 만들 수 있는 훌륭한 도구라는 점을 널리 보여주고 있으며, 그 결과 아주 큰 회사든 스타트업이든 가릴 것 없이 Next.js를 사용하고 있습니다.

 

React에서 Next.js로

리액트를 사용해본 경험이 있다면 Next.js로 웹 사이트를 만드는 것은 어렵지 않습니다. Next.js의 기본 철학은 리액트와 거의 같습니다. 

 

‘설정보다 관습convention-over-configuration’이라는 취지로 만들어졌기 때문에 Next.js의 특정 기능을 사용하고자 한다면 복잡한 설정 없이도 해당 기능을 사용할 수 있는 쉬운 방법을 찾을 수 있습니다. 

💡 설정보다 관습(convention-over-configuration) : 개발자가 해야 할 결정의 수를 줄여주면서도 유연성은 잃지 않도록 하는 소프트웨어 설계 패러다임입니다.

 

예를 들어 단일 Next.js 애플리케이션에서 별도의 설정 파일을 만들지 않고도 어떤 페이지에 서버 사이드 렌더링을 적용하고 어떤 페이지에 정적 페이지 생성을 적용할지 지정할 수 있는 것이죠. 

 

각 페이지에서 특정 함수를 export하면 Next.js가 나머지 일을 알아서 처리합니다. 

 

리액트와 Next.js의 가장 큰 차이점은 무엇일까요? 리액트는 자바스크립트 라이브러리이고 Next.js는 프레임워크라는 점입니다. 

 

Next.js는 클라이언트와 서버에서 실행할 수 있는 코드에 풍부하고 다양한 기능을 제공하여 웹 애플리케이션을 만들 수 있게 해줍니다. 

 

서버 사이드 렌더링 페이지나 정적으로 생성된 페이지 모두 Node.js에서 실행되기 때문에 fetch, window, document와 같이 웹 브라우저에서 제공하는 전역 객체나 canvas 같은 HTML 요소에는 접근할 수 없습니다.(Next.js 페이지를 만들 때는 이 점을 꼭 기억하기 바랍니다.)

 

전역 변수나 HTML 요소를 반드시 사용해야 하는 컴포넌트를 다루는 방법도 Next.js에서 제공합니다.

 

반면 fs, child_process와 같이 Node.js에서만 사용할 수 있는 라이브러리나 API를 사용하려는 경우, Next.js는 각 요청별 데이터를 클라이언트로 보내기 전에 서버 사이드 코드를 실행하거나 페이지 생성 시점에 해당 코드를 처리하는 방식을 지원합니다. 

 

어떤 방식으로 지원하는지는 각 페이지가 어떤 렌더링 방식을 사용하느냐에 따라 결정됩니다.

클라이언트 사이드 앱을 만들고자 할 경우에도 리액트의 create-react-app 대신 Next.js를 사용할 수 있습니다. 

 

Next.js는 프로그레시브 웹 앱이나 오프라인 웹 앱 역시 쉽게 만들 수 있을 뿐만 아니라 많은 내장 컴포넌트와 최적화 기능을 사용할 수 있다는 장점도 있습니다.

 

참고 :

https://m.hanbit.co.kr/channel/category/category_view.html?cms_code=CMS7641364152 

리액트에서 Next.js로, 넥스트JS의 특장점과 빠르게 시작하는 법 알아보기