Next.js

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.

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.

Welcome to this tutorial on setting up a NextJS development environment! In this post, we will go through the steps of installing the necessary tools, including Node.js and a code editor, and using npm to download the Next.js template app. We’ll use one of the template apps that Next.js provide in that environment and give an overview of the structure and files in template.