Next.js는 무엇이며 2022년에 왜 그리고 어떻게 사용합니까?

React로 최신 JavaScript 애플리케이션을 작업하는 것은 클라이언트 측에서 모든 콘텐츠를 렌더링하는 데 몇 가지 문제를 감지할 때까지 능숙합니다. 정적 사전 렌더링이라고도 하는 서버 렌더링은 이러한 문제를 해결합니다. Next.Js는 사용자가 모든 것을 직접적으로 수행할 수 있도록 하는 React 프레임워크이지만 이에 국한되지 않습니다. React 프로젝트를 위한 단일 명령, 구성이 필요 없는 도구 체인으로 옹호됩니다. 여기에는 주로 Mac, Windows 및 Linux와 같은 다양한 플랫폼을 위한 매력적이고 매우 동적이고 대화식이며 성능이 뛰어난 웹 응용 프로그램을 설계하는 작업이 포함됩니다.

그러나 프레임워크는 정확히 어떻게 작동합니까? Next.js와 React가 무엇이고 어떻게 도움이 되는지 알아보는 시간을 갖도록 합시다.

먼저 Next.js는 무엇입니까?

Next.js는 사용자가 단일 페이지 자바스크립트 앱을 만들 수 있게 해주는 React 프레임워크입니다. 이 프레임워크는 클라이언트의 앱과 개발 팀 모두에게 다양한 이점을 제공합니다. 사용자는 로드하는 데 밀리초보다 오래 걸리는 웹 사이트와 앱이 우리의 기대를 충족시키지 못하기 때문에 점점 짜증이 날 수 있습니다. Next.js는 널리 퍼져 있으며 여러 가지 이유로 훌륭한 선택입니다. 대부분은 속도와 성능과 관련이 있습니다.

핵심 기능:

• 풍부한 사용자 경험
• 뛰어난 성능
• 더 빠른 기능 개발

Next.js의 렌더링 방법

렌더링은 사용자가 React로 작성된 코드를 HTML UI 표현으로 변환할 수 있게 해주는 피할 수 없는 단위입니다. 렌더링은 클라이언트와 서버에서 수행할 수 있으며 빌드 시 요청이 이루어지기 전이나 런타임 시 각 요청이 이루어진 후에 발생할 수 있습니다.

ㅏ. 서버 측 렌더링(SSR)

SSR은 개발자가 서버의 HTML 파일을 완전히 렌더링된 HTML 클라이언트 페이지로 변환할 수 있도록 하는 응용 프로그램의 기능입니다. SSR을 솔루션으로 사용할 때의 핵심 이점은 개발자가 동일한 코드를 사용하여 사용자 지정 데이터를 사용하면서 더 빠른 사용자 경험을 제공할 수 있다는 것입니다. SSR은 서버의 안정적인 인터넷 연결을 활용하면서 데이터를 가져오고 사용자 정의 콘텐츠로 웹 페이지를 미리 채울 수 있습니다. 예를 들어 개발자가 클라이언트에 전달해야 하는 하나의 index.html 파일이 있는 경우 개발자가 하나의 메타데이터 유형을 가질 가능성이 높습니다. 대부분 홈페이지 메타데이터일 가능성이 큽니다. 개발자가 다른 경로를 공유하려는 경우 컨텍스트화되지 않습니다. 따라서 사용자가 전 세계와 공유하고 싶은 관련 사용자 정보(설명 및 미리보기 사진)가 있는 다른 사이트에는 경로가 표시되지 않습니다.

비. 사전 렌더링

사전 렌더링은 작은 응용 프로그램에 대해 억제하거나 과도하게 사용되는 범용 응용 프로그램에 사용되는 필수 서버에 대한 매력적인 대안 또는 솔루션으로 작동합니다. 즉, 프리렌더링은 사용자 기기에서 자바스크립트로 처리하지 않고 서버에서 미리 HTML을 생성하는 것을 의미한다. 다른 페이지나 사이트의 일부 자료는 사용자가 다음에 방문할 때를 대비하여 사용자가 웹 페이지를 탐색할 때 미리 렌더링될 수 있습니다. 페이지의 일부 요소가 미리 렌더링되었기 때문에 새 페이지가 빠르게 로드됩니다.

예를 들어 브라우저에서 허용하는 경우 Google 검색 결과의 첫 번째 웹페이지는 항상 사전 렌더링됩니다. Google은 최상위 결과가 클릭될 것이라고 가정하므로 브라우저에서 해당 페이지를 렌더링하도록 요청합니다.

씨. 지연 렌더링(ISR)

Next.js 프레임워크 내에서 지연된 렌더링은 버전 9.4에서 처음 구현된 ISR(증분 정적 재생)이라고 합니다. 사전 렌더링과 유사합니다. 요청된 페이지만 초기 빌드 중에 렌더링되지 않습니다. 사용자가 요청할 때 렌더링됩니다. 사용자는 새 빌드가 발생하거나 지정된 캐시 시간 초과가 만료될 때까지 페이지의 미리 렌더링된 버전을 볼 수 있습니다. ISR은 개발자가 트래픽이 적은 페이지 생성을 연기할 수 있도록 하여 대규모 사이트를 구축하는 데 걸리는 시간을 줄이는 것을 목표로 합니다. 또한 사례별로 사용자 생성 콘텐츠를 기반으로 페이지를 렌더링할 수 있습니다.

Next.Js로 무엇을 만들 수 있고 언제 Next.Js를 사용할 수 있습니까?

Next.js를 사용하여 사용자는 다음과 같은 수많은 디지털 제품과 인터페이스를 구축할 수 있습니다.

• MVP(Minimum Viable Product): MVP는 초기 고객이 사용하기에 충분한 기능을 포함하고 제품 개발 주기에서 제품 아이디어에 유효성을 추가하는 제품 버전입니다. 예를 들어, MVP는 소프트웨어 산업에서 초기 사용자 피드백으로 제품을 변경하고 통합하는 데 있어 제품 팀을 지원할 수 있습니다.
• Jamstack 웹사이트: Jamstack은 웹 컨텍스트에서 새로운 표준 아키텍처라고 합니다. JAMstac은 Markup(JAM), JavaScript 및 API에서 파생된 최신 웹 개발 아키텍처입니다. JAMstack은 개별 기술로 지정할 수 없습니다. 반면에 앱과 웹 사이트를 구축하는 다른 기술입니다.
• 웹 포털: 포털은 여러 소스의 데이터를 단일 사용자 인터페이스로 수집하고 상황에 가장 적합한 방식으로 사용자에게 표시하는 웹 기반 플랫폼입니다. 단순한 웹 포털은 시간이 지남에 따라 디지털 고객 경험 노력을 가능하게 하는 시스템으로 성장했습니다.
• 단일 웹 페이지: 단일 페이지 웹 사이트(한 페이지 웹 사이트라고도 함)는 HTML 페이지가 하나만 있는 웹 사이트입니다. 연락처, 정보 또는 기능 페이지와 같은 추가 페이지는 없습니다.
• 정적 웹사이트: 정적 웹사이트(평면 또는 고정 페이지라고도 함)는 컴퓨터 브라우저에 저장된 그대로 정확하게 표시됩니다. 웹 서버에 보관된 HTML 코드 웹 페이지로 구성됩니다. 변경되지 않습니다. 모든 사이트 방문자에게 동일하거나 "정적"으로 유지됩니다.
• 정적 웹 사이트에는 웹 프로그래밍이나 데이터베이스 디자인이 필요하지 않습니다. 정적 웹 사이트는 가장 기본적이고 디자인하기 쉬우므로 소규모 사이트에 이상적입니다. 많은 정적 페이지를 유지 관리하는 것은 곧 시간 소모적이고 비효율적인 일이 될 수 있습니다.
• SaaS 제품: SaaS 제품은 중앙 공급자가 호스팅하는 인터넷 소프트웨어이며 모든 사용자에게 액세스를 허용합니다(예: 텍스트 확장기). DropBox, Google Apps 및 Canva는 SaaS 제품의 대표적인 예입니다.
• 전자 상거래 및 소매 웹 사이트: 웹 사이트를 통해 개인은 실제 상점이 아닌 온라인으로 실제 상품, 서비스 및 디지털 제품을 구매 및 판매할 수 있습니다. 비즈니스는 전자 상거래 웹 사이트를 통해 주문을 처리하고, 지불을 받고, 배송 및 물류를 관리하고, 고객 관리를 제공할 수 있습니다.
• 대시보드: 대시보드는 사용자 데이터의 시각적 표현 또는 표시입니다. 웹사이트에 표시되는 중요한 도구와 중요한 정보에 대한 링크를 제공합니다.
• 프로그레시브 웹 애플리케이션(PWA): PWA는 Javascript 및 HTML과 같은 표준 웹 기술을 사용하여 구축된 소프트웨어 애플리케이션입니다.
• 대화형 사용자 인터페이스: 사용자 인터페이스(UI)는 장치에서 인간과 컴퓨터 간의 상호 작용 및 통신 지점입니다. 디스플레이 화면, 키보드, 마우스 및 데스크탑 모양이 모두 이에 대한 예입니다. 또한 사용자가 프로그램이나 웹 사이트와 상호 작용하는 방식을 나타낼 수도 있습니다.
• 블로그: 블로그는 역순으로 된 온라인 일기, 정기적으로 업데이트되는 웹 페이지 또는 자료를 역순으로 표시하는 정보 제공 웹사이트이며 가장 최근 게시물이 맨 위에 표시됩니다. 작가 또는 작가 그룹이 특정 주제에 대한 생각을 표현할 수 있는 플랫폼입니다.

NEXT.JS와 JAMSTACK

Jamstack은 웹을 보다 반응적이고 안전하며 확장 가능하게 만드는 것을 목표로 하는 웹 아키텍처입니다. 개발자가 높이 평가하고 시간을 최대한 활용하는 데 도움이 되는 많은 도구와 워크플로를 기반으로 합니다. 사전 렌더링 및 분리는 사이트와 응용 프로그램에 보다 확실하고 안정적인 제공을 가능하게 하는 필수 원칙입니다. Jamstack은 Hugo, Jekyll, Gatsby, Nuxt, Huxo, Slate, Docsify, Gitbook, Docusaurus, Scully 등과 같은 다양한 정적 사이트 생성기와 함께 작동합니다. Next.js는 두 가지 모두 빠른 Jamstack 웹사이트를 만들기 위한 가장 인기 있는 React 프레임워크 중 하나가 되고 있습니다. SEO 친화적입니다. 헤드리스 CMS 및 전자 상거래 플랫폼과 잘 작동하여 탁월한 성능과 SEO 이점을 제공합니다.

Next.js 기능

• Hot Code Reloading: 코드 의 수정 사항이 저장되면 프로그램을 자동으로 다시 로드합니다.
• 자동 코드 분할: 이 기능은 코드에서 가져올 때마다 각 페이지를 번들로 제공하고 제공합니다. 웹 사이트에 더 이상 코드가 로드되지 않음을 나타냅니다.
• 생태계 호환성: JavaScript, Node 및 react는 Next.js 생태계와 호환됩니다.
• 서버 렌더링: HTML을 클라이언트에 전달하기 전에 서버에서 반응 구성 요소를 효율적으로 렌더링합니다.
• Styled-JSX: Styled-JSX styled-jsx 는 CSS를 코드에 바로 작성할 수 있는 JavaScript 확장입니다.
• 자동 프리페치: 뷰포트에 표시된 링크만 Next.js에서 프리페치하며, Intersection Observer API를 사용하여 이를 감지합니다. Next.js는 네트워크 연결이 느리거나 사용자가 (데이터 저장)을 켠 경우에도 프리페치를 비활성화합니다. 다음 검사를 기반으로 <link rel="preload"> 태그를 동적으로 삽입하여 후속 탐색을 위한 구성 요소를 다운로드합니다. Next.js는 JavaScript를 실행하지 않습니다. 그것은 단지 그것을 가져옵니다. 이렇게 하면 사용자가 링크를 클릭할 때까지 미리 가져온 페이지에서 요청할 수 있는 다른 항목을 다운로드할 수 없습니다.
• 정적 내보내기: 사용자는 next export 를 사용하여 다음을 내보낼 수 있습니다. Node.js 없이 정적 HTML에 대한 Js 응용 프로그램을 실행할 수 있습니다. JS 서버.
• TypeScript 지원: Next.js는 즉시 통합된 TypeScript 경험을 제공했습니다.

Next.js를 사용한 정적 사이트 생성

정적 웹사이트는 웹만큼이나 오래되었습니다. 그러나 JavaScript의 등장으로 정적 사이트는 시장에서 마찰을 일으켜 더욱 역동적으로 변했습니다. 빌드 시 웹 사이트 또는 앱을 어셈블하고 렌더링하는 것은 정적 생성입니다. 결과는 HTML 파일 자체와 JavaScript 및 CSS와 같은 자산을 포함하는 정적 파일 모음입니다. 우리가 알고 있듯이 JavaScript 기반 웹 앱은 런타임에 브라우저에서 React 또는 스크립트와 같은 라이브러리를 실행하여 작동합니다. 브라우저가 페이지를 수신하면 일반적으로 콘텐츠가 거의 없는 단순한 HTML로 구성됩니다. 그런 다음 스크립트가 로드되어 자료가 페이지로 당겨지도록 하며 이를 수화라고 합니다. Static Generation은 Next.js와 같은 기술을 사용하여 페이지가 브라우저에 표시되는 방식과 유사하지만 컴파일 시간에 페이지를 렌더링합니다. 이를 통해 초기 로드 시 전체 콘텐츠를 제공할 수 있습니다. 스크립트는 이 프로세스 동안 여전히 페이지를 수화하지만 이상적으로는 변경 사항이 적거나 변경 사항이 없습니다.

• Next.js는 가능한 경우 즉시 모든 페이지를 정적으로 생성하려고 시도합니다. Next.js는 앱에서 개발한 데이터 가져오기 프로세스를 감지하여 이를 수행합니다.
• Next.js는 getStaticProps 및 getServerSideProps 와 같은 API를 제공하여 사용자를 위한 앱을 빌드할 때의 사용량에 따라 데이터를 가져옵니다.
• 사용자가 getStaticProps 를 사용하는 경우 Next.js는 서버에서 해당 페이지를 렌더링해야 할 필요성을 찾습니다.
• Next.js는 서버 구성을 자동으로 처리하는 Vercel과 같은 배포 시스템과 함께 누군가가 서버에서 페이지를 요청할 때 모든 데이터를 로드합니다.
• 앱이 개발된 후 Next.js는 앱을 정적 파일로 별도의 디렉토리에 내보낼 수 있는 가능성을 제공합니다. 그러나 기본적으로 그렇게 하지 않습니다.
• 개발자는 앱을 먼저 빌드한 다음 다음 내보내기를 실행하여 앱을 기본적으로 out 디렉터리에서 정적 파일로 사용할 수 있게 합니다.

Next.js의 장점

사업주용

우리는 의심할 여지 없이 모든 비즈니스가 매출에 직접적인 영향을 미치는 전환율을 개선하기를 원한다고 말할 수 있습니다. 이러한 기업은 현재 고객과 잠재 고객 모두를 만족시키는 진정으로 독특한 사용자 경험을 제공하기 위해 새로운 기술을 채택해야 합니다. Next.JS는 웹사이트, 온라인 상점, 애플리케이션 및 기타 디지털 제품의 최종 디자인을 완벽하게 제어할 수 있도록 지원합니다. 또한 특정 전자 상거래 플랫폼 또는 콘텐츠 관리 시스템(CMS)과 관련된 테마 또는 플러그인에 의해 제한되지 않습니다.

• 적응성 및 반응성: 다음. js는 장치의 화면 크기에 따라 조정 가능한 웹 사이트 및 응용 프로그램을 제공합니다)
• 짧은 페이지 로딩 시간과 독특한 현장 경험.
• 데이터 보안: NextJS로 구축된 정적 웹 페이지는 데이터베이스, 종속성, 사용자 데이터 또는 기타 민감한 정보에 직접 액세스할 수 없습니다. 이는 데이터의 안전성을 보장합니다.
• 시장 출시 시간 단축: NextJS는 미리 정의된 여러 구성 요소 덕분에 MVP를 가능한 한 빨리 생성할 수 있는 훌륭한 방법입니다. 이 개발 방법을 사용하면 시간이나 비용을 낭비하지 않고 신속하게 피드백을 수집하고 제품을 변경할 수 있습니다.
• 완전한 옴니채널: NextJS 기반 웹사이트와 애플리케이션은 모든 장치에서 작동하므로 다양한 채널에서 제품과 서비스를 제공할 수 있습니다.
• 정적 웹 사이트는 본질적으로 빠르기 때문에 방문자와 고객은 NextJS 웹 사이트 및 웹 앱의 성능에 만족할 것입니다.
• 주문형 지원: React 및 NextJS가 대중화됨에 따라 개발자 수도 증가합니다. 결과적으로 필요한 수정을 하기 위해 에이전시나 프리랜서를 식별하는 것이 간단할 것입니다.

마케터용

마케팅 담당자가 Next.js에서 얻는 이점과 관련하여. 몇 가지 두드러진 이점은 전환율, SEO 효율성 및 유기적 트래픽 증가입니다.

• 더 높은 전환율 및 판매 수: 웹사이트와 온라인 애플리케이션이 빠르고 가벼우며 스캔하기 쉽고 모두 Google 순위를 높이는 데 도움이 되기 때문에 마케팅 담당자는 NextJS의 이점을 누릴 수 있습니다. Google 순위가 올라갈수록 유기적 트래픽이 증가하여 전환율과 판매율이 높아집니다.
• 고유한 사용자 경험: 이 이점은 경쟁이 치열한 글로벌 시장에서 차별화를 만들고 유지하기 위해 NFT.js를 사용하는 온라인 상점이 있는 전자 상거래 산업에서 더욱 두드러집니다.

개발자용

개발자들은 비용과 개발 시간을 줄이는 재사용 가능한 React 구성 요소에 대해 엄청나게 열광합니다.

• CSS 파서: CSS 파일은 개발자가 JavaScript 파일에서 가져올 수 있습니다. 새로운 기능은 CSS 처리를 개선하고 이전에 인식하지 못한 문제를 강조 표시했습니다.
• 빠른 새로 고침: React 구성 요소에 대한 수정 사항을 쉽게 볼 수 있습니다.
• 내장 이미지 구성 요소 및 자동 이미지 최적화: 이 기능은 자동으로 사진을 최적화합니다. 이제 WebP 이미지보다 20% 작은 AVIF 이미지를 지원합니다.
• 커뮤니티 지원: NextJS의 기여자 수는 인기에 따라 확장되고 있습니다. 개발자는 처음부터 시작하는 대신 이를 사용하여 이미 존재하는 솔루션을 찾을 수 있습니다.
• 서버 측 렌더링 SSR과 정적 사이트 생성 SSG의 하이브리드: 사용자가 단일 프로젝트에서 요청 시 또는 빌드 시 페이지를 미리 렌더링할 수 있습니다.
• 증분 정적 재생성: 웹 개발자는 트래픽이 다시 렌더링되어 유입될 때 백그라운드에서 기존 사이트를 업데이트할 수 있습니다. 이러한 방식으로 정적 콘텐츠가 동적이 될 수 있습니다.
• TypeScript 지원: 자동 TypeScript 구성 및 컴파일.
• Zero Config: NextJS는 컴파일 및 번들링을 처리합니다. 즉, 처음부터 생산적으로 구축되었습니다.
• 데이터 가져오기: 앱의 사용 사례에 따라 콘텐츠를 렌더링하는 여러 접근 방식이 사용됩니다. 여기에는 사전 렌더링을 위한 서버 측 렌더링 또는 정적 사이트 생성과 런타임에 콘텐츠를 업데이트하거나 생성하기 위한 점진적 정적 재생성이 모두 포함됩니다.
• API 경로: Node.js 서버리스 기능으로 API 엔드포인트를 생성하는 것은 간단합니다.
• 코드 분할: 앱의 첫 번째 페이로드 크기를 줄이는 데 필요한 경우에만 코드를 분할하고 구성 요소를 제공합니다.
• Rust 기반 컴파일러 SWC: Rust 기반 컴파일러 인 SWC는 프로덕션을 위해 JavaScript 코드를 변환하고 축소합니다. 다음. Node.js는 번들링 및 빌드를 최적화하여 로컬 새로 고침 속도가 3배, 프로덕션 빌드가 5배 빨라진 새로운 Rust 컴파일러가 특징입니다.
• 미들웨어: 요청이 완료되기 전에 사용자가 코드를 실행할 수 있도록 하여 사용자가 구성보다 코드를 사용할 수 있도록 합니다. 사용자는 요청 응답을 수정하고 사용자를 한 경로에서 다른 경로로 리디렉션할 수 있습니다.

NextJS의 단점

NextJS는 빠르게 발전하고 새로운 기능을 추가하고 있지만 여전히 다음과 같은 몇 가지 단점과 우려 사항이 있습니다.

• 유연성 비용: Next JS에는 내장된 프론트 페이지가 거의 없으므로 개발자가 처음부터 전체 프론트 엔드 레이어를 빌드해야 합니다.
• 개발 및 관리: 사용자가 NextJS를 사용하여 온라인 상점을 구축하고 싶지만 사내 개발 팀이 없는 경우 사용자는 개발 및 관리를 감독할 헌신적인 개인이 필요합니다.
• 기본 제공 상태 관리자 부족: Redux, MobX 또는 이와 유사한 것이 필요한 경우 사용자는 상태 관리자가 필요합니다.
• 적은 수의 플러그인: Gatsby.js와 같은 다른 대응물에 비해 사용자는 쉽게 적용할 수 있는 플러그인을 많이 사용할 수 없습니다.

Next.js가 Gatsby보다 나은가요?

Gatsby는 개발자에게 친숙한 정적 사이트 생성기를 만들기 위해 React, GraphQL 및 react-router의 가장 좋은 부분을 결합합니다. Gatsby는 CDN에서 로드할 수 있는 정적 HTML 파일을 생성합니다. Gatsby 앱이 너무 커지거나 엄청난 양의 데이터를 가져오면 문제가 발생하고 빌드가 지연되는 것으로 알려져 있습니다. Next.js는 앱에 100,000개 이상의 페이지가 있거나 엄청난 양의 데이터를 가져와야 하는 경우에 이상적입니다(예: 변형이 있는 많은 제품이 있는 매장).

둘 다 서버 측 렌더링에 적합한 옵션이지만 두 가지 다른 옵션이 있습니다. Gatsby를 사용한 결과는 사용자가 사이트 구축을 목표로 하는 경우 서버가 없는 정적 사이트 생성기입니다. 이제 Netlify 또는 다른 정적 호스팅 사이트에 정적으로 빌드 프로세스 개발을 배포해야 합니다. Next.js는 서버 측에서 요청에 대한 응답을 렌더링할 수 있는 백엔드를 제공하여 사용자가 Node.js를 지원하는 플랫폼에서 동적 웹사이트를 개발할 수 있도록 합니다. Next.js도 정적 사이트를 생성할 수 있지만 이것이 주요 사용 사례라고 말할 수는 없습니다.

목표가 정적 사이트를 만드는 것이라면 결정에 어려움을 겪을 수 있으며 Gatsby는 블로깅을 위한 많은 플러그인을 포함하여 우수한 플러그인 생태계를 가질 수 있습니다.

Gatsby는 또한 사용자 옵션 및 요구 사항에 따라 요구 사항을 충족할 수 있는 GraphQL을 기반으로 합니다.

Windows에 Node.js를 설치하는 방법은 무엇입니까?

Next.js를 설치하려면 Node.js를 설치해야 합니다.

nodejs 공식 웹 사이트에서 Windows Installer를 다운로드합니다.

또는 Node.Js를 설치하는 대체 방법이 있습니다.

Winget 사용

 winget install OpenJS.NodeJS # or for LTS winget install OpenJS.NodeJS.LTS

초콜릿 사용하기

 cinst nodejs # or for full install with npm cinst nodejs.install

국자 사용

 scoop install nodejs

Node.Js가 제대로 설치되었는지 확인하려면 이 명령을 실행하십시오.

 C:\Users\Admin> node -v

create-next-app 사용

Nex.js를 시작하는 또 다른 방법은 create-next-app 을 사용하는 것입니다. Nex.js 애플리케이션을 빌드하는 데 도움이 되는 CLI 도구입니다. 이것을 사용하려면 npx_command 번들을 설치해야 하며 이는 Javascript 명령을 실행하는 데 도움이 됩니다. 시작하려면 다음 명령 중 하나를 사용하십시오.

 npx [email protected] # or yarn create next-app # or pnpm create next-app

이 명령은 애플리케이션 이름이 필요하고 해당 이름으로 새 폴더를 만든 다음 필요한 모든 패키지( react , react-dom , next )를 다운로드하고 package.json 을 다음으로 설정합니다.

npm run dev 로 샘플 앱을 실행할 수 있습니다.

http: // localhost:3000:

Next.js 애플리케이션 설치 및 실행 단계

1단계: 여기에서 node.js를 얻을 수 있습니다. 터미널에서 다음 명령을 실행하여 설치를 확인합니다.

 node -v npm -v

2단계: 이제 프로젝트용 폴더를 만들고 코드 편집기로 해당 폴더로 이동한 후 터미널에서 다음 명령을 실행합니다.

 npm init -y npm install --save next react react-dom

package.json 파일에 다음 스크립트 추가

 { "scripts": { "dev": "next", "build": "next build", "start": "next start" } }

3단계: 페이지 폴더에 index.js 파일을 추가하고 그 안에 다음 코드를 추가합니다.

 import React from'react'; import Link from'next/link'; export default class extends React.Component { render() { return ( { // This is Jsx contains HTML // code in Javascript} <div> <h1>Hello Emizentech</h1> { // This is Styled-jsx contains // CSS code in Javascript} <style jsx>{` a{ color:grey; text-decoration:none; } `}</style> } </div> ) } }

4단계: npm start로 애플리케이션을 시작합니다.

산출

Next.js에 TypeScript를 추가하는 방법은 무엇입니까?

 # run 'touch' to create an empty config file # Next will auto-populate it touch tsconfig.json # then you'll be prompted to run the command: npm install -D typescript @types/react @types/node # now you can use TypeScript everywhere

next.js 앱에 페이지 및 경로를 추가하는 방법

앱에 정보 페이지를 추가하려면 /pages/about.js 또는 TypeScript의 경우 .tsx에 구성 요소를 놓습니다.

 export default function About() { return <div>About</div> }

링크 및 탐색

Next 프레임워크에는 next/link 의 Link 구성 요소도 있습니다.

홈 페이지(/) 및 블로그 경로(예: /blog/emizen)에 연결하려는 경우 /pages/about.js에 다음을 포함합니다.

 import Link from "next/link"; export default function About() { return ( <div> <h1>About Me</h1> <div> <Link href="/"> <a>Home</a> </Link> <Link href="/blog/emizen"> <a>Blog Post</a> </Link> </div> </div> ); }

href 는 Link 구성 요소의 필수 소품이며 데이터도 객체로 전달할 수 있습니다.

 import Link from "next/link"; export default function About() { return ( <div> <h1>About Me</h1> <div> <Link href={{ pathname: "/about" }}> <a>Home</a> </Link> <Link href={{ pathname: "/blog/[slug]", query: { slug: "emizen" }, }} > <a>Blog Post</a> </Link> </div> </div> ); }

Next.js의 SEO

Next에서 next/head 의 Head 구성 요소를 사용하여 웹 페이지에 메타 데이터를 추가할 수 있습니다.

 import Link from "next/link"; import Head from "next/head"; export default function About() { return ( <div> <Head> <title>About | IT Site</title> <meta name="description" content="A website Emizentech/> </Head> <h1>About Me</h1> <div> <Link href="/"> <a>Home</a> </Link> <Link href="/blog/emizen"> <a>Blog Post</a> </Link> </div> </div> ); }

API 경로

Nextjs를 사용하면 API 경로라는 기능을 통해 서버 코드를 작성하여 전체 스택 React 앱을 만들 수 있습니다.
별도의 서버리스 기능으로 실행되는 자체 API를 생성하려면 /pages에 "api"라는 폴더를 생성합니다.

about 페이지의 /api/about에서 데이터를 가져오려면 /pages/api에 about.js라는 페이지를 포함하세요.

 // syntax is very similar to the "Express" Node.js framework // here we are responding to every request with an OK (200) code and sending JSON data back (our name) export default function handler(req, res) { res.status(200).json({ name: "Reed Barger" }); }

데이터 요청 클라이언트 측

API 경로에서 데이터를 요청하는 기존 접근 방식은 useEffect 및 useState 를 사용하여 요청하는 것입니다.

 import Link from "next/link"; import { useEffect, useState } from "react"; export default function About() { const [data, setData] = useState(null); const [isLoading, setLoading] = useState(false); useEffect(() => { setLoading(true); fetch("api/about") .then((res) => res.json()) .then((data) => { setData(data); setLoading(false); }); }, []); if (isLoading) return <p>Loading...</p>; if (!data) return <p>No about data</p>; return ( <div> <h1>My name is: {data.name}</h1> </div> ); }

요청 데이터 서버 측

이 두 가지 기능은 서버에서 데이터를 가져오는 데 도움이 됩니다.

 getServerSideProps #or getStaticProps

함수는 React 구성 요소와 동일한 파일에 있으며 해당 코드는 React 클라이언트와 별도로 번들로 제공됩니다.

GetServerSideProps

모든 페이지 방문은 getServerSideProps 실행을 트리거합니다. 결과적으로 동적 데이터를 포함하거나 인증된 사용자 데이터 검색과 같이 매번 요청을 수행해야 하는 페이지에서 매우 유용합니다.

 export default function About({ name }) { return ( <div> <h1>My name is: {name}</h1> </div> ); } export function getServerSideProps() { return { props: { name: "Vivek Khatri" }, }; }

이 기능을 사용하면 서버에서 데이터를 보내고 페이지 구성 요소의 props에 데이터를 삽입할 수 있습니다.

이를 통해 React 클라이언트는 지연 없이 로드 또는 오류 상태를 처리할 필요 없이 데이터를 즉시 표시할 수 있습니다.

서버에서 데이터를 검색하려면 async 키워드와 함께 getServerSideProps async를 사용할 수 있습니다.

 export default function About({ name }) { return ( <div> <h1>My name is: {name}</h1> </div> ); } export async function getServerSideProps() { const data = await fetch("https://xyz.com/api").then((res) => res.json() ); return { props: { name: data.results[0].name.first }, }; }

XYZ API에서 데이터를 동적으로 검색하고 있으며 각 페이지를 새로 고칠 때마다 데이터가 변경됩니다.

GetStaticProps

getStaticProps 함수는 드물게 변경되는 정적 페이지에 더 좋습니다. 이 함수는 서버 코드를 실행하고 서버에 GET 요청을 보내지만 프로젝트가 완료되면 한 번만 보냅니다.

앱이 개발 중에 실행되면 getServerSideProps와 유사하게 페이지를 새로 고칠 때마다 데이터를 요청합니다.

개발 중에 getStaticProps 는 모든 페이지 방문에 대해서만 요청합니다.

yarn build 를 실행한 다음 yarn start 로 프로덕션 빌드 또는 React 프로젝트를 실행하면 런타임이 아니라 프로젝트가 빌드될 때 요청한 것과 동일한 이름을 얻게 됩니다.

getServerSideProps 및 getStaticProps 는 GET 요청만 할 수 있습니다. API 경로는 모든 유형의 데이터 읽기 및 업데이트 요청을 처리할 수 있습니다(즉, 데이터베이스와 같은 데이터 계층과 결합된 경우).

Next.js 예제

여기에서 더 많은 Next.js 예제를 찾을 수 있습니다.

상위 다음 JS 템플릿

재료 대시보드

NextJS Material은 Google의 Material Design에서 영감을 받은 오픈 소스 Material-UI React Dashboard입니다. 재료 원칙은 단순하고 우아한 구성 요소의 집합입니다. 인기 있는 Material-UI, NextJS 및 React 프레임워크를 사용하여 NextJS Material Dashboard를 만들었습니다.

재료 키트

NextJS Material Kit는 NextJS, React, Material-UI용으로 제작된 무료 머티리얼 디자인 키트입니다. NextJS Material Kit에는 사용자가 조합할 수 있는 100개 이상의 개별 프론트엔드 요소가 포함되어 있습니다. 사용자가 SASS 및 JSS(JS 파일 내) 파일 및 클래스로 쉽게 변경할 수 있는 모든 구성 요소에 대해 색상 변형이 가능합니다.

아르곤

NextJS Argon 대시보드는 사용자가 원하는 대로 조합할 수 있는 100개 이상의 개별 구성 요소로 구성됩니다. 프로젝트에 포함된 SAAS 파일을 수정하여 사용자는 이 오픈 소스 React Dashboard를 쉽게 개인화할 수 있습니다.

노투스

완전한 코드가 있는 구성 요소 Notus NextJS는 사용자가 필요에 따라 혼합하고 일치시킬 수 있는 100개 이상의 개별 구성 요소로 구성됩니다. 모든 구성 요소에는 색상 변형이 있을 수 있으며 Tailwind CSS 클래스를 사용하여 쉽게 변경할 수 있습니다.

Next.js는 어디에서 배울 수 있습니까?

• 공식 웹사이트에서 Next.js를 배울 수 있습니다.
• 또 다른 옵션은 React Bootcamp입니다.
• Udemy의 Next.js

Next.js를 마스터하는 데 도움이 될 더 많은 리소스가 온라인에 있습니다.

결론

수백만 명의 사람들에게 서비스를 제공할 강력하고 복잡한 소프트웨어를 구축하거나 웹 스토어에서 빠르게 확장하는 것은 중요하지 않습니다. 두 경우 모두 Next.js와 같은 최신 웹 기술의 장점을 사용하여 온라인에서 비즈니스를 보다 효율적으로 만들 수 있습니다. SEO 및 UX Next.js는 페이지 속도를 개선하기 위해 인터넷을 더 좋고 깨끗하며 사용자 중심적인 곳으로 만드는 데 도움이 됩니다. 정적으로 생성된 페이지는 여전히 반응적입니다. Next.js는 클라이언트 측에서 애플리케이션을 수화하여 완전히 상호작용할 수 있도록 합니다.

재능 있는 Next.js 또는 전체 스택 개발자를 찾고 계십니까? 우리는 당신의 등을 얻었다! 지금 바로 Next.js 프로젝트를 계획하고 실행하는 데 필요한 모든 도구와 전문 지식을 제공합니다.

Next.Js에 대해 자주 묻는 질문