Next.js + TypeScript 핵심 예제

Next.js + TypeScript 핵심 가이드

1. 기본 타입 정의와 인터페이스

타입 정의의 기본

type Todo = {
  id: number;
  text: string;
  done: boolean;
  createdAt: Date;
}

// 인터페이스 정의
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';  // 리터럴 타입
}

2. 컴포넌트 Props 타입 지정

// props 타입 정의
interface ButtonProps {
  text: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

// 컴포넌트에서 사용
const Button: React.FC<ButtonProps> = ({ text, onClick, variant = 'primary' }) => {
  return (
    <button onClick={onClick} className={variant}>
      {text}
    </button>
  );
}

3. 페이지 컴포넌트와 라우팅 타입

// pages/users/[id].tsx
interface UserPageProps {
  user: User;  // 위에서 정의한 User 인터페이스 사용
}

export default function UserPage({ user }: UserPageProps) {
  return <div>{user.name}</div>
}

4. API 응답 타입 정의

// api 응답 타입
interface ApiResponse<T> {
  data: T;
  message: string;
  status: number;
}

// 사용 예시
async function fetchUser(id: number): Promise<ApiResponse<User>> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

5. 이벤트 핸들링

// 이벤트 타입 지정
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // 제출 로직
};

6. 상태 관리 (useState)

// 상태 타입 지정
const [user, setUser] = useState<User | null>(null);
const [todos, setTodos] = useState<Todo[]>([]);

7. Context API 타입

// context 타입 정의
interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | null>(null);