ReactのTypeScriptとNext.js | React入門

Propsに型を付ける

TypeScriptを使うと、コンポーネントへ渡すpropsの形を明示できます。呼び出し側の入力ミスをエディターやコンパイラーで発見できます。

propsの型TSX

type UserCardProps = {
  name: string;
  age: number;
  active?: boolean;
};

function UserCard({ name, age, active = true }: UserCardProps) {
  return <p>{name}（{age}歳）: {active ? '有効' : '停止'}</p>;
}

?を付けたpropsは省略可能です。APIのデータは実行時に本当に型どおりか分からないため、必要に応じてバリデーションも行います。

イベントとstateの型

入力イベントTSX

import { useState, type ChangeEvent } from 'react';

function SearchBox() {
  const [query, setQuery] = useState<string>('');
  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    setQuery(event.target.value);
  }
  return <input value={query} onChange={handleChange} />;
}

stateの初期値から型を推論できる場合もありますが、空配列やnullを含む状態は型引数を明示すると意図が伝わります。

Next.jsを始める

Next.jsはReactを使ったWebアプリケーションのためのフレームワークです。ルーティング、サーバー側での処理、画像最適化などをまとめて扱えます。

プロジェクト作成SHELL

npx create-next-app@latest next-practice
cd next-practice
npm run dev

選択肢はプロジェクトの目的に合わせます。App Routerを使う構成では、app/page.tsxがトップページ、app/about/page.tsxが/aboutに対応します。

ServerとClient

Next.jsのApp Routerでは、コンポーネントは既定でServer Componentです。クリックやuseStateなどブラウザーでの操作が必要なファイルには、先頭へ'use client';を付けてClient Componentにします。

Client ComponentTSX

'use client';

import { useState } from 'react';

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? 'いいね済み' : 'いいね'}</button>;
}

使い分けデータ取得や初期HTMLの生成はServer Component、クリック・入力・ブラウザーAPIはClient Componentというように、必要な場所だけClientにします。

Reactの基本を理解してからNext.jsへ進むと、フレームワークの機能とReactの機能を混同しにくくなります。

React入門の講座一覧

Propsに型を付ける

イベントとstateの型

Next.jsを始める

ServerとClient