初心者がそれっぽいWebアプリを最短で作成するための土台作り

はじめに

この記事は、「Webアプリの作成に興味はあるけど、進め方がイマイチ」という方を対象に、Next.js を用いて最短でそれっぽいものを作成するための記事です。

まずは Next.js をインストールします

Node.js公式サイト から Node.js をインストールしましょう。

ターミナルで確認

以下のコマンドでインストールできていることを確認します。

node -v
npm -v

※ 何かしらのバージョンが表示されればOKです。

Next.js のプロジェクトを作成

npx create-next-app@latest test-web-app

途中で聞かれる選択肢は以下のようにします。

√ Would you like to use TypeScript? ... No / Yes
√ Which linter would you like to use? » ESLint
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack? (recommended) ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes

開発サーバーを起動

cd test-web-app
npm run dev

ブラウザで以下にアクセスします。
http://localhost:3000

初期画面が表示されれば成功です！

「Hello World」をおしゃれに表示

app/page.js を以下のように修正してみてください。

// app/page.js
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-blue-100 to-blue-400">
      <h1 className="text-6xl font-extrabold text-white drop-shadow-lg">
        Hello, World!
      </h1>
      <p className="mt-6 text-white/90 text-lg">
        Next.js + Tailwind CSS でスタイリッシュに ✨
      </p>
      <button className="mt-8 px-6 py-3 bg-white text-blue-600 font-semibold rounded-full shadow-md hover:bg-blue-50 transition">
        Let’s Go 🚀
      </button>
    </main>
  );
}

実行結果

こんなに簡単に、おしゃれな「Hello World」を表示できます。

---

まとめ

Tailwind CSS を組み合わせることで、わずか数行のコードでスタイリッシュなデザインを実現できます。
あとは皆様のお好みに合わせてコードを書いていけば、それっぽいアプリが完成します。

要件さえ明確であれば、GPTとの壁打ちで十分に開発できますね。

以上、お読みくださりありがとうございました！