Next.js란

gjeon·2022년 4월 8일
1

Next.js

목록 보기
1/1
post-thumbnail

NextJS 란?

  • 홈페이지에 보면 The React Frameworkfor Production 라는 말이 큼지막하게 써있다.
    • 생산을 위한 React 프레임워크
  • Next.js는 하이브리드 정적 및 서버 렌더링, TypeScript 지원, 스마트 번들링, 경로 미리 가져오기 등 생산에 필요한 모든 기능을 통해 최고의 개발자 경험을 제공한다.
  • React 라이브러리의 프레임워크다.
  • SSR을 쉽게 구현하도록 도와준다.
    • 기본적으로 React는 CSR으로 동작한다. 이는 웹사이트를 요청했을 때 빈 HTML을 가져와 JavaScript를 로딩하기에 첫 로딩 시간이 오래걸리고 SEO에 취약하다는 단점이 있는데, Next.js는 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다.
    • React에서도 SSR구현, SEO 최적화가 가능하지만 복잡하다고 한다.
  • SSR 뿐만 아니라 정적 사이트 생성(Static-Site Generate (SSG))도 가능하게 해준다.

기능

Next.js 공식문서에 나와있는 기능들을 정리해 보자.

1. Image Optimization

HTML:

<img src="/my-image.jpg...>

Next.js:

import Image from 'next/image'
<Image src="/my-img.jpg"...>

<Image> 및 즉각적인 빌드를 통한 자동 이미지 최적화.

  • 향상된 성능
    최신 이미지 형식을 사용하여 항상 각 장치에 대해 올바른 크기의 이미지를 제공합니다.
  • 시각적 안정성
    누적 레이아웃 이동 자동으로 방지
  • 더 빠른 페이지 로드 (로드 지연)
    이미지가 뷰포트에 들어갈 때만 로드되며, 흐릿한 자리 표시자(선택 사항)가 있습니다.
  • 자산 유연성
    원격 서버에 저장된 이미지의 경우에도 주문형 이미지 크기 조정

로드 지연 : https://web.dev/lazy-loading

Next.js 를 사용하면 SEO에 강점을 갖도록 이미지가 자동으로 최적화 된다.
Image Optimization

2. Internationalization

내장 도메인 및 하위 도메인 라우팅 및 자동 언어 감지.

  • 국제화 라우팅 및 언어 감지를 “기본적으로” 지원할 뿐 아니라, SSG 또는 SSR에서 모두, 국제화 라우팅 기술 중 가장 널리 사용되는 두 가지 방법 – “하위 경로 라우팅(subpath routing)” 및 “도메인 라우팅(domain routing)”을 지원한다
// next.config.js
module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL'],
    defaultLocale: 'en-US',
  },
}

pages/blog.js가 있다면, 이 세팅을 통하여 다음과 같은 URL들이 자동 설정된다:

  • English: /blog
  • French: /fr/blog
  • Netherlands: /nl-NL/blog

defaultLocale: 'en-US' 은 기본값이다.
Internationalization

3. Next.js Analytics

실제 방문자 데이터와 페이지별 통찰력을 기반으로 한 진정한 등대 점수

  • Next.js Analytics를 사용하면 서로 다른 메트릭을 사용하여 페이지의 성능을 분석하고 측정할 수 있습니다.

Next.js Analytics
Measuring performance

4. Zero Config

자동 컴파일 및 번들링. 처음부터 생산에 최적화되어 있다.
자동설정

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

TypeScript를 사용하는건 끝에 --typescript 를 붙이면 된다.

개발 서버 실행

npm run dev
or
yarn dev

npm install 을 사용해서 수동 설정도 가능하다.
Zero Config

5. Hybrid: SSG and SSR

단일 프로젝트에서 빌드 시 (SSG) 또는 요청 시 (SSR) 페이지를 사전 렌더링합니다.

  • 정적사이트 생성(SSG)
    사용자가 처음에 페이지에 접속을 요청했을 경우 사용자에게 렌더링될 빈페이지가 아닌 완성된 html파일을 응답값으로 전달해 준다. 그 후 요청이 들어올때마다 만들어진 html파일을 응답해준다.
  • 서버사이드 렌더링(SSR)
    웹사이트에 접속하면(요청이 들어오게 되면) 서버측에서 html파일을 렌더링하여 완성된 html파일을 클라이언트로 전달을하고 클라이언트에서는 이 html파일을 DOM트리로 전환하여 보여주게 되고 js파일을 해석한다.

SSG vs SSR

SSG

페이지를 한 번 만들고 CDN에서 제공할 수 있으므로 모든 요청에 대해 서버가 페이지를 렌더링하도록 하는 것보다 훨씬 빠르기 때문에 가능 하면 정적 생성(데이터 포함 및 제외)을 사용하는 것이 좋다 .
다음을 포함한 다양한 유형의 페이지에 대해 정적 생성 을 사용할 수 있다 .

  • 마케팅 페이지
  • 블로그 게시물
  • 전자상거래 제품 목록
  • 도움말 및 문서
SSR

SSG 는 사용자의 요청에 앞서 페이지를 미리 렌더링할 수 없다면 좋은 생각이 아니다.
해당 페이지에 자주 업데이트되는 데이터가 표시되는 경우 모든 요청에 따라 페이지콘텐츠가 변경될 수 있기 때문이다.
이 경우 서버 측 렌더링 을 사용할 수 있다. 속도는 느려지지만 미리 렌더링된 페이지는 항상 최신 상태로 유지된다. 또는 사전 렌더링을 건너뛰고 클라이언트 측 JavaScript를 사용하여 자주 업데이트되는 데이터를 채울 수 있다.

모든 요청에대해서 데이터를 항상 최신상태로 유지하고 싶다면 SSR
데이터의 변화가 많지 않고 사용자의 요청이 있기전에도 미리 렌더링을 할 수 있다면 SSG
을 사용하는 것이 좋다.

출처 : https://nextjs.org/learn/basics/data-fetching/two-forms
Hybrid: SSG and SSR

6. Incremental Static Regeneration

빌드 시간 후 정적으로 사전 렌더링된 페이지를 점진적으로 추가 및 업데이트합니다.

  • 증분 정적 재생(ISR)을 통해 개발자와 콘텐츠 편집자 는 전체 사이트를 재구축할 필요 없이 페이지별로 정적 생성을 사용할 수 있다 . ISR을 사용하면 수백만 페이지로 확장하면서 정적의 이점을 유지할 수 있다.
  • 증분 정적 재생성은 전자 상거래, 마케팅 페이지, 블로그 게시물, 광고 지원 미디어 등에 적합하다.

Incremental Static Regeneration
https://vercel.com/docs/concepts/next.js/incremental-static-regeneration
https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs

7. TypeScript Support

자동 TypeScript 구성 및 컴파일.

  • Next.js는 구성이 필요 없는 설정과 Pages, API 등에 대한 기본 제공 유형을 포함 하여 통합된 TypeScript 환경을 제공한다.
    npx create-next-app@latest --ts
    # or
    yarn create next-app --typescript
    # or
    pnpm create next-app -- --ts

기존 프로젝트에서 시작하려면 루트 폴더에 빈 tsconfig.json 파일을 생성한다.

TypeScript Support

8. Fase Refresh

Facebook 규모에서 입증된 빠르고 안정적인 라이브 편집 경험.

  • 빠른 새로 고침은 React 구성 요소의 편집에 대한 즉각적인 피드백을 제공하는 Next.js 기능입니다.
  • 빠른 새로 고침은 9.4 이상의 모든 Next.js 응용 프로그램에서 기본적으로 실행됩니다.
  • Next.js Fast Refresh를 사용하도록 설정한 경우 대부분의 편집은 구성 요소 상태를 잃지 않고 1초 내에 볼 수 있습니다.

Fase Refresh

9. File-system Routing

pages디렉터리 의 모든 구성 요소는 경로가 됩니다.

  • Next.js는 페이지 개념을 기반으로 하는 파일 시스템 기반 라우터를 가지고 있어 파일이 pages 디렉토리에 추가되면 자동으로 경로로 사용할 수 있다.
'pages/index.js''/'
'pages/blog/index.js''/blog'
  • pages 디렉토리 내의 파일은 가장 일반적인 패턴을 정의하는 데 사용할 수 있다.
'pages/blog/first-post.js''/blog/first-post'
'pages/dashboard/settings/username.js''/dashboard/settings/username'
  • 동적으로 경로를 줄 수 있다.
'pages/blog/[slug].js''/blog/:slug' (/blog/hello-world)
'pages/[username]/settings.js''/:username/settings' (/foo/settings)
'pages/post/[...all].js''/post/*' (/post/2020/id/title)

File-system Routing

10. API Routes

선택적으로 API 엔드포인트를 생성하여 백엔드 기능을 제공합니다.

  • page폴더 내의 모든 파일 pages/api/api/*에 매핑 된다. 서버 측 전용 번들이며 클라이언트 측 번들 크기를 늘리지 않는다.
  • 예를 들어 다음 API 루트 pages/api/user.js는 상태 코드가 200인 json 응답을 반환한다.
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

API Routes

11. Built-in CSS Support

CSS 모듈을 사용하여 구성 요소 수준 스타일을 만든다. 내장 Sass 지원.

  • Next.js를 사용하면 JavaScript 파일에서 CSS 파일을 가져올 수 있다. 이것은 Next.js가 [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)JavaScript를 넘어 개념을 확장하기 때문에 가능하다.
  • 전역 스타일 시트를 추가하려면
    • pages/_app.js 을 만들어서 styles.css 파일을 import 한다.

_app 파일

Built-in CSS Support

12. Code-splitting and Bundling

Google Chrome 팀에서 만든 최적화된 번들 분할 알고리즘입니다.

  • 코드 분할이란?

    출처 : https://crystallize.com/comics/no-code-splitting-vs-code-splitting
    요청 시 또는 병렬로 로드할 수 있는 다양한 번들 또는 구성 요소로 코드를 분할하는 것이다.
    애플리케이션이 복잡해지거나 유지 관리됨에 따라 CSS 및 JavaScript 파일 또는 번들은 바이트 크기가 커진다. 특히 포함된 타사 라이브러리의 수와 크기가 커짐에 따라 더욱 그렇게 되는데, 방대한 파일을 다운로드해야 하는 요구 사항을 방지하기 위해 스크립트를 여러 개의 작은 파일로 분할하여 페이지 로드 시 필요한 기능을 즉시 다운로드할 수 있으며 페이지 또는 애플리케이션이 대화형이 된 후 추가 스크립트가 지연 로드 되어 성능이 향상된다. 코드의 총량은 동일하지만(아마도 몇 바이트 더 클 수 있음) 초기 로드 중에 필요한 코드의 양은 줄일 수 있다.

  • 번들링이란?
    개발자는 애플리케이션을 더 큰 부분의 애플리케이션을 구축하는 데 사용할 수 있는 모듈, 구성 요소 및 기능으로 나눈다. 이러한 내부 모듈과 외부 타사 패키지를 내보내고 가져오면 파일 종속성의 복잡한 웹이 생성되는데, 번들링은 사용자가 웹 페이지를 방문할 때 파일에 대한 요청 수를 줄이는 것을 목표로 웹 종속성을 해결하고 파일(또는 모듈)을 브라우저에 최적화된 번들로 병합(또는 '패키징')하는 프로세스 다.

Bundling 된 파일을 분할해서 로드하여 초기 구동 속도를 빠르게 하고 사용자들에게도 눈에 띄는 성능 향상을 제공한다고 생각하면 된다.
Code-splitting and Bundling
https://nextjs.org/learn/foundations/how-nextjs-works/bundling

장점을 짧게

  • 이미지 최적화 (검색어 노출에 좋다)
  • 직관적인 파일 기반 라우팅 시스템
  • 사전 렌더링, 정적 생성(SSG) 및 서버 측 렌더링(SSR) 모두 페이지 단위로 지원된다.
  • 간단하게 SSG, SSR 구현이 가능하다.
  • 빠른 로딩 (Code-splitting and Bundling)

정리

Next.js는 React를 기반으로 한 프레임워크로 React의 단점을 보완하기 위해 나온 프레임워크라는 생각이 든다. 그리고 Next.js를 사용하는 주된 이유는 SSR 구현과 SEO 최적화를 위해 사용하는 것 같다. React로도 SSR 구현이나 SEO 최적화가 가능하다지만 Next.js를 사용함으로 개발의 비용을 줄여주고 편리성을 늘려주었다.
Next.js를 공부하면서 SSR, SSG, CSR 에 대해서 좀 더 명확하게 이해할 수 있었다.

Reference

https://nextjs.org
https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80
https://serzhul.io/REACT/nextjs-%EC%86%8C%EA%B0%9C
https://defineall.tistory.com/1037
https://medium.com/@msj9121/next-js-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90-8727f76614c9
https://ivorycode.tistory.com/19
https://hyemgu.tistory.com/237
https://www.hanl.tech/blog/next-js
https://thisiscoke.tistory.com/entry/Nextjs-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B01-%ED%95%98%EC%9D%B4%EB%B8%8C%EB%A6%AC%EB%93%9C-%EC%95%B1-SSR-SSG-CSR

profile
개발자 되기

0개의 댓글