타입스크립트

마스터 코스 1강에서 타입스크립트 설정에 대해 잠깐 다뤘었습니다. CLI로 npx create-next-app/@latest를 통해 프로젝트 세팅시 typescript를 설정하셨다면 별도로 설치를 하지 않아도 next 13 app directory는 기본적으로 타입스크립트를 지원합니다.

js -> ts 마이그레이션

Next.js 13 master course - 프로젝트 설치 및 실행

혹시 프로젝트 세팅 당시에 typescript 설정을 하지 않으셨다면 간단하게 설정을 할 수 있습니다!

page.js나 layout.js와 같이 js로 작성된 컴포넌트를 ts|tsx로 작성한 후 next dev 명령어로 다시 개발 서버를 시작하면 nextjs에서 자동으로 타입스크립트 세팅을 도와줍니다.

1.작성된 js 파일 중 일부를 ts로 전환합니다.

2. next dev 를 통해 개발 서버를 다시 시작하면 자동으로 devDependencies를 설치해줍니다.

visual studio code를 사용하시는 분들은 nextjs13을 타입스크립트와 사용할 때 중요한 부분이 있습니다. 서버 컴포넌트, segment config options와 같이 nextjs에서만 사용하는 타입 정보들을 IDE에서 정상적으로 인지할 수 있게 해주어야 합니다. 아래 그림을 봐주세요.

Ctrl/⌘ + Shift + P를 눌러서 typescript version을 선택합니다.

그 이후 Use Workspace Version을 선택합니다.

nextjs를 사용할때는 항상 워크스페이스 버전의 타입정보를 사용하는 것이 개발할 때 놓칠 수 있는 휴먼 에러를 최소화하는데 도움을 줍니다.

예를 들어 hook 사용시 use client를 붙이는 것을 깜빡한다면 다음과 같이 에러가 발생하게 됩니다.

./components/Button.tsx
ReactServerComponentsError:

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

서버 컴포넌트에서 훅을 사용했을때 경고 하는 모습

올바르지 않은 위치에 directive를 사용했을 때 경고하는 모습

정상적으로 타입 체킹이 된 모습

Statically Typed Links

Next.js에서 next/link를 사용할때 오타를 방지하는데 도움을 줄 수 있는 설정이 있습니다.

next.config.js에 아래와 같이 exmperimental.typedRoutes 설정을 켜줍니다.

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

어떤 오타를 방지해주나요?

다음과 같이 app directory를 작성하면
/post, /post/1, /post/2... 와 같은 페이지에 접근이 가능해집니다.

서버 컴포넌트에서 next/link의 Link를 사용해 다른 페이지로 이동하려고 할 때 존재하지 않는 페이지로 이동하는 경우가 있을 수 있는데요 이럴 때 타입 에러를 표기합니다.

에러로 표기되는 경우는 크게 두가지입니다.

• 정말로 존재하지 않은 페이지일 때
• 존재하나 template literal이 아닌 computed value일 때

위 예제코드에서 존재하지 않는 /about href로의 이동이나, computed value인 '/post/' + 2 href로의 이동은 에러로 표기됩니다.

이렇게 에러 표기가 가능한 이유는 빌드시 생성되는 .next/types/link.d.ts에서 존재하지 않는 타입 검증을 해주기 때문입니다.

타입스크립트 최소버전

정상적으로 타입 에러를 체크하기 위해서는 최소한 v4.5.2 버전을 사용하는 것이 좋습니다.

next.config.js

next.config.js는 항상 ts가 아닌 js 확장자로 작성되어야 합니다.

타입 정보를 위해서는 JSDoc을 사용해야 합니다.

// @ts-check
 
/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* config options here */
}
 
module.exports = nextConfig

타입스크립트 에러 무시하기

nextjs는 프로덕션 빌드를 위해서 next build 명령어를 사용합니다. 만약 모종의 이유로 프로덕션 빌드 시 타입 에러로 인한 빌드 실패를 우회하기 위해서는 다음과 같이 next.config.js 설정을 변경해주면 됩니다.

module.exports = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
}

수고하셨습니다.

오늘은 타입스크립트를 설정하지 않는 프로젝트에서 어떻게 타입스크립트를 개발환경에 적용하고 또한 IDE 설정은 어떻게 해야하는지, 그리고 nextjs에서 TS 사용 시 유의해야할 점에 대해 알아봤습니다.

감사합니다.