Does nextjs + capacitor support API routes on IOS

[a-alhusaini]

Basically what it says on the tin....

I wanted to find out but it seems like no one really knows. Hopefully some of the folk visiting this repo know. Cheers!

[a-alhusaini]

EDIT: found a solution in another repository where this was done

// Set foreign api_origin when we are in native app mode.
export function Url(path) {
  let origin = Capacitor.isNative ? publicRuntimeConfig.api_origin : "";
  return origin + "/" + path;
}

so when you are in native mode you use the api origin for requests and when your in webapp mode you let nextjs figure out that part for you.

Hope this helped!

[mlynch]

Hey @appdevland interesting post and thanks for providing more info! Where would you put your code snippet?

[a-alhusaini]

I am currently away from my computer so i can't write a code example but you use that snippet to parse the url of any fetch requests that you make

for example: `fetch('/your/route', /....)

becomes: `fetch(functionabove(/your/route, .....

Hope this helped!

On Tue, Jan 5, 2021 at 4:47 AM Max Lynch [email protected] wrote:

Hey @appdevland https://github.com/appdevland interesting post and thanks for providing more info! Where would you put your code snippet?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mlynch/nextjs-tailwind-capacitor/issues/4#issuecomment-754332128, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKVLSZ2675BWBL2DNWRYTXLSYJVR7ANCNFSM4VQTIQ2A .

[agallio]

EDIT: found a solution in another repository where this was done

// Set foreign api_origin when we are in native app mode.
export function Url(path) {
  let origin = Capacitor.isNative ? publicRuntimeConfig.api_origin : "";
  return origin + "/" + path;
}

so when you are in native mode you use the api origin for requests and when your in webapp mode you let nextjs figure out that part for you.

Hope this helped!

@appdevland

How do you get the publicRuntimeConfig object? Is that the Next.js' runtime configuration?

And, what is the value of api_origin?

[a-alhusaini]

Hey @agallio!

It's been quite a while and i can't remember exactly.

What you want to do in a nutshell is if your in web mode don't add an api origin to the project but if your in native mode (can be detected with capacitor) prefix an api_origin to all your fetch requests so that when your on mobile /api/whatever turns intohttps://yourserver.com/api/whatever

Wish i could remember more but it's been such a while.

[corysimmons]

@agallio publicRuntimeConfig is just a way to set publicly accessible env vars for your Next app (yeah, https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration)

api_origin is just a hard-coded var @appdevland made to refer to his API.

In the simplest form, he's doing the following:

const res = fetch(Capacitor.isNative ? 'https://my-nextjs-app.com/api/hello' : '/api/hello')

[shaianest]

hey so i found a solution to that where server url is not that buggy at all and i have worked on three projects so far and the solution for me was to serve assets from server and put server url in capactor server config but before that i run and get the apk of the project inspect it to get native-bridge.js and if native put its script before any bundler worked in create react app and on create next app

all my fetches are from / all my progects can be built with one android folder just changing strings and app icons and capacitor config

i wish native-bridge.js was not made in android code so every one could do it much easer and for every capacitor plugin i have to redo the process again.

[mlynch]

Updated the README to add @appdevland's tip, thanks all