Connecting Next.js and Strapi in Docker

Questions and Answers Frontend-React
1

Hi,
I am currently working on a project which involves a Strapi backend, which runs using docker-compose, and a Next.js frontend, which runs in a docker container. I have tried to fetch from the API using Axios and getStaticProps(), however, I always return an error in which the “data.attributes.x is undefined”. The code is below.

export async function getStaticProps() {
  const content = await axios.get(`${process.env.db}/home`)
  const data = await content.data

  return {
    props: {
      siteTitle: data.attributes.title,
      dates: data.attributes.dates,
      content: data.attributes.content,
    },
  }
}

And going to this route (/index) returns an error:

TypeError: Cannot read properties of undefined (reading ‘title’)

Any ideas on why this is not working would be appreciated.

2

Hey @edapm,

Do your two containers have communication with each other? Either being in the same network or by exposing their ports to the same host machine.

3

Both containers are on the same machine exposing their ports on the same host machine.

4

Check the content of the content variable in logs.

5

All resolved! Just an issue with my variable namings being incorrect - should have been data.data.attributes.x instead of just a single data. I have now renamed the data variable so it’s less confusing…

export async function getStaticProps() {
  const content = await axios.get(`${process.env.db}/home`)
  const raw = await content.data

  return {
    props: {
      siteTitle: raw.data.attributes.title,
      dates: raw.data.attributes.dates,
      content: raw.data.attributes.content,
    },
  }
}

Many thanks for everyone’s help!