[Next.js] Next.js + TypeScript 구성하기(두번째)

next-env.d.ts

npm run dev 명령을 실행하게 되면 

프로젝트 루트에 next-env.d.ts 파일이 생성된다.

이 파일은 TypeScript 컴파일러가 Next.js 유형을 선택하도록 한다.

이 파일은 언제든지 변경될 수 있으므로 제거하거나 편집할 수 없다.

(실행하면 다시 생성된다는 의미인 것 같다.)

---

TypeScript Strict 모드

TypeScript Strict모드는 기본적으로 꺼져있다.

엄격한 룰을 적용하는 모드이므로 익숙해지기 전까지는

tsconfig.json에서 false로 꺼두는 편이 좋을 것 같다.

---

Additional.d.ts 파일

next-env.d.ts 파일을 편집하여 추가 유형을 포함하는 것이 아닌

새 파일을 추가하여 추가적인 유형을 포함하도록 할 수 있다.

원하는이름.d.ts 파일을 만든 다음 tsconfig.json에서 include 해주면 된다.

---

Static Generation and Server-side Rendering

getStaticProps, getStaticPaths, getServerSideProps를 사용하는 경우

GetStaticProps, GetStaticPaths, GetServerSideProps를 import 하여 사용할 수 있다.

아래는 예시이다.

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 Route에 대한 기본적으로 제공하는 유형이 있다.

import type { NextApiRequest, NextApiResponse } from 'next'

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

위와 같이, 

req와 res의 타입도 주어진다.

또 다른 방법도 있다.

import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

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

참고로 import type을 하는 이유는 타입표기와 선언에 사용될 선언만 import 하는 것이다.

항상 완전히 제거되므로, 런타임에 남아있는 것은 없다.(TypeScript 공식 문서 참고)

---

Custom App

원하는 대로 커스텀하게 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

---

Path aliases and baseUrl

Next.js는 tsconfig.json, paths, baseUrl을 자동적으로 지원한다.

여기에 대해서는 Next.js의 공식문서 Absolute Imports and Module path aliases

를 정리할 때 다루도록 하겠다.

Advanced Features: Absolute Imports and Module Path Aliases | Next.js

---

Type checking next.config.js

next.config.js 파일은 Babel 또는 TypeScript에 의해 구문 분석되지 않으므로

JavaScript 파일이어야 하지만, 아래와 같이 JSDoc을 사용하여 IDE에서

일부 type checking을 할 수 있다.

// @ts-check

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

module.exports = nextConfig