

docker-compose環境でnext.js13のフロントエンドからモック用のjson-
serverにfetch関数でpostしたところ、下図のようなエラーが発生しました。/articles/newの「投稿」ボタンクリックでjson-
serverへpostしています。色々と調査したものの解決に至らず、手助けいただけると助かります。

[![エラー画面](https://i.stack.imgur.com/SJuh9.png)](https://i.stack.imgur.com/SJuh9.png)

### 調査

コンソールでERR_NAME_NOT_RESOLVEDとエラーが出ているため、名前解決関連の問題かと考えていますが、createArticle単体でテストしたところ、問題なくpostできています。テストは/check/page.tsxを作成して動作確認をしました。

### ソースコード

  * ./compose.yml

[code]

    services:
      app:
        build:
          context: ./.docker
        tty: true
        volumes:
          - ./app:/app
        environment:
          - WATCHPACK_POLLING=true
        command: sh -c "npm run dev"
        ports:
          - 3000:3000
        networks:
          - next-app-network
        depends_on:
          json-server:
            condition: service_started
    
      json-server:
        build:
          context: ./json-server/.docker
        ports:
         - '3001:3001'
        volumes:
          - ./json-server/data:/data
        networks:
          - next-app-network
        command: json-server --watch db.json --host 0.0.0.0 --port 3001
    networks:
      next-app-network:
    
[/code]

  * ./app/src/blogAPI.ts

[code]

    export const createArticle = async (
        id: string,
        title: string,
        content: string
    ): Promise<Article> => {
        const currentDatetime = new Date().toISOString()
    
        const res = await fetch('http://json-server:3001/posts', {
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ id, title, content, createdAt: currentDatetime })
        })
    
        if (!res.ok){
            throw new Error("エラーが発生しました。")
        }
    
        await new Promise((resolve) => setTimeout(resolve, 1000))
    
        const newArticle = await res.json()
        return newArticle
    }
    
[/code]

  * ./app/src/app/articles/new/page.tsx

[code]

    "use client"
    
    import React from 'react'
    import { createArticle  } from '@/blogAPI'
    import { useState } from 'react'
    
    const CreateBlogPage = () => {
        const [id, setId] = useState<string>("")
        const [title, setTitle] = useState<string>("")
        const [content, setContent] = useState<string>("")
    
        const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
            e.preventDefault()
            console.log(id, title, content)
            await createArticle(id, title, content)
        }
    
      return (
        <div className="min-h-screen py-8 px-4 md:px-12">
            <h2 className="text-2xl font-bold mb-4">ブログ新規作成</h2>
            <form
                className="bg-slate-200 p-6 rounded shadow-lg"
                onSubmit={handleSubmit}
            >
                <div className="mb-4">
                    <label className="text-gray-700 text-sm font-bold mb-2">URL</label>
                    <input
                        type="text"
                        className="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none"
                        onChange={(e) => setId(e.target.value)}
                    />
                </div>
                <div className="mb-4">
                    <label className="text-gray-700 text-sm font-bold mb-2">タイトル</label>
                    <input
                        type="text"
                        className="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none"
                        onChange={(e) => setTitle(e.target.value)}
                    />
                </div>
                <div className="mb-4">
                    <label className="text-gray-700 text-sm font-bold mb-2">本文</label>
                    <textarea
                        className="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none"
                        onChange={(e) => setContent(e.target.value)}
                    />
                </div>
                <button
                    type="submit"
                    className="py-2 px-4 roudned-md bg-orange-300"
                >
                    投稿
                </button>
            </form>
        </div>
      )
    }
    
    export default CreateBlogPage
    
[/code]

  * app/src/app/check/page.tsx

[code]

    "use client"
    
    import React from 'react'
    import { createArticle  } from '@/blogAPI'
    
    async function Check() {
      const id = "check"
      const title = "check-check"
      const content = "check-checedk-ffcheck"
      let is_res = false
    
      if (!is_res){
        const res = await createArticle(id, title, content)
        console.log(res)
        is_res = true
      }
    
      return (
        <div>Check</div>
      )
    }
    
    export default Check
    
[/code]


CC BY-SA 4.0
2023-10-15T01:31:36.910
96496
2023-10-15T06:10:00.663
2023-10-15T06:10:00.663
3060
60111
question
next.js
json-serverにポストすると ERR_NAME_NOT_RESOLVED エラーが発生する