CD
Cloudflare Developers•6mo ago
okHadi (parhlai.com)

Can I connect a NextJs frontend worker to a Hono backend worker without backend worker URL?

If so, how do I go along doing that?
1 Reply
Gravite2090
Gravite2090•6mo ago
👋 Next.js has a frontend that lives in the client, this can not connect to your Hono API without DNS resolution. However, the Next.js server can run on a worker and connect to another worker in the same Cloudflare account without any external routing / DNS. To connect the Next.js server to a Hono API via a service binding try this in your Next.js server-side code... wrangler.jsonc 
  "services": [
    {
      "binding": "HONO_API",
      "service": "my-hono-api"
    }
  ],
  "services": [
    {
      "binding": "HONO_API",
      "service": "my-hono-api"
    }
  ],
your-nextjs-server-code.js 
const apiEndpoint = '/api/events';
const apiResp = await env.HONO_API.fetch(new Request(new   URL(apiEndpoint, 'http://fakeurlcanbeanything').toString(), {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                      'x-api-key': 'secretkey',
                    },
                    body: JSON.stringify(eventPayload),
                  }));
const apiEndpoint = '/api/events';
const apiResp = await env.HONO_API.fetch(new Request(new   URL(apiEndpoint, 'http://fakeurlcanbeanything').toString(), {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                      'x-api-key': 'secretkey',
                    },
                    body: JSON.stringify(eventPayload),
                  }));

Did you find this page helpful?