Nuxt Server Routesで簡単フルスタック開発！バックエンド構築不要のシンプルな方法

フルスタック開発というと、どうしてもフロントエンドとバックエンドを別々に構築する必要があると思いがちです。しかし、Nuxt Server Routesを使えば、バックエンドを別途用意せずに、フルスタックアプリケーションを構築できます。今回は、Nuxt Server Routesの仕組み、魅力、そして実際にデータベースと連携するシンプルなアプリケーション構築方法について解説します。

Nuxt Server Routesとは？

Nuxt 3では、/serverディレクトリ内にエクスポートしたものが自動的にサーバーサイドのAPIルートになります。

例えば、/server/api/hello.tsというファイルを作成し、以下のように記述します。

export default defineEventHandler(() => {
  return { message: 'Hello from the server!' }
})

ブラウザで/api/helloにアクセスすると、以下のJSONレスポンスが返ってきます。

{ "message": "Hello from the server!" }

非常にシンプルで、驚くほど簡単にAPIを作成できます。

Nuxt Server Routesのメリット

• バックエンドリポジトリが不要: フロントエンドとバックエンドを一体化できます。
• API開発が迅速: シンプルな記述でAPIを構築できます。
• JAMstack構成に最適: 静的サイトジェネレーターとの連携が容易です。
• TypeScriptを標準サポート: 型安全な開発が可能です。
• 「Backend-lite」なアプリに最適: ブログ、ダッシュボード、SaaS MVPなどの開発に向いています。

サンプルアプリ：シンプルなメモアプリを作成

Nuxt Server Routesを使って、ユーザーがメモを作成・一覧表示できるシンプルなメモアプリを構築してみましょう。フロントエンドとバックエンドの両方にNuxtを使用し、データベースには軽量なSQLiteとPrisma (ORM) を組み合わせます。

1. Nuxtアプリのセットアップ

npx nuxi init nuxt-notes-app
cd nuxt-notes-app
npm install

2. PrismaのインストールとSQLiteプロバイダーの初期化

npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite

3. prisma/schema.prismaの設定

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Note {
  id    Int     @id @default(autoincrement())
  title String
  body  String
}

4. Prismaクライアントの生成

npx prisma generate
npx prisma db push

これで、データベースが利用可能な状態になります。

5. サーバールート/server/api/notes/index.tsの作成（読み取り操作）

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default defineEventHandler(async (event) => {
  return await prisma.note.findMany()
})

6. サーバールート/server/api/notes/create.tsの作成（書き込み操作）

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return await prisma.note.create({
    data: {
      title: body.title,
      body: body.body,
    },
  })
})

7. /pages/index.vueの作成 (ホームページ)

<script setup lang="ts">
const notes = ref([])
const newNote = ref({ title: '', body: '' })

async function fetchNotes() {
  notes.value = await useFetch('/api/notes')
}

async function createNote() {
  await useFetch('/api/notes/create', {
    method: 'POST',
    body: newNote.value,
  })
  newNote.value = { title: '', body: '' }
  await fetchNotes()
}

onMounted(fetchNotes)
</script>

<template>
  <div>
    <h1>My Notes</h1>
    <form @submit.prevent="createNote">
      <input v-model="newNote.title" placeholder="Title" />
      <input v-model="newNote.body" placeholder="Body" />
      <button type="submit">Add Note</button>
    </form>
    <div v-for="note in notes" :key="note.id">
      <h2>{{ note.title }}</h2>
      <p>{{ note.body }}</p>
    </div>
  </div>
</template>

このシンプルなメモアプリは、Nuxt Server Routesを使って、フロントエンドとバックエンドを一体化し、最小限のコードで実現できます。

デプロイについて

VercelやNetlifyのようなプラットフォームは、/serverディレクトリを自動的に認識するため、特別な設定は不要です。ローカルのSQLiteの代わりに、Railway、PlanetScale、Supabaseなどのデータベースサービスを使用することをお勧めします。

まとめ

Nuxt Server Routesはまるで魔法のようです。大規模なバックエンドを必要としないサイドプロジェクト、MVP (Minimum Viable Product)、または実用的なアプリケーションを構築する場合、Nuxtは非常に有効な選択肢となります。Nuxt Server Routesを活用して、迅速かつ効率的なフルスタック開発を実現しましょう。