Next.jsとAnt Designを使用したアプリ開発の第一歩

Next.jsとAnt Designを使用したアプリケーションの開発を始める第一歩である、セットアップの手順を紹介します。

1. プロジェクトのセットアップ

最初のステップは、新しいNext.jsアプリケーションを作成することです。TypeScriptを使用するために、以下のコマンドを実行します。

npx create-next-app@latest --typescript

このコマンドは、最新バージョンのNext.jsを使って、TypeScriptをサポートする新しいプロジェクトを作成します。コマンド実行後、プロジェクトディレクトリに移動します。

2. Ant Designのインストール

次に、UIコンポーネントライブラリであるAnt Designをプロジェクトに追加します。これは、以下のnpmコマンドで簡単に行えます。

npm install antd

3. Ant Designコンポーネントの使用

Ant Designがインストールされたら、そのコンポーネントをプロジェクトで使用できるようになります。例として、Button コンポーネントを使用してみましょう。

まず、pages/index.tsx を開いて、以下のコードを記述します。

import { Button } from "antd";

export default function Home() {
  return (
    <main>
      <Button type="primary">テストボタン</Button>
    </main>
  );
}

これで、Ant DesignのButton コンポーネントが使えるようになり、テストボタン と表示されたボタンがページ上に表示されます。

4. カスタムテーマの設定

Ant Designをプロジェクトに組み込んだら、カスタムテーマを設定して、デザインをカスタマイズすることもできます。これには、LessやSassのようなCSSプリプロセッサを使用し、Ant Designが提供する変数をオーバーライドすることで行います。

5. 開発サーバーの起動

すべてのセットアップが完了したら、開発サーバーを起動して、アプリケーションが正しく動作するか確認しましょう。以下のコマンドを使用します。

npm run dev

ブラウザでhttp://localhost:3000 にアクセスすると、作成したテストボタンを含むページが表示されます。

これで、Next.jsとAnt Designを使用したアプリケーションの初期セットアップは完了です。これらのツールを使用することで、効率的に美しく機能的なウェブアプリケーションを開発できます。