こんにちは😊
株式会社プロドウガの@YushiYamamotoです！
らくらくサイトの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️

この記事は Nextjs Advent Calendar 2025 の参加記事です🎄

Next.js App Router、最高ですよね。
でも、個人開発や小規模な社内ツールを作るとき、ふと思いませんか？

「バックエンド（API Route / DB接続 / メール送信処理）、書くの面倒くさいな……」

Prismaをセットアップして、Supabaseと繋いで、Resendでメールを送って……。
もちろん本番サービスなら必要ですが、もっとサクッと作りたい時もあります。

そこで今回は、Next.jsの「Server Actions」 と、ノーコードツール 「n8n」 を組み合わせて、バックエンドのコードを一行も書かずに高機能なアプリを作るアーキテクチャ を紹介します。

🏗️ アーキテクチャ：Server Actions を「BFF」にする

構成は非常にシンプルです。
Next.jsはUIとバリデーションに徹し、データの保存や加工はすべてn8n（Webhook）に投げます。

なぜ Server Actions なのか？

クライアント（useEffect や onClick）から直接n8nを叩かない理由は2つあります。

セキュリティ: n8nのWebhook URLをブラウザに露出させないため。
CORS回避: n8nのWebhookはCORS設定が面倒な場合があるため、Next.jsサーバーを経由させるのが確実。

🛠️ 実装：お問い合わせフォームを作ってみる

例として、「お問い合わせ内容を送信すると、Notionに保存されてSlackに通知が飛ぶ」機能を実装します。

1. n8n側の準備

n8nで Webhook ノードを作成し、Methodを POST に設定します。
（このURLを .env に N8N_WEBHOOK_URL として保存しておきます）

2. Next.js (Server Action) の実装

app/actions.ts に、n8nへデータを中継する関数を定義します。
ここでは Zod を使って、n8nに渡す前に型安全性を担保します。

'use server'

import { z } from 'zod'

// バリデーションスキーマ
const schema = z.object({
  name: z.string().min(1, '名前は必須です'),
  email: z.string().email('正しいメールアドレスを入力してください'),
  message: z.string().min(10, 'メッセージは10文字以上でお願いします'),
})

export async function submitContact(prevState: any, formData: FormData) {
  // 1. バリデーション
  const validatedFields = schema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message'),
  })

  if (!validatedFields.success) {
    return {
      success: false,
      errors: validatedFields.error.flatten().fieldErrors,
    }
  }

  try {
    // 2. n8nのWebhookを叩く (BFFとしての役割)
    const response = await fetch(process.env.N8N_WEBHOOK_URL!, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 必要ならここで認証ヘッダーを付与
        // 'Authorization': `Bearer ${process.env.N8N_AUTH_TOKEN}`
      },
      body: JSON.stringify(validatedFields.data),
    })

    if (!response.ok) {
      throw new Error('n8n error')
    }

    return { success: true, message: '送信しました！' }
  } catch (error) {
    return { success: false, message: '送信に失敗しました。' }
  }
}

3. Next.js (Client Component) の実装

React 19 (Next.js 15) の useActionState を使ってフォームを作ります。

'use client'

import { useActionState } from 'react'
import { submitContact } from './actions'

const initialState = {
  success: false,
  message: '',
}

export default function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitContact, initialState)

  if (state.success) {
    return <div className="text-green-500">🎉 {state.message}</div>
  }

  return (
    <form action={formAction} className="flex flex-col gap-4 max-w-md mx-auto">
      <div>
        <label>お名前</label>
        <input name="name" type="text" className="border p-2 w-full" />
        {state.errors?.name && <p className="text-red-500">{state.errors.name}</p>}
      </div>
      
      {/* ... email, message も同様 ... */}

      <button 
        type="submit" 
        disabled={isPending}
        className="bg-blue-500 text-white p-2 rounded disabled:opacity-50"
      >
        {isPending ? '送信中...' : '送信する'}
      </button>
      
      {state.message && !state.success && (
        <p className="text-red-500">{state.message}</p>
      )}
    </form>
  )
}

🚀 このアーキテクチャのメリット

バックエンド開発が「お絵かき」になる:
- 「やっぱりメールも送りたい」「Notionじゃなくてスプレッドシートにしたい」といった変更が、Next.jsのコードを触らずにn8nの画面だけで完結します。
Next.jsは「表示」に集中できる:
- 複雑なビジネスロジックや外部API連携をNext.jsから追い出すことで、フロントエンドのコードが驚くほどクリーンになります。
Server Actionsの恩恵:
- JavaScriptが無効な環境でも動作し、プログレッシブエンハンスメントに対応できます（n8n連携でも！）。

まとめ

「Next.jsを使うなら、バックエンドもTypeScriptで書かなきゃ」という固定観念を捨ててみましょう。
Server Actions を「n8nへの入り口」として使う ことで、爆速でプロトタイプを作り、検証サイクルを回すことができます。

2025年は、「書かない勇気」 を持ってNext.jsを使い倒していきましょう！💪

最後に：業務委託のご相談を承ります

私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 ポートフォリオ

🌳 らくらくサイト