はじめに
Next.js は現在最も注目されている React フレームワークの一つです。本記事では、Next.js、TypeScript、TailwindCSS を使用したサンプルアプリケーション（ボタンクリックでカウントするアプリケーション）の作成手順を紹介します。
開発環境
- Windows 11
- Visual Studio Code
- Node.js
導入
1. 環境構築
以下のソフトウェアをインストールします：
- Visual Studio Code
Visual Studio Codeのダウンロード - Node.js
Node.jsのダウンロード
2. プロジェクトの作成
-
任意の場所に
NextProjectsディレクトリを作成します。
※本記事ではデスクトップに作成しています。 -
Node.js command prompt を管理者として実行します。
-
作成したディレクトリに移動します。
cd C:\Users\<username>\Desktop\NextProjects
4. 以下のコマンドを実行してアプリを作成します。
※my-appの箇所は任意のアプリ名で問題ありません。
npx create-next-app@latest my-app
5. アプリ作成時の質問にはすべてEnterキーを押下します。
※ アプリ作成時にエラーが発生した場合は、以下の対処を行います。
- NVM for Windows（インストール済の場合）とNode.jsをアンインストールして再起動
- Windowsログオンしている自身のアカウントに管理者権限を付与
- 管理者権限でNode.jsを再インストール
- npmキャッシュをクリア
npm cache clean --force
- 以下のnpm設定
npm config set registry https://registry.npmjs.org/
npm install -g npm@latest
3. アプリケーションの起動
1. 作成したアプリディレクトリに移動します。
cd my-app
2. 依存関係をインストールします。
npm install
3. アプリを起動します。
npm run dev
4. ブラウザでhttp://localhost:3000にアクセスします。
5. 以下画面が表示されていればアプリ起動は成功です。
※Node.js command promptでは以下ログが出力されます。
4. コードの編集
1. C:\Users\<username>\Desktop\NextProjects\my-app\app\page.tsx を開きます。
2. コードを記述します。
'use client'
import { useState } from 'react'
import Head from 'next/head'
const Home: React.FC = () => {
const [count, setCount] = useState(0)
return (
<div className="flex flex-col items-center justify-center min-h-screen py-2">
<Head>
<title>My Next.js App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
<h1 className="text-6xl font-bold">
Welcome to{' '}
<a className="text-blue-600" href="https://nextjs.org">
Next.js!
</a>
</h1>
<p className="mt-3 text-2xl">
Get started by editing{' '}
<code className="p-3 font-mono text-lg bg-gray-100 rounded-md">
app/page.tsx
</code>
</p>
<div className="mt-6">
<button
className="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600"
onClick={() => setCount(count + 1)}
>
Count: {count}
</button>
</div>
</main>
</div>
)
}
export default Home
3. page.tsxを保存します。
4. ブラウザを再読み込みして変更を確認します。
※ エラーが発生した場合は、エラー内容をChatGPTに投げて対処方法を聞くなどし、修正します。
実行結果
ブラウザで以下画面が表示されれば成功です。
「Count:」ボタンをクリックするとカウントされます。
まとめ
Next.js、TypeScript、TailwindCSS を使用したサンプルアプリケーションの作成手順を紹介しました。
開発プロセスにおいてはChatGPTを活用することで、コーディングの効率を大幅に向上させることができます。また、エラーが発生しても、ChatGPTに質問することで解決策を迅速に見つけられる可能性が高いと分かりました。