常連

# やろうとしていること
- Gatsby×MicroCMSでLP制作
- GraphQLでデータを取得して動的に静的ページを生成
- Netlifyで自動ビルド＆デプロイ

# 問題
CMS側で任意入力としているフィールドが空の時、ビルドで失敗する

例）CMSで以下のようなフィールドがあります
- メイン画像(mainImage)
- タイトル（title）
- サブ画像(subImage)

サブ画像が未入力の時、以下のコードだとGatsbyのビルドが失敗します。
```
export const query = graphql`{
  microcmsHoge {
    title
    mainImage {
      url
    }
    subImage { //ここでビルド失敗
      url
    }
  }
}`
```
`Cannot query field "subImage" on type "microcmsHoge"`

# 分からないこと
データが存在しないフィールドから情報取得しようとするとコケるということだと思うのですが、
CMS運用のユースケースとして、フィールドを空（未入力）にすることを許容したいことは多々あるかと思います。

そのような場合、フロントの実装はどのようにすれば良いのでしょうか？
GraphQLを使うのが初めてのため、初歩的な質問でしたらすみません。よろしくお願いします。

Gatsby×CMSで、GraphQLで情報を取得しようとするとCannot query fieldエラーになる

### 実現したいこと
401エラー、Hydration children mismatchを解消したい


### 発生している問題・分からないこと
下記の問題が発生。

・本番環境にて401エラー（microcmsで作成したブログ部分が表示しない。.envの設定はnetlify側wにも追加済）
・ローカル環境にてhydration children mismatch発生（出力データや記事の表示件数にズレも見当たらずどこが引っかかっているのか見当がつきません、、、）

microcmsの設定はhttps://blog.microcms.io/nuxt3-jamstack-blog/ を参照しました。

### エラーメッセージ
```error
本番環境の場合(netlify)
Failed to load resource: the server responded with a status of 401 ()

ローカルの場合
chunk-UKZM2QLG.js?v=6ab75479:1502 [Vue warn]: Hydration children mismatch on 
<ul class="bl_blogList" data-v-inspector="components/bloglist.vue:3:5">
Server rendered element contains more child nodes than client vdom. 
```

### 該当のソースコード

```blogs.vue
<template>
  <div>
    <section class="">
      		<div class="container">
        <h1 class="el_head">投稿一覧</h1>
        <ul class="bl_blogList">
        <li v-for="blog in data?.contents" :key="blog.id">
          <NuxtLink :to="`/${blog.id}`">
            <img :src="blog.eyecatch?.url || '/noimg.jpg'" :width="blog.eyecatch?.width" :height="blog.eyecatch?.height" alt="" />
            <h4>{{ blog.title }}</h4>
            <span class="el_blogLabel">{{ blog.category?.name }}</span>
            <span class="el_blogData">{{ dataFormat(blog.publishedAt ?? blog.createdAt) }}</span>
          </NuxtLink>
        </li>
      </ul>
      </div>
    </section>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import type { Blog } from "~~/types/blog";
import { dataFormat } from '~~/utils/dataFormat';
const { data } = await useMicroCMSGetList<Blog>({
  endpoint: "blogs",
});
</script>
```

```blog.ts
import type { MicroCMSImage, MicroCMSListContent } from "microcms-js-sdk";
import type { Category } from "./category";

export type Blog = {
  title?: string;
  content?: string;
  eyecatch?: MicroCMSImage;
  category: (MicroCMSListContent & Category) | null;
};
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
ローカル環境でのHydration children mismatch解消のため、ネット検索＋chatgptなどで解決を図るもズレが見当たらずどこを直してよいかわからない。
本番環境に移したら解決するのかと思い、github連携からnetlifyにデプロイ。
サイトは問題なく表示するが、ブログに関する部分が401エラーで表示しない。という状況です。
根本的に見る場所が間違っているのでしょうか？

### 補足
・node.js v18.19.0
・npm 10.2.3

・Nuxt@3.10.0
・microcms
・netlify


Nuxt3+microcms+netlifyで作成したWEBサイトで401エラー

### 実現したいこと

Next.js13 でmicroCMSの記事一覧・記事を取ってこれるようにしたい。

### 前提
Next.js13を使っている
microCMSを使う

 
ここに質問の内容を詳しく書いてください。
Next.jsとmicroCMSでブログサイトを作りたいです。
テキスト、microCMSが公式で出しているドキュメントを参考にしました。
しかしNext.js13からgetStaticPropsがapp内で使えなくなったと。


### 発生している問題・エラーメッセージ
```
エラーメッセージ
./src/app/blog/page.js
ReactServerComponentsError:

"getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching
```

該当のソースコード

```Next.js
export const getStaticProps = async () => {
  const data = await client.get({ endpoint: 'blog' })

  return {
    props: {
      blog: data.contents,
    },
  }
}
```

### 試したこと
以下の記事や公式ディレクトリで紹介されているような事は試しましたが、イマイチうまくいきません。
また、getStaticPropsを使っているパターンが多く、悩んでます。
https://blog.microcms.io/nextjs13-microcms-rsc/

### 補足情報（FW/ツールのバージョンなど）
teratailで似たような質問されている方がいて、自己解決されたとあります。
直接コンポーネントでやったら出来た。と書いてありますが、それすらもわかりません。
https://teratail.com/questions/371222

またレンダリングオプションを指定する方法があるようなのですが、ドキュメントを見ても書き方がわかりません。
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#parallel-data-fetching

NextやReactをまだまだ始めたばかりで、質問内容も的をいない部分があるかもしれませんが、何卒よろしくお願いいたします。

Next.js13でgetStaticPropsが使えず、microCMSと連携ができません。

### 実現したいこと
Next.jsとmicroCMSを使用したブログ兼ホームページをvercelを使わずにレンタルサーバーで公開したいです。
### 前提

ここに質問の内容を詳しく書いてください。
（例）
NextjsとmicroCMSを使用してホームページを作成しております。(チュートリアル)
ローカル環境では記事一覧を取得し、投稿があれば追加する機能は実装できました。
個別ページもgetStaticPropsで取得し別ページで表示することにも成功しました。
このサイトをvercelを使わずにロリポップや契約しているレンタルサーバーに公開する事は可能でしょうか？
初学者なのでbuild等は詳しくわかっておりません。

公開する事は可能でも記事一覧ページに更新がある度に動的に追加する等はできないのでしょうか？

詳しい方がおりましたら是非教えて頂きたいです。
まとまっていない文章で申し訳ございません。m(_ _)m




```ここに言語名を入力
JavaScript
```


Nextjs13を使用しており、プロジェクトは create-next-appで作成しました。

Next.jsとmicroCMSを使用したホームページをロリポップで公開したい。

### 実現したいこと
microcmsのeyecatch画像をnext/imageを使用して取得をし表示をしたい


### 発生している問題・エラーメッセージ
```ここに言語を入力
Error: Invalid src prop (https://images.microcms-assets.io/assets/694bd8d438e745a3bc53d220286caab9/c10dd74e27034795b29f712257fab74e/blog-template.png) on `next/image`, hostname "images.microcms-assets.io" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
```
翻訳したところ
"images.microcms-assets.io" が構成されていません`next.config.js` の画像の下
とのことでしたが
検索等したのですが理解ができず躓いてしまっております。


### 該当のソースコード

```ここに言語名を入力
<Image src={blog.eyecatch.url} width={312} height={163} alt="Sunset in the mountains"/>
```

### 試したこと
next.config.jsに以下のコードを追記
```next.config.js
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,

　//↓のコードを追加
  images:{
    domains:['images.microcms-assets.io'],
  },

}
module.exports = nextConfig
```

お時間のある方、どなたかご回答いただけると幸甚です。


next/imageでmicrocmsのアイキャッチを取得したい

### 前提・実現したいこと

表題のエラーを解決したいです。
[こちら](https://document.microcms.io/tutorial/nuxt/microcms-blog-clone)の記事を参考にnuxt.jsでmicroCMSのブログクローンを作成しています。

### 発生している問題・エラーメッセージ

記事通りにAPIを作成し、.envファイルを作成して、API_KEYとSERVICE_IDを追記し、

```
npm run dev
```

で、サーバーを起動してlocalhost:3000にアクセスしましたが以下のエラーが表示されてしまいます。

```
エラーメッセージ
serviceDomain or endpoint may be wrong. Details: Error: fetch API response status: 401
```

### 該当のソースコード

エラーが発生しているコード
node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js 16行目

### 試したこと
[こちら](https://blog.microcms.io/renew-x-microcms-api-key/)の記事を見て、microCMSのAPI_KEYがリニューアルされたと知り、APIのデフォルト権限を変更
postmanなどのclientからAPIのURLを入力してヘッダー情報に
```
X-MICROCMS-API-KEY: <自分のAPI_KEY>
```
と入力してエンドポイントを叩くと、正常にレスポンスが帰ってきます。

[こちら](https://teratail.com/questions/356673)の記事も参考にして、
.envの```API_KEY```,```SERVICE_ID```が参照されているファイル（microcms.js,nuxt.config.js）に
直接```API-KEY```と```SERVICE_ID```を記述してみましたがエラーは変わりませんでした。

エラー解消にご協力よろしくお願い致します。

MicroCMSのクローンブログでfetchAPIが401エラーになる。

お疲れ様です。
質問お願いします。

現在`Next.js`×`microCMS`でブログを作っているのですが、`axios`を使用した下記のHTTPリクエストで**401エラー**が出る状態です。
（認証コードについては`env.development.local`に保存しています）

```env
API_KEY='aaaaaaaaaaaaaaaaaaaaaaaa'（仮の`API-KEY`です）
```

```JavaScript
const data = axios.get('https://〇〇.microcms.io/〇〇', {
    headers: {
        'Content-Type': 'application/json',
        "X-API-KEY": process.env.API_KEY,
    }
}).then(response => {
    console.log('status:', response.status);
    console.log('body:', response.data);
}).catch(error => {
    console.log('error:', error);
});
```

ただ、`"X-API-KEY": "aaaaaaaaaaaaaaaaaaaaaaaa"`のように直接`API-KEY`を入力するとエラーは出ません。

何が違うのか分からないので分かる方ご教授お願いします。

axiosを使用したHTTPリクエスト時に401エラーが出る件について

### 実現したいこと

Wordpressの記事データをmicroCMSへ移行するために、下記の記事を参考に移行しようとしています。
https://zenn.dev/kandai/articles/f6a034d166e4c977a78e

```ここに言語を入力
echo $data['id'] . ':' . $html . "\n";
```
しかし、[参考記事](https://zenn.dev/kandai/articles/f6a034d166e4c977a78e)の終盤に記載されている上記を実行すると
```ここに言語を入力
000（記事ID）:{"message":"POST is forbidden."}
```
と、記事の数だけ返ってきてしまいました。

PHPはおろか、APIを叩くことにも慣れていませんので、どのようなエラーなのかいまいちイメージが出来ていないのですが、
こちらはPOSTを拒否されているということなのでしょうか...？
だとすると、デフォルト権限でPOSTを許可としているのに何故拒否されているのでしょうか？


### やってみたこと
・microCMSのAPIスキーマなどの設定は[参考記事](https://zenn.dev/kandai/articles/f6a034d166e4c977a78e)の内容と全く同じように設定しました。
・しかし、取得したAPI KEYを記述する所の「X-WRITE-API-KEY」は、「X-MICROCMS-API-KEY」に変更しています（X-MICROCMS-API-KEYに統一されたようです）
・microCMS管理画面からデフォルト権限のGET、POSTにチェックがついているかどうかの再確認
・↑念の為、個別権限も同じように設定しました
・var_dumpで記事のデータが$dataの配列の通りに取得されているかどうかの確認（されていました）
・xmlのサイズを小さくして実行　[参考](https://document.microcms.io/manual/limitations)
・一度に何度も実行してしまったので、時間を5時間ほど置いてから再度実行
microCMSのプランは無料プランです。


不足情報などございましたらご指摘いただけますと幸いです。
よろしくお願いします。


### 追記
実際のコードはこちらです。
```php
<?php

// 読みこむXML
$xml = "./blog.xml";
$imgBasePath = 'https://images.microcms-assets.io/bar/';
$xmlData = simplexml_load_file($xml, 'SimpleXMLElement', LIBXML_NOCDATA);

$url = 'エンドポイント';
$headers = array(
    'Content-Type: application/json',
    'X-MICROCMS-API-KEY: XXXXXXXXXX'
);

foreach ($xmlData->channel->item as $entry) {

    // カテゴリの設定
    $cateArray = [];
    $categories = json_decode(json_encode($entry->category), true);

    foreach ($categories as $category) {
        if (is_array($category)) continue;

        switch($category) {
            case 'event':
                $cateArray[] = 'event';
                break;
            case 'notice':
                $cateArray[] = 'notice';
                break;
            case 'blog':
                $cateArray[] = 'blog';
                break;
        }
    }

    // コンテンツ取得
    $contents = trim(strval($entry->children('content', true)->encoded));

    preg_match_all('/src="https:\/\/hoge\.com\/wp-content\/uploads\/(.*)(png|jpg|jpeg|gif)/i', $contents, $matches);

    // 置き換え用の配列を作成
    $pattern = [];
    $replace = [];
    foreach ($matches[0] as $key => $match) {
        $pattern[] = '/' . preg_replace('/\//', '\/', $match) . '/';
        $pathArray = explode('/', $match);
        $paths = array_reverse($pathArray);
        $replace[] = 'src="' . $imgBasePath . "{$paths[2]}_{$paths[1]}_{$paths[0]}";
    }

    // 置き換え実行
    $html_content = preg_replace($pattern, $replace, $contents);

    // 送信用のデータ作成
    $data = [
        'id' => '000' . strval($entry->children('wp', true)->post_id),
        'title' => trim(strval($entry->title)),
        'category' => array_unique($cateArray),
        'html_contents' => $html_content,
        'is_html' => true,
        'is_migration' => true
    ];

    // curlでPOSTする
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, TRUE);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    $html = curl_exec($ch);

    // curlでエラー
    if(curl_errno($ch)){
        $CURLERR .= 'curl_errno：' . curl_errno($ch) . "\n";
        $CURLERR .= 'curl_error：' . curl_error($ch) . "\n";
        $CURLERR .= '▼curl_getinfo' . "\n";
        foreach(curl_getinfo($ch) as $key => $val){
            $CURLERR .= '■' . $key . '：' . $val . "\n";
        }
        echo nl2br($CURLERR);
    }

    curl_close($ch);


    echo $data['id'] . ':' . $html . "\n";
```

■管理画面での設定
APIキー管理ページから設定できる「デフォルト権限」と「対象API」では、GET・POSTにチェックがついている状態です。