[Next.js] - 01

공식문서를 통해 진행

 

Next.js

사이드 프로젝트 특성상 검색엔진에 노출이 필수적이기에

Next.js의 도입이 필요하여 간단하게 튜토리얼을 진행해 보았다.

 

Next.js는 빠른 웹애플리케이션을 만들기 위한 빌딩블록을 제공하는 리액트 프레임워크이다.

정확하게 리액트의 어떤부분을 서포트 해주는것인가.

 

웹 애플리케이션을 만들기 위해 고려해야할 몇가지가 있다.

• 유저인터페이스-우리의 앱을 유저가 어떻게 사용하고 적응하는가?
• 라우팅 - 사용자가 우리의 앱에서 어떻게 이동하는지?
• 데이터 fetching- 데이터를 어디서 어떻게 가져올것인가?
• 렌더링 - 정적, 동적인 컨텐츠를 언제 어디서 보여줄것인가?
• 인터그래이션(통합) 인증, 결제등을 어떨게 연결한것인가?
• 인프라구조 - 우리의 앱코드를 배포하거나 저장을 어떻게 할것인가?
• Performance - 우리의 앱을 최종 유저를 위해 어떻게 최적화 할것인가.
• 확장성-  확장되는 트래픽에 우리 앱이 어떻게 적응해 나갈것인가.
• 개발경험 구축및 유지보수 경험 등

 

웹앱을 구축할때 어플리케이션의 각 부분에 대해 직접 구축할지 아니면

라이브러리나 프레임워크같은 다른 도구를 사용할지 결정해야한다.

 

리액트는?

리액트는 인터페이스를 구축하기 위한 자바스크리브 라이브러리 이며

사용자 인터페이스란 사용자가 화면에서 보고 상호작용하는 요소를 의미한다.

 

리액트가 인터페이스를 구축하는데 유용한 기능을 제공하긴 하지만,

완전한 웹앱을 구축하는데는 한계가 있다.

Next.js는 빌딩 블록을 제공하는 React프레임워크로

리액트에 필요한 추가 기능이나 구조 최적화를 위한 도구를 제공해준다.

 

리액트로 ui를 빌드한 뒤 next를 통해

라우팅이나 데이터페칭, 통합과 같은 애플리케이션 요구사항을 해결하는 동시에

점진적으로 사용자 경험을 개선할수 있다.

 

nextjs는 어떻게 작동되는가

크게 3가지 파트에서 어떻게 작동되는지 확인해보자

코드가 실행 되는 환경 : 개발 vs. 프로덕션

코드가 실행될 때 : 빌드 시간 대 런타임

렌더링이 발생하는 위치: 클라이언트 대 서버

 

개발과 프로덕션 환경

 

개발중일 떄는 우리의 로컬환경에서 앱이 구동되는데 프로덕션으로 옳기려 할 경우,

애플리케이션을 배포하고 사용할수 있도록 준비하는 프로세스가 필요하다.

 

Next.js는 개발 및 프로덕션 배포단계를 위한 모든 기능을 제공한다.

개발단계에서 개발자와 앱 구축경험을 최적화 하는데 타입스크립트나 Eslint 통합,

빠른 새로고침 등과 같이 개발자 경험 향상을 목표로 하는 기능이 함꼐 제공된다.

 

프로덕션 단계에서 Next.js는 최종 유저와 앱 사용 경험을 최적화 하는데

코드를 변환하여 성능과 접근성을 높이는 것을 목표로 한다.

 

개발에서 프로덕션으로 이동하려면 많은 수행작업이 필요한데

예를들어 컴파일, 번들링 축소 및 코드분할 등이 필요하다.

 

Next.js는 이러한 코드 변환의 대부분과 기본 인프라를 처리해,

우리 앱이 쉽게 프로덕션으로 이동할 수 있도록 도와준다.

이것은 rust로 작성된 컴파일러와 swc플랫폼이 있기에 가능하다.

 

Minifying

주석 공백 들여쓰기등과 같이 코드를 실행하는데 필요하지 않은 추가정보를 제거하는 프로세스

 

Bundling

번들링은 내부 모듈과 외부 패키지를 내보내고 가져오게되면,

종속성이 복잡한 앱이 되는데 이러한 앱의 종속성을 해결하고 파일수를 줄이는 것

 

Code Splitting

다른 url에서 엑세스 할수 있는 여러페이지로 분할하는데 각 페이지는 고유 진입점이 됨

해당페이지를 실행하는데 필요한 코드만 불러와 초기 로드시간을 개선.

 

디렉토리 내의 각 파일  pages/은 빌드 단계에서 자동으로 자체 JavaScript 번들로 코드 분할

 

Client and Server

서버를 통해 앱코드를 저장하고 클라이어트 요청에 응답

 

리액트로 작성한 코드를 Html로 변환하는 프로세스를 렌더링이라 하는데,

이 렌더링은 서버 또는 클라이언트에서 수행할 수 있다

Next.js는 Server-Side Rendering, Static Site Generation, and Client-Side Rendering.

세가지 유형의 렌더링 방법을 사용할 수 있다

 

Pre rendering

서버사이드 렌더링이나 정적사이트 생성은 클라이언트로 전송되기 전에

외부데이터를 가져오고 html을 변환하기 떄문에 pre rendering이라고 한다.

 

클라이언트 렌더링과 서버사이드 렌더링

리액트에서 브라우저는 ui를 구성하기 위해 서버로 부터 빈 html껍데기를 받아온다.

초기 렌더링 작업이 사용자의 장치에서 발생하기 떄문에 클라이언트 렌더링이라고 한다.

이와 대조적으로 Next.js는 모든페이지를 미리 서버에서 생성되어 보내준다.

 

서버사이드렌더링

서버사이드 렌더링을 상요하면 페이지의 html요청이 서버에서 생성되고

html,json데이터 및 자바스크립트 지침이 클라이언트로 전송된다.

Next.js에서 getServerSideProps 를 사용하여 서버 측 렌더링 페이지를 선택할 수 있습니다 .

 

Static Site Generation

html이 서버에서 생성되지만 런타임에 서버가 없고

대신 배포될때 빌드시에 콘텐츠가 한번 생성되고 html이 cdn에 저장되고 각요청에 재사용.

Next.js에서는 getStaticProps 를 사용하여 페이지를 정적으로 생성하도록 선택

 

페이지별로 가장 적합한 렌더링 방법을 선택할 수 있다는 것이 장점

 

 

네트워크

앱 코드가 저장되고 네트원크에 배포되면 실행위치를 아는것이 도움이 되는데, 넥스트는 앱코드를 

프레임워크와 origin servers, Content Delivery Networks (CDNs), and the Edge.에 배포 할 수 있다.

 

원본서버

원래버전을 저장하고 실행하는 주 컴퓨터로 다른 장소와 구별하기 위해 출처를 사용

원본서버는 응답을 보내기전 몇가지 작업을 수행하는데 이 결과는 CDN(Content Delivery Network)으로 이동

 

CDN

CDN은 전 세계 여러 위치에 정적 콘텐츠(예: HTML 및 이미지 파일)를 저장하고,

클라이언트와 원본 서버 사이에 배치,새 요청이 들어오면 사용자와 가장 가까운 CDN 위치에서 캐시된 결과로 응답.

각 요청에 대해 계산을 수행할 필요가 없기 때문에 오리진의 부하가 줄어든다.

또한 응답이 지리적으로 더 가까운 위치에서 제공되기 때문에 사용자가 더 빠르게 작업.

Next.js에서는 사전 렌더링을 미리 수행할 수 있어서 CDN은 작업의 정적 결과를 저장하는 데 적합

 

EDGE에지는 사용자에게 가장 가까운 네트워크 의 프린지( 또는 에지 )에 대한 일반화된 개념.CDN과 유사하게 에지 서버는 전 세계 여러 위치에 배포됩니다. 그러나 정적 콘텐츠를 저장하는 CDN과 달리 일부 에지 서버는 코드를 실행할 수 있습니다사용자에게 더 가까운 Edge에서 캐싱 과 코드 실행 을 모두 수행할 수 있습니다

---

설치

 

개발환경준비

Node.js가 설치 되어있지 않다면 10.13버전 이상을 설치해야함

 

 

터미널에 다음명령어 실행

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"​

 

개발서버실행

cd nextjs-blog

npm run dev

 

https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs

Learn | Next.js