はじめに#

社会のデジタル化、DX（デジタルトランスフォーメーション）が求められる世の中において、0からアプリケーションを独力で作り上げる能力がより求められるようになってきています。ここではエンジニアがより価値を出すために、0からWebアプリケーションを作成する方法を学習していきます。今回はNext.jsとPrismaという仕組みを使ってWebアプリケーションを作っていきます。この２つはとても簡単にアプリケーションを作れると同時に、大規模なアプリケーションを作成することのできる仕組みでもあります。

Webアプリケーションを独力で作れる力を身に着け、自らの価値を高めていきましょう。

目次#

Next.jsはReactをベースにしたフレームワークで、Webアプリケーションの画面作成からサーバーサイドの機能まで一貫して開発できるフルスタックフレームワークです。従来のReactアプリケーション開発では、フロントエンド（ブラウザ）とサーバーサイドを分けて開発していましたが、Next.jsではこれらを一つのプロジェクトで統合的に開発できるようになります。

ブラウザとサーバ

早速作っていきます。最初に、Next.jsはNode.jsというプログラムの上で動くので、Node.jsをインストールします。 https://nodejs.org/ja/ から Nodeのダウンロード推奨版をダウンロード、インストールを行ってください。

続いて、ターミナルを開いて、以下のコマンドを実行してください。

mkdir mynextapp
cd $_

これで、mynextappというディレクトリを作って、ターミナルでそのディレクトリに移動しました。

次にNext.jsアプリケーションを作成します。Next.jsでは公式のセットアップツールを使って簡単にプロジェクトを作成できます。

npx create-next-app@latest . --typescript

コマンドを実行すると、いくつかの質問が表示されます：

Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y)

と聞かれるので、yを押してください。

次に設定の質問があります。以下のように答えてください：

✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

必要なパッケージがインストールされ、プロジェクトが作成されます。完了したら、以下のコマンドでアプリケーションを起動しましょう：

npm run dev

ブラウザで http://localhost:3000/ にアクセスすると以下のような画面が表示されるはずです：

最初のNext.js

おめでとうございます！これで初めてのNext.jsプロジェクトが作成できました！内部構成を知るために、少しだけいじってみましょう。

mynextappは以下の構成になっています。代表的なディレクトリとファイルのみ記載しています：

mynextapp
├── README.md ←プロジェクトの説明ファイル
├── node_modules ←ダウンロードされたライブラリ。いじらない
├── package-lock.json ←ダウンロードされるべきライブラリのバージョン情報。いじらない
├── package.json ←プロジェクト情報
├── public ←静的ファイル（画像など）
│   ├── next.svg
│   └── vercel.svg
├── app ←Appルーターのファイル
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx ←トップページ
└── tsconfig.json ←TypeScriptの設定ファイル

Next.jsでは、appディレクトリがアプリケーションのルートになります。トップページはpage.tsxファイルで定義されています。

それではトップページを少し修正してみましょう。app/page.tsxを開いて編集します：

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm">
        <h1 className="text-4xl font-bold mb-8">Next.jsへようこそ！</h1>
        <p className="mb-4">これは私の最初のNext.jsアプリです。</p>
        <p>アンケートアプリケーションを作成していきます。</p>
      </div>
    </main>
  )
}

ブラウザを見ると、変更が即座に反映されているのがわかります。これがNext.jsの「Fast Refresh」機能です。ファイルを保存するとブラウザが自動的に更新されます。

修正されたNext.js

従来のReact+Viteアプリでは、フロントエンドとサーバーサイドを別々のプロジェクトとして作成していましたが、Next.jsでは一つのプロジェクト内にフロントエンドとサーバーサイドの機能を統合できます。

アプリケーションを終了したい場合は、ターミナルでCtrl+Cを押してください。

次はNext.jsのサーバー機能について学んでいきます。

ご質問・ご要望をお待ちしています。