OJT ~ Webアプリの開発 ~

はじめに

Webアプリを開発していきましょう！

開発環境

• Windows 10 PC
• nvm
• Node.js（18.19.0）

環境構築

1．nvmのインストール

nvm-setup.exe を実行

2．コマンドプロンプトを開き、Node.js（18.19.0）をインストール

$ nvm install 18.19.0

3．Node.js（18.19.0）に切り替え

$ nvm use 18.19.0

4．現在のNode.jsの環境を確認

$ nvm list
＊ 18.19.0

はじめてのNext.js のアプリケーションを作成

1．アプリケーションのフォルダ（例：s-fujimoto-ojt）を作成

2．コマンドプロンプトでNext.js プロジェクトを作成

$ cd s-fujimoto-ojt-1223
$ npx create-next-app@latest .

? Would you like to use TypeScript? » Yes
? Would you like to use ESLint? » Yes
? Would you like to use Tailwind CSS? » Yes
? Would you like your code inside a src/ directory? » No
? Would you like to use App Router? (recommended) » Yes
? Would you like to use Turbopack for next dev? » No
? Would you like to customize the import alias (@/* by default)? » No

3．ライブラリのインストール

$ npm install

4．アプリの起動

$ npm run dev

http://localhost:3000/ にアクセス

完成です！

Hello Worldを表示するだけのページを作成

1．Cursor で app\page.tsx を開く

2．Ctrl + l でボットに聞く

「Hello Worldを表示するだけのページにして」

3．app\page.tsxを編集

page.tsx

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <h1 className="text-4xl font-bold">Hello World</h1>
    </div>
  );
}

4．アプリの起動

$ npm run dev

http://localhost:3000/ にアクセス

完成です！

Tips

ボットに「Next.js、TypeScript、TailwindCSSでいい感じにして」と聞くと、いい感じにしてくれます

page.tsx

export default function Home() {
  return (
    <main className="min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-3xl mx-auto text-center space-y-8">
          <h1 className="text-6xl font-bold text-white tracking-tight">
            Welcome to My App
          </h1>
          <p className="text-xl text-indigo-100">
            Next.js + Tailwind CSS + TypeScriptで構築された
            モダンなWebアプリケーション
          </p>
          <div className="flex gap-4 justify-center mt-8">
            <button className="px-6 py-3 bg-white text-indigo-600 rounded-lg font-semibold hover:bg-indigo-50 transition-colors">
              はじめる
            </button>
            <button className="px-6 py-3 border-2 border-white text-white rounded-lg font-semibold hover:bg-white/10 transition-colors">
              詳しく見る
            </button>
          </div>
        </div>
      </div>
    </main>
  );
}

お疲れ様でした