[Next.js + Typescript] - Basics

NextPage vs React.FC

---

import type { FC } from "react";

const Home: FC = () => {
  return <></>;
};

• React Component 규칙 : 대문자로 시작 필수

import type { NextPage } from "next";

const Home: NextPage = () => {
  return <></>;
};

• page 경로기준 라우팅

• React Component 대문자 시작 규칙 필수가 아님

Props

---

interface Props {
  propName: string;
}

const Page: Nextpage<Props> = ({ propName }) => {
  return <></>;
};

• props의 타입을 지정하는 interface을 사용

• 자바의 generics와 흡사

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

interface Props {
  post: Post;
  name: string;
}

const Page: Nextpage<Props> = ({ post, name }) => {
  return (
    <>
      <p>{post.id}</p>
      <p>{post.title}</p>
    </>
  );
};

• props 1개 이상이거나 속성이 많은 Object인 경우

• 추가 interface / type 을 생성하여 사용 하면 정리하기 좋음

GetStaticProps

---

interface IParams extends ParsedUrlQuery {
  postId: string;
}

const post: NextPage<Props> = ({ post }) => {
  return <></>;
};

export default post;

export const getStaticProps: GetStaticProps = async (context) => {
  const { postId } = context.params as IParams;
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}`
  );
  const data = (await response.json()) as Post;

  console.log(data);

  return {
    props: {
      post: data,
    },
  };
};

• typescript에선 getStaticProps 함수의 타입 GetStaticProps 지정

• context.params : ParsedUrlQuery를 상속받는 interface 생성 후 파라미터 타입 지정