常連

### 使用しているバージョン
```package.json
"next": "^12.2.0",
"react": "17.0.2",
```

### 実現したいこと
getStaticProps内でfetchしてきたjsonを引数で渡すと順序が変わってしまう問題を修正したい

### 前提

TypeScriptとNext.jsでブログサイトを構築し、microCMSから取得してきたデータを表示しています。

Next.jsのSSGでサイトを表示しているので、getStaticProps内でmicroCMSからfetchをしたのちに、取得してきたList型のデータを引数としてコンポーネントに値を渡しているのですが、ブラウザに表示すると、なぜか順番が変わってしまう問題が起こっています。


### 発生している問題・エラーメッセージ

特にエラーメッセージは出力されていません

### 試したこと

引数として受け取った値をconsole.log()にて出力して確認したのですが、ターミナル上では順番通りになっていました。しかし、ブラウザのconsoleに表示されたのは順序が異なったものが出力されました。

ページの更新をすると、ターミナル上は勿論のこと順番は変わらないのですが、ブラウザ上では更新するたびに順序が変わってしまいます。

### 教えてほしいこと

ターミナルとブラウザのコンソールで出力された値が異なる原因がわからないのでそこの原因が分かれば問題が解決できると思っています。

同様の問題を見かけたことがあるかたは参考になりそうなサイトのURLを張り付けて頂くだけでも構いませんので、教えて頂けると非常に助かります。

実際のコードは貼り付け可能ですが、コンポーネントを疎結合にしているためすべてを張り付けることが難しいです。


Next.js 引数で渡したリストの順序が変わってしまう

### 実現したいこと

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のアイキャッチを取得したい

### 実現したいこと

- 関数コンポーネントにgetStaticProps()からpropsを渡す

### 前提

Next.js13の勉強中で、ブログサイトを作成しています。
microCMSからブログ記事のデータをgetStaticPropsで取得して関数コンポーネントに渡すコードを書いたのですがpropsがundefineとなってしまいます。
値の取得はapi.js内のgetPostBySlug(slug)を使って行っています。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
- error app\blog\schedule\page.js (8:16) @ title
- error TypeError: Cannot read properties of undefined (reading 'title')
    at Schedule (./app/blog/schedule/page.js:18:28)
    at stringify (<anonymous>)
digest: "3697126974"
   6 |   return(
   7 |     <Container>
>  8 |       <h1>{blog.title}</h1>
     |                ^
   9 |     </Container>
  10 |   )
  11 | }
```

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

```JavaScript　page.js
import { getPostBySlug } from "lib/api";
import Container from "components/container";

export default function Schedule({ blog }){
  return(
    <Container>
      <h1>{blog.title}</h1>
    </Container>
  )
}

export async function getStaticProps(){
  const slug = 'schedule'

  const post = await getPostBySlug(slug)

  return {
    props: { 
      blog: post
    },
  }
}
```
```JavaScript　api.js
import { createClient } from 'microcms-js-sdk'

export const client = createClient({
  serviceDomain: process.env.SERVICE_DOMAIN,
  apiKey: process.env.API_KEY,
})

export async function getPostBySlug(slug) {
  try {
    const post = await client.get({
      endpoint: 'blogs',
      queries: { filters: `slug[equals]${slug}` }
    }).then((res) => console.log(res));
    return post
  } catch (error) {
    console.log('~~getPostBySlug~~')
    console.log(error)
    return null
  }
}
```

### 試したこと
書籍や公式ドキュメントのコードを見たり、propsをblog: post.contents[0]に書き換えたりしましたがうまく値を渡せませんでした。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


Next.jsのgetStaticPropsを使用して関数コンポーネントにpropsを渡したい

### 前提・実現したいこと

表題のエラーを解決したいです。
[こちら](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にチェックがついている状態です。