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.
Instructor: [0:00] To query data in Next.js from our Strapi API, we'll start by creating a .env local file. We'll do this on our root directory. In our .env local file, we'll set an environment variable of API URL and give it the value of HTTP localhost 1337, which is the URL of our Strapi server.
[0:24] We'll save the file and in our app folder, we'll open our pages file. We define an async function called get posts. In get posts, we define a constant code res that awaits a fetch. Inside our fetch, we use the environment variable that we just initialized with persist env.api URL and then access API/posts to collect data from posts.
[0:52] After that, we want to check if our response in res is OK. If it isn't, we throw a new error and say, failed to fetch data from API. If it is OK, we'll return res.json. At the top of our component, inside our home, we initialize a const called data, which will pass our response from get posts.
[1:21] Then we'll change our home page, so that it follows a layout similar to our about page. We'll go to our about page and copy this content and paste it, and go to our about page and copy the imports also, and paste them at the top of our file, getting rid of the page container, and we'll save.
[1:41] In our browser we'll navigate to our index page, where we see about this, and we'll change the wording just to differentiate. We'll say words from others, for me and in description we'll say a recipe for disaster and save. Now we know we're on our index page.
[2:02] Now that we have our function what we'll do is use the data that we receive and say, data.data.map and define post. Then we use post, and in that we'll create a div. Inside the div we'll pass post.attributes.title. We also want to give our div a key of post.attributes.slug, to be unique.
[2:34] When we save our work, we get all entries from Strapi displayed in the index page of our Next.js application. That is how you carry data from Strapi into your Next.js application.