TypeScriptでNext.jsのページとAPIルートに型を付ける方法を初心者向けに徹底解説

1. TypeScriptとNext.jsの関係性とは

1. TypeScriptとNext.jsの関係性とは

TypeScriptは、JavaScriptというプログラミング言語に「型」というルールを追加したものです。型とは、その箱（変数）の中に数字を入れるのか、文字を入れるのか、あらかじめ決めておく設計図のようなものです。Next.jsというWebサイトを作るための便利な道具箱と、TypeScriptというルールのセットを組み合わせることで、エラーの少ない高品質なサイト制作が可能になります。

パソコンを初めて触る方にとって、型と聞くと難しく感じるかもしれません。しかし、料理で例えるなら「肉を切るためのまな板」と「野菜を切るためのまな板」を分けるようなものです。混ぜてはいけないものを明確に分けることで、プログラミング中のうっかりミスを大幅に減らすことができます。特にNext.jsでは、画面に表示する「ページ」と、裏側でデータをやり取りする「APIルート」という二つの大きな役割があり、それぞれに正しく型を付けることが重要です。

2. Next.jsのページコンポーネントに型を付ける

2. Next.jsのページコンポーネントに型を付ける

Next.jsでは、一つのファイルがそのまま一つの「ページ」になります。このページを作成する際に使用するのが「NextPage」という型です。これを使うことで、そのファイルがNext.jsのページであることをプログラムに教えてあげることができます。

まずは、最もシンプルなページの書き方を見てみましょう。ここでは、文字を表示するだけの簡単なページを作成します。

import type { NextPage } from 'next';

const HomePage: NextPage = () => {
    return (
        <div>
            <h1>ようこそ、プログラミングの世界へ！</h1>
            <p>これはTypeScriptを使って作られたページです。</p>
        </div>
    );
};

export default HomePage;

このコードの中で NextPage という言葉が出てきましたね。これは「この関数はNext.jsのページですよ」という宣言です。これにより、ページが持つべき特性を自動的に備えることができます。

3. サーバー側でデータを取得する際の型定義

3. サーバー側でデータを取得する際の型定義

Next.jsの特徴の一つに、画面を表示する前にサーバーで準備をする「GetServerSideProps」という仕組みがあります。これにも専用の型が必要です。これを使うと、外部から持ってきたデータがどのような形をしているかを厳しくチェックできます。

例えば、ユーザーの名前と年齢を表示するページを想像してください。データの型をあらかじめ決めておかないと、名前を表示する場所に数字が入ってしまったりするトラブルが起きます。それを防ぐために下記のように記述します。

import type { GetServerSideProps, NextPage } from 'next';

type UserProps = {
    userName: string;
    userAge: number;
};

export const getServerSideProps: GetServerSideProps<UserProps> = async () => {
    return {
        props: {
            userName: "たろう",
            userAge: 25,
        },
    };
};

const UserProfile: NextPage<UserProps> = ({ userName, userAge }) => {
    return (
        

            
名前：{userName}
            
年齢：{userAge}歳
        
    );
};

export default UserProfile;

ここで使われている string は「文字」を意味し、 number は「数字」を意味します。これを 基本型 と呼びます。これらを組み合わせた UserProps という自分専用の型を作ることで、プログラムが非常に読みやすくなります。

4. APIルートの役割と型が必要な理由

4. APIルートの役割と型が必要な理由

Next.jsには「APIルート」という機能があります。これは、ブラウザからリクエストを送ると、データを返してくれる窓口のようなものです。例えば、ボタンを押した時に最新のニュースデータを取得してくる、といった動きを作る時に使います。この窓口でも型が必要です。

APIルートでは、どんなリクエスト（お願い）が来るか、そしてどんなレスポンス（お返し）を返すかを定義します。これには NextApiRequest と NextApiResponse という二つの型を使います。これらを使うことで、窓口でのやり取りがスムーズになり、データの受け渡しミスがなくなります。

5. APIルートに型を付ける実践的なコード

5. APIルートに型を付ける実践的なコード

それでは、実際にAPIルートを作成してみましょう。この例では、メッセージを返却する簡単な窓口を作ります。ファイルは pages/api/hello.ts のような場所に作成します。

import type { NextApiRequest, NextApiResponse } from 'next';

type ResponseData = {
    message: string;
    status: string;
};

export default function handler(
    req: NextApiRequest,
    res: NextApiResponse<ResponseData>
) {
    res.status(200).json({
        message: "データの取得に成功しました！",
        status: "success"
    });
}

このコードの実行結果は以下のようになります。

{
    "message": "データの取得に成功しました！",
    "status": "success"
}

res.status(200) という部分は「通信が成功しましたよ」という合言葉のようなものです。 json というのは、データをやり取りする際の標準的な形式のことです。型 ResponseData を指定しているため、もし message を入れ忘れたりすると、すぐにエラーとして気付くことができます。

6. TypeScriptのインターフェースと型エイリアス

6. TypeScriptのインターフェースと型エイリアス

プログラミングをしていると、同じ型を何度も使いたい場面が出てきます。その時に便利なのが「インターフェース（interface）」や「型エイリアス（type alias）」です。これらは「型の名前」を定義する機能です。

未経験の方には、「型エイリアスは付箋紙のようなもの」と考えると分かりやすいでしょう。長い説明をいちいち書く代わりに、「これはユーザー情報です」というラベル（付箋）を貼っておくイメージです。Next.jsのページ制作でも、このラベルをあちこちで使い回すことで、全体のコードがスッキリと整理されます。

7. コンポーネントの分割とPropsの型定義

7. コンポーネントの分割とPropsの型定義

大きなWebページを作る際、一つのファイルにすべてを書くのではなく、部品（コンポーネント）に分けて作ります。例えば、ヘッダー、メインの内容、フッターといった具合です。この部品にデータを渡す仕組みを Props（プロップス） と呼びます。

部品にデータを渡す時、そのデータが何なのかをTypeScriptで指定する必要があります。これを行うことで、部品を使い回す時に「何を渡すべきか」が誰にでも一目でわかるようになります。

import React from 'react';

type WelcomeMessageProps = {
    name: string;
    isMorning: boolean;
};

const WelcomeMessage: React.FC<WelcomeMessageProps> = ({ name, isMorning }) => {
    return (
        

            
{isMorning ? "おはよう" : "こんにちは"}、{name}さん！
        
    );
};

export default WelcomeMessage;

boolean というのは「はい（true）」か「いいえ（false）」の二択を表す型です。ここでは朝かそうでないかを判定しています。 React.FC というのは「Reactの関数コンポーネント」であることを示す型です。

8. エラーを恐れずにTypeScriptを使ってみよう

8. エラーを恐れずにTypeScriptを使ってみよう

初めてTypeScriptを触ると、赤い波線（エラー）がたくさん出て驚くかもしれません。しかし、その赤い波線こそがTypeScriptの優しさです。プログラムを実行してから「動かない！」と悩むのではなく、書いている最中に「ここが間違っているよ」と教えてくれているのです。

Next.jsとTypeScriptを組み合わせることで、プログラミングの世界がより安全で楽しいものになります。まずは簡単なページから型を付けてみて、徐々に複雑なデータにも挑戦していきましょう。一歩ずつ進めば、必ず使いこなせるようになります。