env variables are missing in form apprication

I’m making Next.js app and trying to make CRUD feature.

When I made “Create” page such as below code, the error comes up.
It seems like env detection problem.

BTW, I’m using microCMS as API.

I don’t know how to fix it. Tell me how, please.
Thanks in advance.

Can't detect env variable

.env.development.local

MICROCMS_SERVICE_DOMAIN=(some domain)
MICROCMS_API_KEY=(some key)

libs/client.js

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

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

My form code is like this.
pages/blog/create.js

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

export default function Create () {
    const router = useRouter()
    const create = async (e) => {
  
      const title = "aaaa";
      const content = "bbbb";

      client.create({
        endpoint: "blogs",
        content: {
          title: title,
          content: content,
        }
      }).then((res) => {
        if (res.status === 401) {
          alert("登録ができませんでした。")
        } else {
          alert("登録されました。")
          router.push(`/`)
        }
      })
    }

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

        {/* TOPに戻るボタン */}
        <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>
    </>
  );
}