Now we’ll look at retrieving and displaying a list of posts from WordPress that link each item in the list to a page displaying the post. In our example we’ll use the default post type but the same process can be applied to any custom post type to retrieve an archive list and the posts.

Now that we can query data from a WordPress site using GraphQL, we’re going to learn how to output that data into our Next.js app. There are two functions provided by Next.js which can be used together to retrieve and display all our pages and their content.

By default in custom post types, taxonomies and any custom post meta aren’t available in GraphQL. We have to tell WordPress which bits of data we want to be exposed to GraphQL so that we can retrieve it in a query.

In the first few posts looking at Next.js we’ve been focusing on the layout and structure of the pages and building the header, main body and footer. Now we’ve got a simple template set up, we can start populating pages with content.

Now that we’ve added some pages to our Next.js app, we can add a navigation bar to our header so we can easily access the pages. The navigation bar will be persistent across all pages and posts on our site.

In previous posts we set up the general layout of our app so we can now start adding pages and a navigation bar.

There are two ways in which you can apply styling to your Next.js app using CSS. The first is by using a global stylesheet, which is applied to every page and component in your app. The second way is by using CSS modules, which apply styling to specific components only.

In this tutorial we’re going to use the default template we’ve installed and add a custom layout, header and footer each in separate files that can all be reused.