Next.js에서 typescript 사용하기
2022. 8. 24. 14:09ㆍFrontend/Next.js
https://noogoonaa.tistory.com/65
next.js 와 typescript를 끼얹어 보자
최근 프론트엔드 생태계는 React, Vue, Angular 이 삼대장이 주류를 이루고 최근 Typescript 또한 각광 받고 있습니다. 저 또한 프론트엔드쪽 일을 자주하는 개발자로써 자연스럽게 이 삼대장 중 React를
noogoonaa.tistory.com
자바스크립트 기반으로 생성된 Next.js를 typescript로 전환하는 과정에서 참고
1. 타입스크립트 모듈 설치
npm install --save-dev typescript @types/react @types/node
2. Next.js 프로젝트의 app 설정 바꾸기
// pages/_app.tsx
import { AppProps } from 'next/app'
function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default App
3. next가 추천하는 tsconfig 세팅을 사용하기 위해, 프로젝트 루트 디렉토리에 next-env.d.ts 파일을 생성한다.
4. 프로젝트를 다시 실행하면 해당 세팅이 적용된 tsconfig 파일이 자동 생성된 것을 확인할 수 있다.
'Frontend > Next.js' 카테고리의 다른 글
| Next.js와 이미지 최적화 (1) | 2022.12.06 |
|---|