jQuery에서 Next.js로 마이그레이션하는 방법

게시 됨: 2022-03-10
빠른 요약 ↬ 이 기사에서는 jQuery 프레임워크를 사용하는 웹 애플리케이션을 마이그레이션하고 시장에서 가장 멋진 React 프레임워크인 Next.js를 사용하는 방법에 대한 다양한 접근 방식과 전략을 자세히 살펴봅니다.

jQuery가 2006년에 등장했을 때 많은 개발자와 조직이 프로젝트에 jQuery를 채택하기 시작했습니다. 라이브러리가 제공 하는 DOM을 확장하고 조작 할 가능성이 크며 jQuery 메인 라이브러리에서 지원하지 않는 작업을 수행해야 하는 경우 페이지에 동작을 추가할 수 있는 많은 플러그인도 있습니다. 개발자의 많은 작업을 단순화했으며 그 순간 JavaScript는 웹 응용 프로그램 또는 단일 페이지 응용 프로그램을 만드는 강력한 언어가 되었습니다.

jQuery 인기 의 결과는 오늘날에도 여전히 측정 가능합니다. 세계에서 가장 인기 있는 웹 사이트의 거의 80%가 여전히 jQuery를 사용합니다. jQuery가 인기 있는 몇 가지 이유는 다음과 같습니다.

  • DOM 조작을 지원합니다.
  • CSS 조작을 제공합니다.
  • 모든 웹 브라우저에서 동일하게 작동합니다.
  • HTML 이벤트 메서드를 래핑합니다.
  • AJAX 호출을 쉽게 생성할 수 있습니다.
  • 효과와 애니메이션을 사용하기 쉽습니다.

수년에 걸쳐 JavaScript는 많이 바뀌었고 과거에는 없었던 몇 가지 기능을 추가했습니다. ECMAScript의 재정의 및 발전으로 jQuery가 제공하는 일부 기능이 표준 JavaScript 기능에 추가되었고 모든 웹 브라우저에서 지원되었습니다. 이러한 일이 발생하면서 jQuery가 제공하는 일부 동작은 더 이상 필요하지 않게 되었습니다. 일반 JavaScript로 동일한 작업을 수행할 수 있기 때문입니다.

한편, 사용자 인터페이스를 디자인하고 생각하는 새로운 방식이 등장하기 시작했습니다. React, Angular 또는 Vue와 같은 프레임워크를 통해 개발자는 재사용 가능한 기능 구성 요소를 기반으로 웹 애플리케이션을 만들 수 있습니다. 즉, React는 메모리의 DOM 표현인 "가상 DOM"과 함께 작동하는 반면 jQuery는 성능이 떨어지는 방식으로 DOM과 직접 상호 작용합니다 . 또한 React는 상태 관리와 같은 특정 기능의 개발을 용이하게 하는 멋진 기능을 제공합니다. 이 새로운 접근 방식과 Single Page Applications의 인기로 인해 많은 개발자들이 웹 애플리케이션 프로젝트에 React를 사용하기 시작했습니다.

그리고 프론트 엔드 개발은 다른 프레임워크 위에 생성된 프레임워크로 훨씬 더 발전했습니다. 예를 들어 Next.js가 그렇습니다. 아시다시피 이것은 정적 페이지를 생성하고, 서버 측 렌더링 페이지를 생성하고, 동일한 애플리케이션에서 두 유형을 결합하는 기능을 제공하는 오픈 소스 React 프레임워크입니다. 또한 동일한 앱 내에서 서버리스 API를 생성할 수 있습니다.

흥미로운 시나리오가 있습니다. 이러한 프론트엔드 프레임워크가 수년에 걸쳐 점점 더 대중화되고 있지만 jQuery는 여전히 대다수의 웹 페이지에서 채택되고 있습니다. 이런 일이 일어나는 이유 중 하나는 WordPress를 사용하는 웹 사이트의 비율이 정말 높고 jQuery가 CMS에 포함되어 있기 때문 입니다. 또 다른 이유는 Bootstrap과 같은 일부 라이브러리는 jQuery에 대한 종속성이 있고 이를 사용하는 즉시 사용 가능한 템플릿과 해당 플러그인이 있기 때문입니다.

그러나 jQuery를 사용하는 웹 사이트의 양이 이렇게 많은 또 다른 이유는 완전한 웹 애플리케이션을 새 프레임워크로 마이그레이션하는 비용입니다. 쉽지도 않고 저렴하지도 않고 시간도 많이 걸립니다. 그러나 결국 새로운 도구와 기술로 작업하면 더 많은 지원, 커뮤니티 지원, 더 나은 개발자 경험, 사람들이 프로젝트에 쉽게 참여하게 하는 등 많은 이점을 얻을 수 있습니다.

React 또는 Next.js와 같은 프레임워크가 우리에게 부과하는 아키텍처를 따를 필요가 없는(또는 원하지 않는) 많은 시나리오가 있으며 이는 괜찮습니다. 그러나 jQuery는 더 이상 필요하지 않은 많은 코드와 기능을 포함하는 라이브러리입니다. jQuery가 제공하는 많은 기능은 최신 JavaScript 기본 기능 을 사용하여 수행할 수 있으며 아마도 더 성능이 좋은 방법일 것입니다.

jQuery 사용을 중단하고 웹 사이트를 React 또는 Next.js 웹 애플리케이션으로 마이그레이션 하는 방법에 대해 논의해 보겠습니다.

마이그레이션 전략 정의

도서관이 필요한가요?

웹 애플리케이션의 기능에 따라 프레임워크가 실제로 필요하지 않은 경우도 있을 수 있습니다. 앞서 언급했듯이 최신 웹 표준 버전에는 몇 가지 jQuery 기능이 포함되었습니다(또는 최소한 매우 유사한 기능). 따라서 다음을 고려합니다.

  • jQuery의 $(selector) 패턴은 querySelectorAll() 로 대체할 수 있습니다.

대신:

 $("#someId");

우리는 할 수 있습니다:

 document.querySelectorAll("#someId");
  • CSS 클래스를 조작하려는 경우 이제 Element.classList 속성이 있습니다.

대신:

 $(selector).addClass(className);

우리는 할 수 있습니다:

 element.classList.add(className);
  • 많은 애니메이션은 JavaScript를 구현하는 대신 CSS를 사용하여 직접 수행할 수 있습니다.

대신:

 $(selector).fadeIn();

우리는 할 수 있습니다:

 element.classList.add('show'); element.classList.remove('hide');

CSS 스타일을 적용합니다.

 .show { transition: opacity 400ms; } .hide { opacity: 0; }
  • 이벤트를 처리하려면 이제 addEventListener 기능이 있습니다.

대신:

 $(selector).on(eventName, eventHandler);

우리는 할 수 있습니다:

 element.addEventListener(eventName, eventHandler);
  • jQuery Ajax를 사용하는 대신 XMLHttpRequest 를 사용할 수 있습니다.

대신:

 $.ajax({ type: 'POST', url: '/the-url', data: data });

우리는 할 수 있습니다:

 var request = new XMLHttpRequest(); request.open('POST', '/the-url', true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.send(data);

자세한 내용은 바닐라 JavaScript 코드 조각을 참조하십시오.

구성 요소 식별

애플리케이션에서 jQuery를 사용하는 경우 웹 서버에서 생성되는 일부 HTML 콘텐츠와 페이지에 대화형 기능을 추가하는 JavaScript 코드가 있어야 합니다. 이벤트가 발생할 때 DOM을 조작하는 페이지 로드 시 이벤트 핸들러를 추가 하고 있을 것입니다. 아마도 CSS나 요소의 스타일을 업데이트할 것입니다. 또한 백엔드 서비스를 호출하여 페이지의 DOM에 영향을 미치거나 다시 로드할 수 있는 작업을 실행할 수 있습니다.

아이디어는 페이지에 있는 JavaScript 코드를 리팩토링하고 React 구성 요소를 빌드하는 것입니다. 이것은 우리가 관련 코드를 결합하고 더 큰 구성의 일부가 될 요소를 구성하는 데 도움이 될 것입니다. 이렇게 함으로써 우리는 또한 우리 애플리케이션의 상태를 더 잘 처리할 수 있을 것입니다. 애플리케이션의 프론트엔드를 분석할 때 특정 작업 전용 부분으로 나누어 이를 기반으로 구성 요소를 생성할 수 있습니다.

버튼이 있는 경우:

 <button>Click</button>

다음 논리로:

 var $btnAction = $("#btn-action"); $btnAction.on("click", function() { alert("Button was clicked"); });

React Component로 마이그레이션할 수 있습니다.

 import React from 'react'; function ButtonComponent() { let handleButtonClick = () => { alert('Button clicked!') } return <button onClick={handleButtonClick}>Click</button> }

그러나 우리의 애플리케이션이 작동하고 사용되고 있고 영향을 미치고 싶지 않기 때문에 마이그레이션 프로세스가 어떻게 수행될 것인지도 평가해야 합니다.

좋은 마이그레이션

좋은 마이그레이션은 애플리케이션의 모든 부분이 새로운 프레임워크나 기술로 완전히 마이그레이션되는 것입니다. 이것은 모든 부분을 동기화 상태로 유지하고 통합 도구와 고유한 참조 버전을 사용하기 때문에 애플리케이션에 이상적인 시나리오입니다.

훌륭하고 완전한 마이그레이션에는 일반적으로 앱 코드의 완전한 재작성이 포함되며 이는 의미가 있습니다. 앱을 처음부터 빌드하는 경우 새 코드로 어떤 방향을 택할지 결정할 가능성이 있습니다. 우리는 기존 시스템과 워크플로에 대한 새로운 관점을 사용할 수 있고, 웹 애플리케이션을 처음 만들 때보다 더 완벽하게 지금 이 순간에 갖고 있는 지식으로 완전히 새로운 앱을 만들 수 있습니다.

그러나 완전한 재작성에는 몇 가지 문제가 있습니다. 우선 많은 시간이 필요합니다. 응용 프로그램이 클수록 다시 작성하는 데 더 많은 시간이 필요합니다. 또 다른 문제는 필요한 작업량과 개발자의 양입니다. 그리고 점진적인 마이그레이션을 수행하지 않으면 애플리케이션을 사용할 수 없는 시간에 대해 생각해야 합니다.

일반적으로 소규모 프로젝트, 자주 변경되지 않는 프로젝트 또는 비즈니스에 그다지 중요하지 않은 애플리케이션으로 완전한 재작성을 수행할 수 있습니다.

빠른 마이그레이션

또 다른 접근 방식은 애플리케이션을 부분 또는 조각으로 나누는 것입니다. 앱을 부분적으로 마이그레이션하고 준비가 되면 해당 부분을 릴리스합니다. 따라서 사용자가 사용할 수 있고 기존 프로덕션 앱과 공존하는 애플리케이션의 일부를 마이그레이션했습니다.

이 점진적인 마이그레이션을 통해 전체 애플리케이션이 다시 작성될 때까지 기다릴 필요가 없기 때문에 사용자에게 더 빠른 방법으로 프로젝트의 개별 기능을 제공합니다. 또한 사용자로부터 더 빠른 피드백을 받아 버그나 문제를 더 일찍 감지할 수 있습니다.

그러나 점진적인 마이그레이션으로 인해 다른 도구, 라이브러리, 종속성 및 프레임워크를 갖게 됩니다. 또는 동일한 도구에서 다른 버전을 지원해야 할 수도 있습니다. 이 확장된 지원으로 인해 애플리케이션에 충돌이 발생할 수 있습니다.

마이그레이션된 각 부분이 다른 방식으로 작동할 수 있지만 전역 매개변수를 시스템에 설정하는 코드의 영향을 받기 때문에 전역 범위에서 정책을 적용하는 경우 문제가 발생할 수도 있습니다. CSS 스타일 지정을 위한 캐스케이드 로직의 사용이 그 예입니다.

최신 버전의 기능을 나중에 생성된 모듈에 추가했기 때문에 웹 애플리케이션에서 다양한 버전의 jQuery로 작업한다고 상상해 보십시오. 모든 앱을 최신 버전의 jQuery로 마이그레이션하는 것이 얼마나 복잡할까요? 이제 Next.js와 같이 완전히 다른 프레임워크로 마이그레이션하는 동일한 시나리오를 상상해 보십시오. 복잡할 수 있습니다.

프랑켄슈타인 마이그레이션

Denys Mishunov는 이전 두 가지 접근 방식인 Frankenstein Migration을 최대한 활용하기 위해 이 두 가지 마이그레이션 아이디어에 대한 대안을 제시하는 기사를 Smashing Magazine에 썼습니다. 마이크로서비스와 웹 구성요소라는 두 가지 주요 구성요소로 마이그레이션 프로세스를 기반으로 합니다.

마이그레이션 프로세스는 따라야 할 단계 목록으로 구성됩니다.

1. 마이크로서비스 식별

앱 코드를 기반으로 하나의 작은 작업에 전념하는 독립적인 부분으로 나누어야 합니다. React 또는 Next.js 사용에 대해 생각하고 있다면 마이크로서비스의 개념을 우리가 가지고 있는 다른 구성 요소에 연결할 수 있습니다.

식료품 목록 응용 프로그램을 예로 생각해 보겠습니다. 구매할 물건 목록과 목록에 더 많은 물건을 추가하기 위한 입력이 있습니다. 따라서 앱을 작은 부분으로 분할하려면 "항목 목록" 구성 요소와 "항목 추가"에 대해 생각할 수 있습니다. 이렇게 하면 각 부분과 관련된 기능과 마크업을 서로 다른 React 구성 요소로 분리할 수 있습니다.

구성 요소가 독립적임을 확인하기 위해 앱에서 그 중 하나를 제거할 수 있어야 하고 다른 구성 요소는 영향을 받지 않아야 합니다. 서비스에서 마크업과 기능을 제거할 때 오류가 발생하면 구성 요소를 올바르게 식별하지 못하거나 코드가 작동하는 방식을 리팩토링해야 합니다.

2. 호스트-외계인 액세스 허용

"호스트"는 기존 애플리케이션입니다. "Alien"은 우리가 새로운 프레임워크로 만들기 시작할 것입니다. 둘 다 독립적으로 작동해야 하지만 Host에서 Alien으로의 액세스를 제공해야 합니다. 우리는 다른 애플리케이션을 중단하지 않고 두 애플리케이션 중 하나를 배포할 수 있어야 하지만 그들 사이의 통신은 유지해야 합니다.

3. 외계인 구성 요소 작성

새 프레임워크를 사용하여 호스트 애플리케이션의 서비스를 Alien 애플리케이션으로 다시 작성합니다. 컴포넌트는 앞에서 언급한 것과 동일한 독립성 원칙을 따라야 합니다.

식료품 목록의 예로 돌아가 보겠습니다. "항목 추가" 구성 요소를 식별했습니다. jQuery를 사용하면 구성 요소의 마크업이 다음과 같이 보일 것입니다.

 <input class="new-item" />

목록에 항목을 추가하는 JavaScript/jQuery 코드는 다음과 같습니다.

 var ENTER_KEY = 13; $('.new-item').on('keyup', function (e) { var $input = $(e.target); var val = $input.val().trim(); if (e.which !== ENTER_KEY || !val) { return; } // code to add the item to the list $input.val(''); });

그 대신 AddItem React 구성 요소를 만들 수 있습니다.

 import React from 'react' function AddItemInput({ defaultText }) { let [text, setText] = useState(defaultText) let handleSubmit = e => { e.preventDefault() if (e.which === 13) { setText(e.target.value.trim()) } } return <input type="text" value={text} onChange={(e) => setText(e.target.value)} onKeyDown={handleSubmit} /> }

4. Alien 서비스 주변에 웹 구성 요소 래퍼 작성

방금 만든 Alien 서비스를 가져와 렌더링하는 래퍼 구성 요소를 만듭니다. 아이디어는 Host 앱과 Alien 앱 사이에 다리를 만드는 것입니다. 새로운 React 구성 요소를 복사하고 작동하게 해야 하므로 현재 애플리케이션에서 작동하는 JavaScript 코드를 생성하기 위해 패키지 번들러가 필요할 수 있음을 명심하십시오.

식료품 목록 예제에 따라 호스트 프로젝트에서 AddItem-wrapper.js 파일을 만들 수 있습니다. 이 파일에는 이미 생성된 AddItem 구성 요소를 래핑하고 이를 사용하여 사용자 정의 요소를 생성하는 코드가 포함됩니다.

 import React from "../alien/node_modules/react"; import ReactDOM from "../alien/node_modules/react-dom"; import AddItem from "../alien/src/components/AddItem"; class FrankensteinWrapper extends HTMLElement { connectedCallback() { const appWrapper = document.createElement("div"); appWrapper.classList.add("grocerylistapp"); ... ReactDOM.render( <HeaderApp />, appWrapper ); … } } customElements.define("frankenstein-add-item-wrapper", FrankensteinWrapper);

구성 요소가 작동하려면 가져와야 하므로 Alien 응용 프로그램 폴더에서 필요한 노드 모듈과 구성 요소를 가져와야 합니다.

5. 호스트 서비스를 웹 구성 요소로 교체

이 래퍼 구성 요소는 호스트 응용 프로그램의 구성 요소를 대체하며 사용을 시작합니다. 따라서 프로덕션의 응용 프로그램은 호스트 구성 요소와 Alien 래핑된 구성 요소가 혼합되어 있습니다.

예제 호스트 애플리케이션에서 다음을 대체해야 합니다.

 <input class="new-item" />

와 함께

 <frankenstein-add-item-wrapper></frankenstein-add-item-wrapper> ... <script type="module" src="js/AddItem-wrapper.js"></script>

6. 헹구고 반복

식별된 마이크로 서비스 각각에 대해 3, 4, 5단계를 수행합니다.

7. 외계인으로 전환

이제 호스트는 Alien 응용 프로그램에서 만든 모든 웹 구성 요소를 포함하는 래퍼 구성 요소 모음입니다. 식별된 모든 마이크로 서비스를 변환하면 Alien 애플리케이션이 완료되고 모든 서비스가 마이그레이션되었다고 말할 수 있습니다. 이제 사용자에게 Alien 애플리케이션을 가리키기만 하면 됩니다.

Frankenstein 마이그레이션 방법은 Good 및 Fast 접근 방식의 조합으로 작동합니다. 전체 애플리케이션을 마이그레이션하지만 완료되면 다른 구성 요소를 릴리스합니다. 따라서 프로덕션에서 사용자가 더 빨리 사용하고 평가할 수 있습니다.

그러나 우리는 이 접근 방식으로 약간의 과도한 작업을 수행하고 있다는 점을 고려해야 합니다. Alien 응용 프로그램에 대해 만든 구성 요소를 사용하려면 호스트 응용 프로그램에 포함할 래퍼 구성 요소를 만들어야 합니다. 이로 인해 이러한 래퍼 요소에 대한 코드를 개발하는 데 시간을 할애할 수 있습니다. 또한 호스트 애플리케이션에서 이를 사용하여 코드 및 종속성을 복제하고 애플리케이션 성능에 영향을 미치는 코드를 추가합니다.

교살자 신청

우리가 취할 수 있는 또 다른 접근 방식은 Legacy Application Strangulation입니다. 우리는 기존 웹 애플리케이션의 가장자리를 식별하고 앱에 기능을 추가해야 할 때마다 이전 시스템이 "교살"될 때까지 새로운 프레임워크를 사용하여 수행합니다. 이 접근 방식은 앱을 마이그레이션하는 동안 실험할 수 있는 잠재적 위험을 줄이는 데 도움이 됩니다.

이 접근 방식을 따르려면 Frankenstein 마이그레이션에서와 같이 다른 구성 요소를 식별해야 합니다. 앱을 관련된 명령형 코드의 다른 조각으로 나눈 후에는 이를 새로운 React 구성 요소로 래핑합니다. 추가 동작을 추가하지 않고 기존 콘텐츠를 렌더링하는 React 구성 요소를 생성하기만 하면 됩니다.

더 자세한 설명을 위해 예를 살펴보겠습니다. 애플리케이션에 다음 HTML 코드가 있다고 가정합니다.

 <div class="accordion"> <div class="accordion-panel"> <h3 class="accordion-header">Item 1</h3> <div class="accordion-body">Text 1</div> </div> <div class="accordion-panel"> <h3 class="accordion-header">Item 2</h3> <div class="accordion-body">Text 2</div> </div> <div class="accordion-panel"> <h3 class="accordion-header">Item 3</h3> <div class="accordion-body">Text 3</div> </div>> </div>

그리고 이 JavaScript 코드(우리는 이미 jQuery 기능을 새로운 JavaScript 표준 기능으로 대체했습니다).

 const accordions = document.querySelectorAll(".accordion"); for (const accordion of accordions) { const panels = accordion.querySelectorAll(".accordion-panel"); for (const panel of panels) { const head = panel.querySelector(".accordion-header"); head.addEventListener('click', () => { for (const otherPanel of panels) { if (otherPanel !== panel) { otherPanel.classList.remove('accordion-expanded'); } } panel.classList.toggle('accordion-expanded'); }); } }

이것은 JavaScript용 accordion 구성 요소의 일반적인 구현입니다. 여기에서 React를 소개하고 싶기 때문에 기존 코드를 새로운 React 구성 요소로 래핑해야 합니다.

 function Accordions() { useEffect(() => { const accordions = document.querySelectorAll(".accordion") for (const accordion of accordions) { const panels = accordion.querySelectorAll(".accordion-panel") for (const panel of panels) { const head = panel.querySelector(".accordion-header") head.addEventListener("click", () => { for (const otherPanel of panels) { if (otherPanel !== panel) { otherPanel.classList.remove("accordion-expanded") } } panel.classList.toggle("accordion-expanded") }); } } }, []) return null } ReactDOM.render(<Accordions />, document.createElement("div"))

구성 요소가 새로운 동작이나 기능을 추가하지 않습니다. 컴포넌트가 문서에 마운트되어 있기 때문에 useEffect 를 사용합니다. 이것이 후크가 구성 요소를 반환할 필요가 없기 때문에 함수가 null을 반환하는 이유입니다.

따라서 기존 앱에 새로운 기능을 추가하지 않았지만 동작을 변경하지 않고 React를 도입했습니다. 이제부터 코드에 새로운 기능이나 변경 사항을 추가할 때마다 새로 선택한 프레임워크를 사용하여 수행할 것입니다.

클라이언트 측 렌더링, 서버 측 렌더링 또는 정적 생성?

Next.js는 웹 애플리케이션의 각 페이지를 어떻게 렌더링할지 선택할 수 있는 가능성을 제공합니다. React가 이미 제공하는 클라이언트 측 렌더링을 사용하여 사용자의 브라우저에서 직접 콘텐츠를 생성할 수 있습니다. 또는 서버 측 렌더링을 사용하여 서버에서 페이지 콘텐츠를 렌더링할 수 있습니다. 마지막으로 정적 생성을 사용하여 빌드 시 페이지의 콘텐츠를 만들 수 있습니다.

우리 애플리케이션에서는 자바스크립트 라이브러리나 프레임워크와 상호작용을 시작하기 전에 페이지 로드 시 코드를 로드하고 렌더링해야 합니다. ASP.NET, PHP 또는 Node.js와 같은 서버 측 렌더링 프로그래밍 언어 또는 기술을 사용하고 있을 수 있습니다. Next.js 기능을 활용하고 현재 렌더링 방법을 Next.js 서버 측 렌더링 방법 으로 바꿀 수 있습니다. 이렇게 하면 선택한 프레임워크의 우산 아래에서 작동하는 동일한 프로젝트 내에서 모든 동작을 유지합니다. 또한 페이지에 필요한 모든 콘텐츠를 생성하는 동일한 코드 내에서 기본 페이지와 React 구성 요소의 논리를 유지합니다.

대시보드 페이지를 예로 들어 보겠습니다. 사용자의 웹 브라우저에서 React를 사용하여 생성할 필요 없이 로드 시 페이지의 모든 초기 마크업을 서버에서 생성할 수 있습니다.

 const DashboardPage = ({ user }) => { return ( <div> <h2>{user.name}</h2> // User data </div> ) } export const getServerSideProps = async ({ req, res, params }) => { return { props: { user: getUser(), }, } }, }) export default DashboardPage

페이지 로드 시 렌더링하는 마크업이 예측 가능하고 빌드 시 검색할 수 있는 데이터를 기반으로 하는 경우 정적 생성이 좋은 선택이 될 것입니다. 빌드 시 정적 자산을 생성 하면 애플리케이션이 더 빠르고, 더 안전하고, 확장 가능하고, 유지 관리가 더 쉬워집니다. 그리고 앱 페이지에서 동적 콘텐츠를 생성해야 하는 경우 React의 클라이언트 측 렌더링을 사용하여 서비스 또는 데이터 소스에서 정보를 검색할 수 있습니다.

많은 블로그 게시물이 있는 블로그 사이트가 있다고 상상해 보십시오. 정적 생성을 사용하는 경우 Next.js 애플리케이션에서 일반 [blog-slug].js 파일을 생성할 수 있으며 다음 코드를 추가하면 빌드 시 블로그 게시물에 대한 모든 정적 페이지를 생성할 수 있습니다.

 export const getStaticPaths = async () => { const blogPosts = await getBlogPosts() const paths = blogPosts.map(({ slug }) => ({ params: { slug, }, })) return { paths, fallback: false, } } export const getStaticProps = async ({ params }) => { const { slug } = params const blogPost = await getBlogPostBySlug(slug) return { props: { data: JSON.parse(JSON.stringify(blogPost)), }, } }

API 경로를 사용하여 API 생성

Next.js가 제공하는 훌륭한 기능 중 하나는 API 경로를 생성할 수 있다는 것입니다. 그들과 함께 Node.js를 사용하여 자체 서버리스 기능을 만들 수 있습니다. NPM 패키지를 설치하여 기능을 확장할 수도 있습니다. 이것에 대한 멋진 점은 API가 프론트엔드와 동일한 프로젝트/앱에 남게 되므로 CORS 문제가 발생하지 않는다는 것입니다.

jQuery AJAX 기능을 사용하여 웹 애플리케이션에서 호출되는 API를 유지 관리하는 경우 API Routes 를 사용하여 이를 대체할 수 있습니다. 이렇게 하면 앱의 모든 코드베이스를 동일한 리포지토리에 유지하고 애플리케이션 배포를 더 간단하게 만들 것입니다. 타사 서비스를 사용하는 경우 API 경로를 사용하여 외부 URL을 "마스킹"할 수 있습니다.

페이지에서 사용하는 데이터를 반환하는 API 경로 /pages/api/get/[id].js 가 있을 수 있습니다.

 export default async (req, res) => { const { id } = req.query try { const data = getData(id) res.status(200).json(data) } catch (e) { res.status(500).json({ error: e.message }) } }

그리고 우리 페이지의 코드에서 호출하십시오.

 const res = await fetch(`/api/get/${id}`, { method: 'GET', }) if (res.status === 200) { // Do something } else { console.error(await res.text()) }

Netlify에 배포

Netlify는 웹 애플리케이션을 자동화, 관리, 구축, 테스트, 배포 및 호스팅하는 데 사용할 수 있는 완전한 플랫폼입니다. 최신 웹 애플리케이션 개발을 더 쉽고 빠르게 만드는 많은 기능이 있습니다. 일부 Netlify 하이라이트는 다음과 같습니다.

  • 글로벌 CDN 호스팅 플랫폼,
  • 서버리스 기능 지원,
  • Github pull 요청을 기반으로 미리보기 배포,
  • 웹훅,
  • 즉각적인 롤백,
  • 역할 기반 액세스 제어.

Netlify는 Next.js 애플리케이션을 관리하고 호스팅할 수 있는 훌륭한 플랫폼이며, Netlify와 함께 웹 앱을 배포하는 것은 매우 간단합니다.

우선 Git 리포지토리에서 Next.js 앱 코드를 추적 해야 합니다. Netlify는 GitHub(또는 우리가 선호하는 Git 플랫폼)에 연결하고 분기(커밋 또는 풀 요청)에 변경 사항이 도입될 때마다 자동 "빌드 및 배포" 작업이 트리거됩니다.

앱 코드가 포함된 Git 리포지토리가 있으면 "Netlify 사이트"를 만들어야 합니다. 이를 위해 두 가지 옵션이 있습니다.

  1. Netlify CLI 사용
    CLI( npm install -g netlify-cli )를 설치하고 Netlify 계정( ntl login )에 로그인한 후 애플리케이션의 루트 디렉토리로 이동하여 ntl init 를 실행하고 단계를 따를 수 있습니다.
  2. Netlify 웹 앱 사용
    https://app.netlify.com/start로 이동해야 합니다. Git 공급자에 연결하고 목록에서 애플리케이션의 리포지토리를 선택하고 일부 빌드 옵션을 구성하고 배포합니다.

두 방법 모두에 대해 빌드 명령이 next build 이고 배포할 디렉터리가 out 임을 고려해야 합니다.

마지막으로 Essential Next.js 플러그인이 자동으로 설치되어 API 경로, 동적 경로 및 미리보기 모드를 배포하고 사용할 수 있습니다. 그게 전부입니다. 빠르고 안정적인 CDN 호스팅 서비스에서 Next.js 애플리케이션을 실행하고 있습니다.

결론

이 기사에서는 jQuery 라이브러리를 사용하여 웹 사이트를 평가하고 React 및 Next.js와 같은 새로운 프론트엔드 프레임워크와 비교했습니다. 우리는 이점이 있는 경우 새로운 도구로 마이그레이션을 시작할 수 있는 방법을 정의했습니다. 다양한 마이그레이션 전략을 평가했고 Next.js 웹 애플리케이션 프로젝트로 마이그레이션할 수 있는 시나리오의 몇 가지 예를 보았습니다. 마지막으로 Next.js 애플리케이션을 Netlify에 배포하고 실행하는 방법을 보았습니다.

추가 읽을거리 및 리소스

  • Frankenstein 마이그레이션: 프레임워크 불가지론적 접근
  • GitHub.com 프론트엔드에서 jQuery 제거
  • Next.js 시작하기
  • Netlify에 Next.js 사이트를 배포하는 방법
  • Netlify 블로그의 Next.js 기사