Next.js에서 페이지 또는 기능 구성 요소에 대한 typescript 유형을 설정하는 방법은 무엇입니까?

Originally posted here!

Typescript를 Next.js와 함께 사용하는 경우 Next.js에서 단일 페이지 또는 기능 구성 요소에 대한 유형을 설정해야 할 수 있습니다. NextPage 모듈에서 next 유형을 가져온 다음 페이지 또는 기능 구성 요소의 유형으로 설정하면 됩니다.

예를 들어 Next.js에서 인덱스 페이지(또는 index.tsx 파일)의 유형을 설정하려고 한다고 가정해 보겠습니다. 먼저 다음과 같이 Next.js 모듈에서 NextPage 유형을 가져와야 합니다.

// import NextPage type from nextjs
import { NextPage } from "next";

이제 NextPage 파일에서 index.tsx 유형을 다음과 같이 사용할 수 있습니다.

// import NextPage type from nextjs
import { NextPage } from "next";

// setting type for index page
const IndexPage: NextPage = () => {
  return <h1>Hello World!</h1>;
};

// exporting IndexPage as default export
export default IndexPage;

Next.js의 모든 기능 구성 요소에 동일한 접근 방식을 사용할 수 있습니다.

codesandbox에 있는 위의 코드를 참조하세요.

그게 다야 😃!

😃 유용하셨다면 공유해 주세요.