CODEWITHSUNDEEP
phplaravelapinext.js
Joshua Galit
Joshua Galit

Reputation: 1466

getStaticProps not working when fetching the Laravel API and throw Error: connect ECONNREFUSED ::1:8000

I have two main folder the backend laravel api and the frontend for next.js

enter image description here

I've configured axios file inside my /lib/axios.ts

enter image description here

I also created fetcher file in which you don't need to specify the absolute url path of your backend because it's already been configured in axios

enter image description here

My connection between my next.js app and laravel API works perfectly fine but when I tried to used getStaticProps inside my dashboard.tsx page file and use fetcher I got this error

enter image description here

This is my code.

What I liked to do is to make a pre-fill data in which the initial page load should have a default data in my dashboard page but it turns out an error and I used swr by the way.

enter image description here

When I tried to fetched it in another dummy API it works fine.

enter image description here

Do you think there will be an issue between serverside laravel api when fetching to and Static Site Generation in Next.js? Let me know what you know.

Upvotes: 0

Views: 132

Answers (1)

Matt
Matt

Reputation: 921

With getServerSideProps or getStaticProps you need to have absolute URL's.

You currently have

...('/api/dashboards') //This is not an absolute url

What you need is something like this

...('http://localhost:8000/api/dashboards') //or whatever port it is on.

Keep in mind when you push to staging or something like that the url will no longer be localhost so you would be best to use a env file.

Final product would end up looking like this

...('${process.env.CURRENT_URL}/api/dashboards')

.env.development

CURRENT_URL=http://localhost:8000

.env.production

CURRENT_URL=https://example.com

Simple fetch

const response = await fetch('${process.env.NEXT_PUBLIC_BACKEND_URL}/api/dashboards')
const res = await response.json()
console.log(res)

Upvotes: 1

Related Questions