I have a nextJS app running locally, I also have a flask api running locally. I know the flask is returning proper json through Postman. The results from the get request to that are below:
{
"results": [
[
{
"date_posted": "Mon, 17 Jan 2022 00:00:00 GMT",
"description": "This is a description",
"id": 1,
"mainImg": "https://i.ibb.co/pwxkyGw/How-the-Web-Works-1.png",
"slug": "Test-Post",
"subtitle": "Test Subtitle",
"tags": "test tag",
"title": "Test Post 2"
}
]
]
}
So, now that I knew that was correct I started looking into the javascript:
import React from 'react';
export const getStaticPaths = async () => {
const res = await fetch('http://localhost:3000/search/all')
const data = await res.json()
const paths = data.results[0].map(post => {
return {
params: { id: post.id.toString() }
}
})
return {
paths,
fallback: false
}
}
export const getStaticProps = async (context) => {
const id = context.params.id
const res = await fetch('http://localhost:5000/search/postID/' + id)
const data = await res.json()
return {
props: {data}
}
}
export default function Post({data}) {
return (
<div>
{props.data}
</div>
)
}
I checked everything, and for some reason I still get this error:
Server Error
Error: invalid json response body at http://localhost:3000/search/all reason: Unexpected token < in JSON at position 0
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages\post\[pid].js (5:17) @ async getStaticPaths
3 | export const getStaticPaths = async () => {
4 | const res = await fetch('http://localhost:3000/search/all')
> 5 | const data = await res.json()
| ^
6 |
7 | const paths = data.results[0].map(post => {
8 | return {
Show collapsed frames
I understand I am missing something, which is why I am here. If anyone has seen this and knows a fix please let me know!
So... if you look at the code for both fetches. One says port 3000 and the other says 5000... They are both supposed to be 5000. I can not believe it took me this long to catch that smdh.