Next.js 핵심기능
1. Code Splitting
일반적인 리액트 싱글페이지에서는 초기 렌더링 때 모든 컴포넌트를 내려받습니다. 하지만 규모가 커지고, 용량이 커지면 로딩속도가 지연될 수 있는 문제점이 있습니다. Next는 이러한 문제점을 개선해서 필요에 따라 파일을 불러올 수 있게 여러 개의 파일을 분리하는 코드 스플리팅을 사용하였습니다. 폴더 구조를 보시면 pages 폴더 안에 각 page 즉, 라우트들이 들어가며, Components 폴더에는 React 컴포넌트들이 들어가게 되는데요. 예를 들어, 브라우저가 실행되고, 사용자가 접속을 하게 되면, 첫 페이지인 index page만 불러오게 되고, 그 이후에 다른 페이지로 넘어갔을 때는 해당 페이지만 불러오게 됩니다.
2. File Based Routing
React에서는 라우터가 없어서 보통 react-router-dom을 라우트 모듈 사용해서 렌더링합니다. (번거로움)
하지만 Nest.js의 경우 별 다른 설정없이 Routing을 할 수 있습니다.폴더 내부의 파일위치나 파일명에 따라서 routing을 할 수 있습니다.
- pages라고 정의한 폴더 안에 파일 구조를 정의해 페이지와 경로를 구현 합니다.
- 코드 작성을 덜 할 수 있을 뿐 아니라, 직관적으로 페이지 구조를 이해할 수 있습니다.
3. Server-side (Pre)Rendering
React에서도 써드파티 라이브러리나 내장기능을 사용해서 SSR을 구현할 수 있지만, Next.js를 사용하게 되면 별다른 설정없이 SSR을 구현할 수 있습니다. SSR뿐만아니라 CSR또한 같이 혼합하여 사용해서 두 장점을 같이 얻을 수 있습니다.
-
클라이언트 대신 서버에서 페이지를 준비하는 원리입니다.
-
React는 client-side에서 랜더링하기 때문에 server에 영향을 미치지 않고, server에서 client로 응답해서 보낸 html도 거의 비어있습니다.
- 위 같은 방식은 서버에서 데이터를 가져올 때 지연 시간이 발생하고 UX측면에서 좋지 않을 수 있습니다.
- 또한 검색엔진 최적화에 있어서도 문제될 수 있는데, 검색을 통해 노출이 되야하는 페이지의 경우 Client-side 랜더링 방식은 웹 크롤링이 동작할 때 구조적 html을 제외하곤 내용을 제대로 가져와 읽을 수 없습니다.
-
SSR로 구현하면 위와 같은 문제들을 해결할 수 있습니다.
- 만약 페이지가 서버 사이드에서 미리 랜더링 된다면, data fetching 역시 서버단에서 이뤄질 것이고, 사용자와 검색 엔진 크롤러에게 바로 랜더링 된 페이지를 전달할 수 있습니다.
- 그렇게 되면 사용자는 지연 시간을 따로 느낄 필요없고, 크롤러도 페이지의 내용을 제대로 읽을 수 있습니다.
Next.js를 사용하면 자동으로 pre-rendering을 지원하기 때문에 쉽게 구현이 가능하며, Next.js에서는 CSR(Client-side Rendering)과 SSR을 혼합해 페이지를 구현합니다.
4. Custom API server (as-route masking)
Next는 커스텀 서버를 통해서 라우트를 마스킹을 할 수 있습니다. 만약에 Link 컴포넌트에서 as를 사용하게 되면 실제 페이지가 없는 곳에 요청하게 됩니다. 그래서 직접 커스텀 서버를 생성해서 as의 URL이 href를 바라볼 수 있게 처리를 따로 해줘야 새로 고침이나 뒤로 갔을 때도 렌더링이 가능해집니다.
기존 API가 있는 경우 API 경로를 통해 API에 호출을 전달할 필요가 없습니다.
API 경로의 다른 사용 사례는 다음과 같습니다.
- 외부 서비스의 URL 마스킹(예: /api/secret -> 대신 https://company.com/secret-url) 서버에서 환경 변수를 사용하여 외부 서비스에 안전하게 액세스합니다.
5. Image Optimization
기존 img 태그를 대체하는 next/image 패키지에 있는 Image 컴포넌트를 제공합니다. 브라우저가 지원하는 경우에 Viewport에 맞게 다양한 이미지 크기를 로드 해둘 수 있어 성능을 개선시킬 수 있다고 합니다. (내장 이미지 최적화)
Next.js 기본 구조
pages/ // HTML Document, Application Container, 각종 페이지 등을 작성
_document.js // SPA에서 시작점이 되는 index.html <head>태그 내용 등을 작성
_app.js // Application Container. 공통의 레이아웃을 작성
_error.js // Error Page.
index.js // Root Page /로 시작되는 경로
hello.js // Hello Page /hello로 시작되는 경로
static/ // 정적 파일 (이미지, 파일 등)을 업로드
next.config.js // Next.js의 환경 설정 파일, 라우팅 설정, typescript, less 등의 webpack 플러그인을 설정_document.js
- React LIFECYCLE과 DATA FETCHING이 불가능
- 태그 안에 작성될 CDN이나 공통으로 추가될 meta태그를 작성
_app.js
- 공통되는 레이아웃을 작성
- 에러 핸들링이나 라우팅 되었을 때의 프로그래싱 처리 가능
_error.js
- 에러 페이지에서 공통으로 사용
- 작성하지 않을 경우 Nextjs에서 디폴트 값을 알아서 사용
next.config.js
- 웹팩 플러그인과 Nextjs 라우팅 설정을 작성
Next.js 시작하기
npx create-next-app my-app
cd my-app
npm run dev 
Create-Next-app을 사용하여 프로젝트를 만들면 위와같은 폴더구조가 생성됩니다. 기존 CRA에서 있던 src폴더가 pages폴더로 바뀌었습니다. 위 components 폴더는 수동으로 생성했고 pages에는 index.js 파일이 존재합다. 만약 pages폴더에 intro.js라는 파일을 생성하면 localhost:3000/intro처럼 접속 가능합니다. 즉, Nextjs는 다이나믹 라우팅을 지원합니다.
Next.js 참고, 인용
