事前準備

warning

導入指標をまだ読んでいない方は、まずそちらをご覧ください。導入指標と自身のシステムを比較検討し、省力化コンポーネントの導入を決めた場合にのみ、以下の内容をお読みください。

本章では、省力化コンポーネントをプロジェクトに導入するための手順について説明します。

まず初めに、事前準備として必要となる以下の 3 つの作業について説明します。

Node.js のインストール

warning

既に Node.js がインストールされている方は、Next.js プロジェクトの作成に進んでください。

Node.js の公式サイトより、LTS 版をインストールしてください。

warning

既に Next.js プロジェクトを作成済みの方は、導入ツールのダウンロードに進んでください。

以下に示すリンク先 (Next.js 公式サイト) を参照し、Next.js プロジェクトの作成を行ってください。

warning

プロジェクトを作成するときは、以下の 2 点に注意してください。

バージョンは 14 系を選択してください。（次節で登場する省力化コンポーネントの導入ツールは、バージョン 14 系の Next.js プロジェクトに対応しています。）
ルーティング方式は App Router を選択してください。（Pages Router は現在非推奨となっています。）

省力化コンポーネントの資材をインストールするためのツールが、GitHub の spa-view-item-component リポジトリに格納されています。

Git をインストールしている場合は、以下のコマンドでリポジトリをクローンしてください。

Terminal

$ git clone https://github.com/Fintan-contents/spa-view-item-component.git

Git をインストールしていない、もしくは使わない場合は、以下のリンクから zip ファイルをダウンロードし、任意の場所に解凍してください。