Next Js + Typescript

이번 시간에는 Next JS에 Typescript를 더하여 사용해 볼 것인데, 공식 홈페이지를 보며 따라 하였다.
Typescript 예제

 

사용방법

- 첫 프로젝트를 시작할 때, npm 또는 yarn을 이용하여 사용할 수 있다.

npx create-next-app --ts
# or
yarn create next-app --typescript

 

 

- 기존 프로젝트가 있다면, tsconfig.json 파일을 루트 폴더 바로 아래에 위치시킨다. 

Next.js는 이 파일을 기본값으로 자동 구성한다. 사용자 지정 컴파일러 옵션과 함께 고유한 tsconfig.json을 제공하는 것도 지원한다.

 

그런 다음 터미널에서 'npm run dev' 또는' yarn dev'을 실행하면 다음과 같이 컴파일이 완료되었다고 확인할 수 있다.

이후 ready에 나와있는 url로 접속하면 잘 나타나는 것을 볼 수 있다.

프로젝트 루트에 next-env.d.ts라는 파일이 생성되는데, Next.js가 추천하는 tsconfig 세팅을 사용하기 위해. 언제든지 변경될 수 있으므로 제거하거나 편집할 수 없다고 공식 홈페이지에 나와 있습니다.

기본적으로 Next.js는 명령어 'next build' 를 하게 하게 되면 유형 검사를 수행한다.

개발 중에는 코드 편집기 유형 검사를 사용하는 것이 좋습니다. 오류 보고서를 무시하려면 TypeScript 오류 무시에 대한 설명서를 참조하세요,

 

Static Generation and Server-side Rendering

getStaticProps, getStaticPaths 및 getServerSideProps의 경우,

각각 GetStaticProps, GetStaticPaths 및 GetServerSideProps 유형을 'next'에서 import 해서 사용할 수 있다.

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

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

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

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

getInitialProps를 사용하는 경우 여기를 참고하세요

API Routes

다음은 API를 사용하는 방법의 예시입니다.

새로 만들어진 프로젝트에서는 pages/api/hello.ts가 만들어져 있어 참고하시면 됩니다.

import type { NextApiRequest, NextApiResponse } from 'next'

export default (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: 'John Doe' })
}

또한 다음과 같이 타입을 추가하여 다음과 같이 작성할 수 있습니다.

import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
  res.status(200).json({ name: 'John Doe' })
}

Custom 'App'

App 파일에서 커스텀이 필요한 경우 'next/app'에서 AppProps를 import 하고 다음과 같이 사용할 수 있습니다.

// import App from "next/app";
import type { AppProps /*, AppContext */ } from 'next/app'

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

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext: AppContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);

//   return { ...appProps }
// }

export default MyApp

Type checking next.config.js

next.config.js 파일은 Babel 또는 TypeScript에 의해 parsing 되지 않으므로 JavaScript 파일이어야 하지만 아래와 같이 JSDoc을 사용하여 IDE에서 일부 유형 검사를 추가할 수 있습니다.

// @ts-check

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

module.exports = nextConfig

Incremental type checking

Next.js v10.2.1 이후부터, tsconfig.json에서 활성화된 경우 incremental type checking를 지원하므로 더 큰 애플리케이션에서 type checking 속도를 높이는 데 도움이 될 수 있습니다. 이 기능을 활용할 때 최상의 성능을 경험하려면 TypeScript 버전 4.3.2 이상을 사용하는 것이 좋습니다.