Functions exist in most programming languages and are an important aspect of JavaScript. A function is a block of code which performs a specific task defined by the programmer. Using functions allows us to avoid writing the same code multiple times to do the same task.

In JavaScript a function is an object which means we can pass it as an argument to another function. This concept is known as a callback function.

The addition of the WordPress REST API has turned WordPress into a CMS that can be used in headless websites and applications. Developers who are already comfortable using WordPress to store their content can now easily access it from anywhere.

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.