목차

• Next.js란?
• Next.js 등장 배경
• React와 Next.js의 차이점
• Next.js 개발하기
  • 타입스크립트 적용
  • 바벨/웹팩 커스터마이징

Next.js란?

• 리액트를 위해 만들어진 오픈소스 자바스크립트 웹 프레임워크
  = 리액트 프레임워크
• 다양한 렌더링 방식
  • 서버 사이드 렌더링(SSR)
  • 정적 사이트 생성(SSG)
  • 증분 정적 재생성(ISR)
  • 클라이언트 사이드 렌더링(CSR)
• 수많은 내장 컴포넌트와 플러그인 제공
  • 소규모 웹 사이트, 거대한 상용 애플리케이션 모두 적용 가능

Next.js 등장 배경

• 웹 개발 분야의 발달에 따라
• 동적 웹 애플리케이션을 재사용 컴포넌트 기반으로 개발하는 리액트 등장

리액트의 큰 문제점

• 클라이언트 사이드 렌더링(CSR)만 가능
• 검색 엔진 최적화(SEO) 거의 안 됨
• 웹 앱을 완전히 표시하려면 브라우저가 전체 웹앱 번들을 다운로드해야 함
  • 규모가 큰 애플리케이션은 첫 화면 표시까지 수 초가 걸림

서버 사이드 렌더링(SSR) 제안

• 리액트 앱을 순수 HTML 페이지로 서버에서 미리 렌더링해두고
  • 브라우저가 이를 다운로드하자마자 HTML을 즉각 화면에 표시
    • 로딩 속도가 빠르게 느껴짐
  • 이후 자바스크립트 번들까지 다운되면 사용자가 웹앱과 상호 작용

Next.js 등장

• Vercel이 개발

리액트가 제공하지 않는 다양한 기능 제공

• 코드 분할 (code splitting)
• 서버 사이드 렌더링 (SSR)
• 파일 기반 라우팅 (=> react-router-dom 불필요)
• 경로 기반 pre-fetching (preload 기능)
• 클라이언트와 서버 양측에서 모두 개발 가능

그 외 기능

• 정적 사이트 생성(SSG) 렌더링 방식
• 증분 정적 컨텐츠 생성(ISR) 렌더링 방식
• 타입스크립트 기본 지원
• 자동 polyfill 적용
• 이미지 최적화
• 국제화 지원 (i18n)
• 성능 분석

React와 Next.js의 차이점

• Next.js의 기본 철학은 리액트와 거의 동일
  • 설정보다 관습 (convention-over-configuration)
    • 가능한 한 복잡한 설정 없이 '관습'대로 사용하면 웹앱 개발 가능
      • 예: 별도의 설정 파일 없이 어떤 페이지는 SSR을 적용하고 어떤 페이지는 SSG 적용 가능 (각 페이지에서 특정 함수를 export하면 Next.js가 나머지 알아서 처리)
• 리액트는 자바스크립트 라이브러리, Next.js는 프레임워크
• Next.js에서 서버 측 코드 개발 가능
  • Node.js 서버 기반
    • fetch, window, document와 같은 웹 브라우저 전역 객체나 canvas 같은 HTML 요소는 Next.js에서 접근 불가
  • fs, child_process 등 Node.js에서만 사용 가능한 라이브러리/API 사용 시
    • 각 요청별 데이터를 클라이언트로 보내기 전에 Next.js가 서버 사이드 코드를 실행하거나 페이지 생성 시점에 해당 코드를 처리
    • 어떤 방식을 쓰는지는 각 페이지가 사용하는 렌더링 방식에 따라 다름

Next.js 개발하기

설치

create 'react' app 아니고 create 'next' app

npx create-next-app [프로젝트 명]

실행

npm run dev // localhost:3000

기본 폴더 구조

필수 폴더 2가지 (pages/, public/)

- README.md
- next.config.js
- node_modules/
- package-lock.json
- package.json
- pages/  => 필수!
  - _app.js
  - api/  => 서버 개발을 위한 폴더
    - hello.js
  - index.js
- public/  => 필수!
  - favicon.ico
  - vercel.svg
- styles/
  - Home.module.css
  - globals.css

pages/ 폴더

• 페이지 기반 라우팅을 위한 폴더
• pages/ 폴더 안의 모든 자바스크립트 파일은 페이지가 됨
• 파일 이름이 곧 라우팅 경로
  • 예: pages/about.js => http://localhost:3000/about

public/ 폴더

• 웹 사이트의 모든 public 페이지와 정적 컨텐츠를 포함
  • 예: 이미지 파일, 폰트, (컴파일된) CSS 스타일시트, (컴파일된) 자바스크립트 파일 등

타입스크립트 적용

• Next.js는 타입스크립트로 작성된 프레임워크
  • 고품질의 타입 정의 지원

Next.js에서 TS를 기본 언어로 사용하기

1. 최상위 디렉토리에 tsconfig.json 파일 생성

   • 이 때는 파일 안에 아무 것도 없음
   • 하지만 아래 패키지를 설치하고 나면 필요한 기본 설정 내용이 여기에 기록됨

2. npm run dev 실행

3. 터미널을 확인하면...

   It looks like you're trying to use Typescript but do not have the required package(s) installed. (타입스크립트 쓰려고 하는 거 같은데 필요한 패키지가 설치 안 되어 있어)
   ... (필요한 패키지 설치 명령어)

4. 터미널에서 알려준 패키지들(= 프로젝트가 사용하는 주 언어에 대한 의존성 패키지) 설치

• 주의: 개발에만 쓰이는 것들이므로 dev로 설치

npm install --save-dev typescript @types/react @types/node

5. 자바스크립트 파일(.js)을 타입스크립트 파일(.ts)로 수정

6. 최상위 디렉토리의 next-env.d.ts

• 이 파일은 마음대로 수정해도 되지만 지우면 안 됨

바벨과 웹팩 설정 커스터마이징

바벨이란?

• 자바스크립트 트랜스컴파일러(transcompiler)
• 최신 자바스크립트 코드를 구식 브라우저에서도 호환되는 스크립트 코드로 변환
• ECMAScript 명세로 발표된 자바스크립트 신기능을 지금 환경에서 바로 실행 가능
  • 예: Node.js는 export default 키워드를 모르지만 바벨 설정을 하면 아무 문제 없이 사용 가능

바벨 설정 커스터마이징

• 최상위 디렉토리에 .babelrc 파일 생성
  • 아래는 최소한 들어가 있어야 하는 내용
    = Vercel 팀에서 미리 설정한 바벨 설정

  {
      "presets": ["next/babel"]
  }

웹팩이란?

• 특정 라이브러리, 페이지, 기능에 대해 컴파일된 코드를 전부 포함하는 번들 생성
  • 예: 서로 다른 라이브러리에서 각각 하나씩 3개의 컴포넌트를 불러오는 페이지
    • 이걸 웹팩이 실행 가능한 하나의 번들로 합쳐줌
• 웹에서 사용하는 모든 자원(자바스크립트 파일, CSS, SVG 등)에 대해 각기 다른 컴파일, 번들, 최소화 작업을 처리해주는 일종의 인프라(infrastructure)
  • 예: CSS 전처리기(SASS)를 컴포넌트 스타일링에 사용할 때
    • 웹팩 설정을 수정해서 SASS 파일을 처리 후 CSS 파일을 만들도록 함

바벨/웹팩 유의사항

• 기본 바벨 설정이나 웹팩 설정을 자유롭게 바꿀 수 있음
• 하지만 '설정보다는 관습'이라는 취지 하에 실제 개발 시 설정을 바꾸기보다는 Next.js가 지정한 코드 컨벤션을 따라 개발할 일이 더 많음
  • 빌드 과정을 꼭 수정해야 한다면 대부분 next.config.js를 변경하는 것으로 충분
  • next.config.js에서 변경할 설정을 담은 객체를 export로 내보내면 해당 값이 Next.js의 기본 설정을 덮어씀

// next.config.js

module.exports = {
	// 변경한 설정 값 (객체 - key: value 형태)
}

• 예: 기본 웹팩 설정 값을 바꾸고 싶다면?
  • next.config.js의 객체의 'webpack'이라는 key에 새로운 값 지정

// 웹팩 로더에 커스텀한 loader 추가하기 (실제 동작하는 코드 아님)
module.exports = {
	webpack: (config, options) => {
    	config.module.rules.push({
        	test: /\.js/,
            use: [
            	options.defaultLoaders.babel,
                {
                	loader: "my-custom-loader", // 사용할 커스텀 로더
                    options: loaderOptions, // 커스텀 로더의 옵션
                },
            ],
        });
        
        return config;
    },
}