Query an Entry from Strapi with Next.js 13 Server Components

We'll learn how to connect a Next.js 13 application to Strapi's API by setting environment variables and defining an async function that uses fetch to get data from your Strapi backend.

You'll notice that on our home page, we are accessing sensitive environment variables within the getPosts function that will make the query for our posts that live in Stapi. This would normally be ill-advised as you don't want to leak sensitive information to the client side. However, since we are using Next.js 13 app directory components default to being Server Components which means we can safely access this sensitive information without worrying about it being exposed to the client.

Once we get data from Strapi we can map over it and display the titles as a list on our home page.