常連

Nuxt + microcmsでJAMstackサイトを作成中です。

ブログ記事一覧などでサムネイルがあれば表示、なければデフォルトの画像を表示といった実装をおこなう際にうまくいきません。


```template
airticle(v-for='(item, index) in items' :key="item.id")
  nuxt-link(:to='`/info/${item.id}`')
    v-card
      div.d-flex.flex-no-wrap.justify-space-between
        div
          v-card-title(v-text="item.title")
          v-card-subtitle(v-html="item.post.slice(0, 200)")
        div(v-if="item.eyecatch.url")
          img(:src="item.eyecatch.url")
        div(v-else)
          img(src="default.png")
```

```js
<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    const page = params.p || '1'
    const limit = 4
    const { data } = await axios.get(
      `https://hogehoge.microcms.io/api/v1/info?limit=${limit}&offset=${(page - 1) * limit}`,
      {
        headers: { 'X-API-KEY': process.env.API_KEY }
      }
    )
    return {
      items: data.contents
    }
  },

  data () {
    return {
      items: []
    }
  }
}
</script>
```

エラーにこのようなものがでてきてしまいます。
```
Cannot read property 'url' of undefined
```

dataに画像があるときは表示。無いときはデフォルトの表示といった記述はどのように書いたらよいでしょうか？

v-ifでdataがあるときの表示・非表示

### 前提

wordpressをnext.jsでheaddレス化する練習をしようとしています
ローカル環境で作業がしたいためdockerでwordpressを構築しています

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

wordpressのプラグインのGraphQLを使いたいのですが、GraphQL IDEがずっと読み込みになっており
全く使えません。直し方かこれなら代用できるなど参考になるページリンクなど教えていただきたいです

# GraphiQL画面でのコンソールに書いてあったエラー文字
app.js?ver=ed1b92d35860129a50b81d00174fd747:38 Uncaught (in promise) GraphQLError: Names must only contain [_a-zA-Z0-9] but "Template_空白" does not.
    at a (app.js?ver=ed1b92d35860129a50b81d00174fd747:38:491918)
    at new U (app.js?ver=ed1b92d35860129a50b81d00174fd747:38:498283)
    at app.js?ver=ed1b92d35860129a50b81d00174fd747:38:555696
    at app.js?ver=ed1b92d35860129a50b81d00174fd747:38:557001
    at t.keyValMap (app.js?ver=ed1b92d35860129a50b81d00174fd747:38:441875)
    at t.buildClientSchema (app.js?ver=ed1b92d35860129a50b81d00174fd747:38:555440)
    at app.js?ver=ed1b92d35860129a50b81d00174fd747:38:47

### next
フロントの環境はnextで提供しているテンプレートの $ npx create-next-app --example cms-wordpress cms-wordpress-app で構築致しました

### docker m1. 中身
version: '3.1'

services:

  wordpress:
    image: wordpress:5.9
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - ./backend:/var/www/html/

  db:
    platform: linux/x86_64 
    image: mysql:5.7 
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

wordpressをnext.jsでheaddレス化

Nuxt × microCMSでポートフォリオサイトを構築しているんですが、Indexページで複数のAPIからコンテンツを取得する方法が分からず困っています。(NewsやProductといった複数のAPIからそれぞれコンテンツをIndexページに表示したいです)

APIが1つの場合(Productだけ or Newsだけ)は問題なく表示されるのですが、Product・News両方からコンテンツ取得しようとするとエラーで出来なくなってしまいます。async asyncData()を2回そのまま書いているのが問題なのかなと思っています。初歩的な質問かもしれませんが、お知恵を貸して頂けると助かります！よろしくお願いします。 

```vue
<template>
　<div>

　　<swiper :options="swiperOption">                
     <swiper-slide v-for="item in items" :key="item.id">
       <a :href="`${item.link}`" target="_blank">
         <img :src="item.thumbnail.url">
         <h3>{{ item.creator }}</h3>
         <h4>{{ item.category }}</h4>
      　</a>
     </swiper-slide>
　　</swiper>

　　<swiper :options="swiperOption">                
     <swiper-slide v-for="blog in blogs" :key="blog.id">
       <a :href="`${blog.link}`" target="_blank">
         <img :src="blog.thumbnail.url">
         <h1>{{ blog.title }}</h1>
       </a>
     </swiper-slide>
　　</swiper>

　</div>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData() {
    const { data } = await axios.get(
      'https://your-service-id.microcms.io/api/v1/item',
      { headers: { 'X-API-KEY': 'your-api-key' }}
    )
    return { items: data.contents }
  },
  async asyncData() {
    const { data } = await axios.get(
      'https://your-service-id.microcms.io/api/v1/blog',
      { headers: { 'X-API-KEY': 'your-api-key' }}
    )
    return { blogs: data.contents }
  }
}
</script>
        
```

【Nuxt.js】microCMSで複数のAPIからコンテンツを取得する方法

### 前提

StrapiをIISでホスティングしたい。
リバースプロキシを使ったところ、一部のjs(main.jsなど)が404エラーになり、管理画面(localhost:xxxx/admin)がブランクになってしまいました。
APIは呼べますが、管理画面を開くことができません。

### 実現したいこと
IIS上に構築したStrapiで管理画面を開きたい。

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

main.js等が404エラー
以下はnginxの場合ですが、全く同じ事象です。

https://forum.strapi.io/t/strapi-admin-gives-404-errors-after-redirect-nginx/17966

### 補足情報
Strapi v4
Windows環境
リバースプロキシの設定で、localhost:xxxx/Strapi を localhost:1334/に書き換えています。

リバースプロキシを使ってstrapiをIIS上にホストティングしたい

現在、wordpressのheadless CMSを使用して
webサイトを構築しようと計画しております。
wordpress側のサーバーmixhostを使用し、wordpressの管理画面とwebサイト表示までは行うことができました。
ここから、Next.jsで投稿記事などを表示できるようrestAPIなどを組み込む予定なのですが、フロントエンド側(Next.js)のソースをhostringサービスを使用して(Vercel)で
hostingする際、mixhostにて取得したドメイン名は使用できるものなのでしょうか。

たとえば、hoge.comというドメイン名をmixhostにて取得した際、
Vercel側で同じドメイン名を使用できるのか疑問です。
同様のドメイン名を使用することって不可能なのでしょうか？

フロントエンドをNext.jsで開発したwebサイトにwordpressのheadless CMSを導入した際のフロントエンドコードのホスティング先のドメイン名について

エキスパートの皆様、こんにちは

**今回お伺いしたいのはReact(Next.js)にて目次を導入する方法です。**
Javascriptで導入を試みているのですが、参考になるものはどれもTypescriptで記載されており、Javascriptでどうすればいいのかわかりません。（Reactの理解が不足しているのも要因です。）

具体的な不明点の前に、まずは■状況を記述します。
・Next.jsとJavascriptでブログを作成中
・ブログの内容はheadlessCMS(graphCMS)でリッチテキストで取得
・目次作成のためにtocbotというライブラリを導入( https://tscanlin.github.io/tocbot/ )
・**ファイルAでtocbotを読み込み、コンポーネントにしたものをエクスポート
・表示したいページファイル(ファイルB)でファイルBをインポートして表示させた結果、tocbotが目次作成に引用した範囲はファイルAの中だけだった**

■ 具体的な不明点
**・ファイルBの内容をファイルAからtocbotで目次にするにはどうすれば良いか**

■コード
ファイルA(/component/tocbot.js)
```javascript
import { useEffect, Component } from 'react'
import tocbot from 'tocbot'

const Toc = () => {
    useEffect(() => {
        tocbot.init({
          tocSelector: '.toc',
          contentSelector: '.body',
          headingSelector: 'h2, h6',
        })
    
        return () => tocbot.destroy()
      }, [])
//
      const {contentBody} = this.props
//
      return (
          <>
          <div className="toc" />
          </>
      )
}
```

ファイルB(/pages/blog/[id].js)
```Javascript
import Toc from '../../components/toc'
・・・     
    return (
            <div className={styles.container}>
                <Head>
・・・
                {Toc()}
                <div className="body">
・・・
```

ご教授くださいませ。

React(Next.js)にて目次を導入したい

### 前提・実現したいこと

ヘッドレスCMSとNext.jsでブログサイトを作成しています。
Next.jsを公開した後（build）に、CMSにコンテンツを追加すると、追加されたコンテンツのページが生成されません。

ページ一覧画面（index.tsx）では、追加されたデータが表示されるのですが、リンク先が生成されていないため遷移しようとすると404エラーが発生します。ちなみに、getStaticPropsではなく、useSWRを使ってコンテンツを取得しています。

ヘッドレスCMS（セルフホスティング）は、renderでホストしています。
Next.jsはvercelでホストしています。

Next.js側の[slug].tsxのコードは下記のようになっています。

page/[slug].tsx
```tsx
import { GetStaticProps, GetStaticPaths } from 'next'
import { Layout } from '../../components/templates/Layout'
import { getSinglePost, getPosts } from '../../lib/cms'
import { Blog } from '../../components/pages/Blog';

  ...

const PostPage = (props: BlogProps) => {
  return (
    <div>
      <Layout>
        <Blog post={props.post} />
      </Layout>
    </div>
  )
}

export const getStaticProps: GetStaticProps = async (context: any) => {
  const post = await getSinglePost(context.params.slug)

  if (!post) {
    return {
      notFound: true,
    }
  }

  return {
    props: { post }
  }
}

export const getStaticPaths: GetStaticPaths | any = async () => {
  try {
    const posts =  await getPosts()
    const paths = posts.map((post) => ({
      params:  {slug: post.slug}
    }))
  
    return { paths: paths, fallback: false }
  } catch (err) {
  }
}
```


SSRにしたほうがいいのでしょうか。

CMS側のコンテンツが追加されたときに、Next.jsのほうで自動buildさせることは可能でしょうか

API側のデータが更新されていたらVercelでホストしているNext.jsプロジェクトを自動buildしたい

気象庁の天気図のサイトのスクリーンショットをAWS Lambde定期的に取得しようとしています。
https://www.jma.go.jp/bosai/weather_map

ほぼ同時刻ローカルとAWS Lamdba実行した際に取得されるスクリーンショットの画像が違ってしまいます。
こちらの対策についてご教授願います。

2021年5月30日0時に実行
ローカルで実行　表示時刻　2021年5月29日21時の実況　
(普通にブラウザで接続した際と同じ内容、この画像を取得したい)
![![ローカルで実行](25d0121a3736d650e6c356e72d632d6e.png)]


AWS Lamdbaで実行　表示時刻　2021年5月28日121時の実況　(通常接続と異なる画像が取得　1日前の状態)
![AWS Lamdbaで実行](0f222b347b4156fb8ce451f0a1221c59.png)


```python
#気象庁天気図サイトスクリーンショット取得
#https://www.jma.go.jp/bosai/weather_map

import time
import os
import boto3

from selenium import webdriver

webdriver_path = "/opt/python/bin/chromedriver" #AWS Lambda実行時
#webdriver_path = "c:/chromedriver/chromedriver"  #ローカル実行時

localpath = "/tmp/"

SCREEN_SHOT_PATH_NAME = "/tmp/screenshot.png"
BUCKET_NAME = 'mybucket'
OUTPUT_FILE_NAME = 'screenshot.png'


# webdriber.chrome option 設定
options = webdriver.ChromeOptions()
options.add_argument("--headless")
options.add_argument("--disable-gpu")
options.add_argument("--window-size=1704x1078")
options.add_argument("--disable-application-cache")
options.add_argument("--disable-infobars")
options.add_argument("--no-sandbox")
options.add_argument("--hide-scrollbars")
options.add_argument("--enable-logging")
options.add_argument("--log-level=0")
options.add_argument("--single-process")
options.add_argument("--ignore-certificate-errors")
options.add_argument("--homedir=/tmp")
options.binary_location = "/opt/python/bin/headless-chromium"  #AWS Lambda実行時



def lambda_handler(event, context):

    os.environ['HOME'] = '/opt/'
    print("環境変数",os.environ['HOME'])

    driver = webdriver.Chrome(webdriver_path, chrome_options=options)

    url = "https://www.jma.go.jp/bosai/weather_map"
    driver.get(url)

    time.sleep(3)

    imgname = localpath + "screenshot.png"
    driver.get_screenshot_as_file(imgname)
    print("スクリーンショット保存: "+url+" --> "+imgname)

    #S3にアップロード
    s3 = boto3.resource("s3")
    s3.meta.client.upload_file(SCREEN_SHOT_PATH_NAME, BUCKET_NAME, OUTPUT_FILE_NAME)


#print(lambda_handler(0,0))    #ローカル実行時


```

HeadlessCMS