Wordpress ISR With Next.js

Site link

This is a project to use ISR (Incremental Static Regeneration) feature from Next.js. I use my Wordpress web site a headless CMS.

What I did for this project are mainly following:
  1. Install GraphQL plugin to my Wordpress site
  2. Create a new Next.js project from Vercel template and Try the features of ISR
  3. Create a function to show the posts related to a tag

1. Install GraphQL plugin to my Wordpress site

I installed WPGraphQL plugin to my Wordpress site. This plugin enables me to use GraphQL queries to get the data from my Wordpress site. You can access to the plugin from here.

2. Create a new Next.js project from Vercel template and Try the features of ISR

I used this template of Next.js from Vercel. I could try the feature of ISR easily by using this template. The only two things I can mention for avoiding the struggle are:

  1. When I encountered below error, this article was helpful to solve the problem.

    Error: Invalid src prop (https://secure.gravatar.com/avatar/e8c62a4f73336fe17d9bf3a87dc982b5?s=96&d=mm&r=g) on `next/image`, hostname "secure.gravatar.com" is not configured under images in your `next.config.js`

  2. In css module file in the template, Class name is not working since dangerouslySetInnerHTML does not directly support CSS module class names. So, need to use tag name directly. And I would you make sure not wrap the content of blog by <p> tag because blog content(body) likely includes <p> tag and containing <p> tag inside of <p> tag is not allowed. For example, If there was a label element that has a class name toc-title and I wanted to hide it:

    
--- not worked ---
    .content .toc-title {
    display: none;
}
--- worked ---
    .content label {
    display: none;
}

3. Create a function to show the posts related to a tag

This is only thing I did that is not included as instruction to do in the template. In order to do this, I created a new file[tag].tsx under the tag folder as a dynamic route and added GraphQL functions getPostsByTag and getAllTags into api.tsfile to take the posts related to the tag. You can see the detail of the function from my github. What I did in api.ts was making a function to inquiry using GraphQL taking tagName variable from argument which comes from params and a function to inquiry using GraphQL just getting all posts with tags.

Conclusion

Through doing this project, I leaned ISR, static site generation as well as how to use GraphQL to get the data from Wordpress site.

Back to home.