[next.js 공식문서] 25. TypeScript

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

TypeScript

새 프로젝트

기본이 타입스크립트와 함께 제공됨

기존 프로젝트

js, jsx를 ts, tsx로 변경하고 next dev 랑 next build 실행하면 자동으로 tsconfig.json 생김

타입스크립트 플러그인

자동으로 활성화. 안뜨면 다음과 같이

1. 명령 팔레트 열기( Ctrl/⌘+ Shift+ P)
2. "TypeScript: TypeScript 버전 선택" 검색
3. "Workspace 버전 사용" 선택

플러그인 기능

• 세그먼트 구성 옵션 에 잘못된 값이 전달되면 경고가 표시됩니다.
• 사용 가능한 옵션 및 상황에 맞는 문서를 표시합니다.
• use client지시문이 올바르게 사용되었는지 확인합니다 .
• 클라이언트 후크(예: useState)가 클라이언트 구성 요소에서만 사용되도록 합니다.

정적으로 유형이 지정된 링크

next/link를 사용하면 페이지간 탐색시 좀 더 type safety함.
아래처럼 experimental.typedRoutes 를 활성화하셈

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
};

module.exports = nextConfig;

End-to-End Type Safety

• fetch 함수와 페이지 간에 데이터를 직렬화하지 않음: 서버의 컴포넌트, 레이아웃, 페이지에서 직접 불러올 수 있습니다. 이 데이터를 직렬화(문자열로 변환)하여 클라이언트 측에 전달할 필요 없이 React에서 사용할 수 있습니다. 대신 앱이 기본적으로 서버 컴포넌트를 사용하기 때문에 추가 단계 없이 Date, Map, Set 등의 값을 사용할 수 있습니다.
• 컴포넌트 간 데이터 흐름 간소화: 루트 레이아웃을 위해 _app을 제거하여 이제 컴포넌트와 페이지 간의 데이터 흐름을 시각화하기가 더 쉬워졌습니다. 이전에는 개별 페이지와 _app 사이의 데이터 흐름이 입력하기 어렵고 혼란스러운 버그를 유발할 수 있었습니다. Next.js 13의 콜로케이션 데이터 불러오기를 사용하면 더 이상 문제가 되지 않습니다.
  이제 Next.js의 데이터 불러오기는 데이터베이스 또는 콘텐츠 제공업체 선택에 대한 규범적 제한 없이 가능한 한 종단 간 유형 안전성에 가깝게 제공됩니다.

서버 및 클라이언트 컴포넌트 간 데이터 전달

props를 통해 서버와 클라이언트 컴포넌트간에 데이터를 전달할때는 직렬화(문자열로 변환)됨. 그러나 type 필요없이 다른 props를 전달하는 것과 똑같음.

Aliases 와 BaseUrl

tsconfig.json에서 paths, baseUrl 설정가능

next.config.js 유형 검사

얘는 원래 분석 안됨. JSDoc을 사용하여 ide 기능으로 검사 가능

// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* config options here */
};

module.exports = nextConfig;

증분 유형검사

타입스크립트의 증분(incremental) 컴파일은 이전 컴파일 결과를 캐시하고 변경된 파일만 다시 컴파일하여 속도를 향상시키는 기능입니다. 증분 컴파일은 소스 코드의 일부분만 변경되었을 때 유용하며, 전체 프로젝트를 다시 컴파일할 필요 없이 변경된 부분만 빠르게 확인할 수 있습니다.

// tsconfig.json
{
  "compilerOptions": {
    "incremental": true
  }
}

오류 무시

하지말자