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.
.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>
</>
);
}