Next.js는 기본적으로 TypeScript 통합 환경을 즉시 제공한다. 이번 강의에서는 기초 강의에서 만든 블로그 앱을 TypeScript로 변환하는 방법에 대해서 배운다.

What You'll Learn in This Lesson

• TypeScript로 Next.js 세팅하는 방법
• Next.js specific 타입을 사용하는 방법
• 블로그 앱을 TypeScript로 변환하는 방법

Create tsconfig.json

시작하기 위해, 프로젝트의 루트에 빈 tsconfig.json 파일을 만든다:

touch tsconfig.json

이제, 아직 개발 서버가 실행중이 아니라면 시작하자 (npm run dev 또는 yarn dev). Next.js는 타입스크립트 사용을 자동으로 감지하고 다음 메세지와 함께 필요한 패키지를 설치한다:

| 타입스크립트를 사용하려고 하지만 필요한 패키지들이 설치되어 있지 않은 것 같습니다. 의존성 설치

이 단계에서 Next.js는 또한 다음을 수행한다:

• tsconfig.json 파일을 채운다. 이 파일을 직접 커스텀할 수 있다.
• 타입스크립트 컴파일러가 Next.js 타입을 선택할 수 있도록 하는 next-env.d.ts 파일을 만든다. 이 파일은 건드리면 안된다.

이제 Next.js 앱에서 타입스크립트를 사용할 수 있다. 이제 Next.js 앱을 TypeScript로 변환하는 방법에 대해 이야기해보자.

Next.js Specific Types

다음은 사용할 수 있는 몇가지 Next.js specific 타입들이다.

Static Generation and Server-side Rendering

getStaticProps, getStaticPaths, getServerSideProps의 경우, 각각 GetStaticProps, GetStaticPaths, GetServerSideProps 타입을 사용할 수 있다.

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next';

export const getStaticProps: GetStaticProps = async (context) => {
  // ...
};

export const getStaticPaths: GetStaticPaths = async () => {
  // ...
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  // ...
};

API Routes

다음은 API 라우트에 빌트인 타입을 사용하는 방법의 예시이다:

import { NextApiRequest, NextApiResponse } from 'next';

export default (req: NextApiRequest, res: NextApiResponse) => {
  // ...
};

Custom App

다음과 같이 pages/_app.js를 pages/_app.tsx로 변환하고 AppProps 내장 타입을 사용할 수 있다:

import { AppProps } from 'next/app';

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default App;

Converting Your App

기본 강의에서 만든 블로그 앱을 타입스크립트로 변환하려면, 다음 파일들을 수정해라:

• components/date.js: 이 코드를 사용한 date.tsx 로 수정
• components/layout.js: 이 코드를 사용한 layout.tsx 로 수정
• lib/posts.js: 이 코드를 사용한 posts.ts 로 수정
• pages/posts/[id].js: 이 코드를 사용한 [id].tsx 로 수정
• pages/index.js: 이 코드를 사용한 index.tsx 로 수정
• pages/_app.js: 이 코드를 사용한 _app.tsx 로 수정
• pages/api/hello.js: 이 코드를 사용한 hello.ts 로 수정

이게 끝이다! 이제 앱이 타입스크립토로 동작한다.

| TypeScript에서 Next.js를 사용하는 방법에 대해 자세히 알아보려면 TypeScript 문서를 살펴봐라.