Next.js集成microCMS时环境变量未检测到，Create功能报错求助

核心问题分析 #

你遇到的「env variables are missing in form application」错误，本质是Next.js客户端组件无法读取未加特定前缀的环境变量，同时可能伴随开发服务器未重启、文件配置不规范等问题。以下是分步解决方案：

1. 修正环境变量命名规则 #

Next.js中，客户端组件可访问的环境变量必须以NEXT_PUBLIC_为前缀，否则会被框架自动过滤。修改你的.env.development.local文件：

NEXT_PUBLIC_MICROCMS_SERVICE_DOMAIN=(your domain)
NEXT_PUBLIC_MICROCMS_API_KEY=(your key)

同步更新libs/client.js中的变量引用：

import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: process.env.NEXT_PUBLIC_MICROCMS_SERVICE_DOMAIN, 
  apiKey: process.env.NEXT_PUBLIC_MICROCMS_API_KEY,
  retry: true 
});

2. 重启开发服务器 #

修改环境变量后，必须停止当前运行的npm run dev/yarn dev进程，重新启动服务器，否则新的变量不会被加载生效。

3. 检查.env文件规范 #

• 确保.env.development.local放在项目根目录（与package.json同级）；
• 变量值不要添加多余引号，例如直接写NEXT_PUBLIC_MICROCMS_API_KEY=xxx（值含特殊字符时才需引号包裹）。

4. 优化API密钥安全性（可选但推荐） #

将API密钥暴露在客户端存在安全风险（用户可通过浏览器开发者工具查看），更稳妥的做法是通过Next.js API路由在服务器端处理microCMS请求：

步骤1：创建API路由文件（pages/api/blog/create.js）

import { client } from '../../libs/client';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    res.setHeader('Allow', ['POST']);
    return res.status(405).end(`Method ${req.method} Not Allowed`);
  }

  try {
    const { title, content } = req.body;
    const result = await client.create({
      endpoint: 'blogs',
      content: { title, content }
    });
    res.status(200).json(result);
  } catch (error) {
    res.status(error.statusCode || 500).json({ message: error.message });
  }
}

步骤2：修改前端页面的提交逻辑（pages/blog/create.js）

import Link from "next/link";
import { useRouter } from "next/router";

export default function Create () {
    const router = useRouter()
    const create = async (e) => {
      e.preventDefault(); // 阻止表单默认跳转行为
      const title = e.target.title.value;
      const content = e.target.content.value;

      try {
        const response = await fetch('/api/blog/create', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ title, content })
        });

        if (response.ok) {
          alert('登録されました。');
          router.push('/');
        } else if (response.status === 401) {
          alert('登録ができませんでした。');
        } else {
          alert('エラーが発生しました。');
        }
      } catch (err) {
        alert('ネットワークエラーが発生しました。');
      }
    }

  return (
    <>
      <div className='main'>
        <h1 className=''>投稿ページ</h1>

        <div className="top">
          <Link href="/" className="">
            <button className="">Topに戻る</button>
          </Link>
        </div>

        <div className="contents">
            <div>
                <h2>タイトル</h2>
                <input name="title" type="text" />
            </div>
            <div>
                <h2>コンテンツ</h2>
                <textarea name="content" ></textarea>
            </div>

            <div>
                <form onSubmit={create}>
                    <button type="submit">
                        <p>登録する</p>
                    </button>
                </form>
            </div>
        </div>
      </div>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Noriaki Takamizawa