[NEXT.JS] TypeScript(타입스크립트)

소개

Next.js와 TypeScript를 함께 사용하면 코드의 안정성과 유지보수성을 크게 향상시킬 수 있습니다.

Next.js 프로젝트에 TypeScript를 설정하고 사용하는 방법을 설명합니다.

 

 

프로젝트 설정

Typescript 관련 패키지를 설치합니다.

npm install --save-dev typescript @types/react @types/node

 

TypeScript 설정 파일을 생성합니다.

touch tsconfig.json

 

프로젝트 내의 파일 확장자를 .js에서 .tsx로 변경합니다. 예를 들어, pages/index.js 파일을 pages/index.tsx로 변경합니다.

 

 

 

타입 정의

컴포넌트의 타입을 정의하여 코드의 안정성을 높일 수 있습니다. 예를 들어, props의 타입을 정의할 수 있습니다.

interface Props {
  title: string;
}

const Header: NextPage<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

export default Header;

 

 

문의사항이나 피드백은 댓글로 남겨주세요.