WordPress + NextJs – The best compination for the Fastest Dynamic Websites

I’m saving 90% of back-end development time.

Nextjs is now the most popular because of features such as SSR. But when we make a website, choosing the back-end or cms is always a little challenging. I have seen people are using headless cms like Strapy, Nothing wrong with it but I found many benefits when we use WordPress headless.

• No coding skill is required to set and manage
• Topically too cheap to host WordPress
• Many free plugins for SEO analysis and content creation.
• Build in media upload and manager
• Ready to use REST API with various filter options
• User-friendly CMS dashboard
• Inbuilt user management
• Largest community to get help
• We can create input fields(text area, drop-down, repeater field and many more) for pages/sections from the CMS without touch code or database using the WordPress plugin ACF

Test yourself WordPress REST API

If you are not familiar with WordPress and if you want to know how the WordPress REST API works. You can create temporary WordPress instances from https://wp.new or https://tastywp.com/

Once the instance is created open the following API

https://<host_name>/wp-json/v2/posts

You will see all available posts as JSON

Learn more about the WordPress REST API

Try to create new posts in the admin panel [create a link to create a new post in WordPress] and check the API response.

Make the WordPress ready for NextJs

• You need to install the theme which contains some functions for the next.
• Set the site URL: you need to set the site URL on WordPress settings. Go to admin settings->general. U will see the home URL and site URL there u need to use the home URL as front end URL

SEO

SEO is important for every website. I’m recommending the Yoast SEO WordPress plugin. Once you install the plugin “yoast_seo” attribute will come into your API response body for posts or pages. It will contain all meta information for the web page or blog page.

Breadcrumbs

Yoast SEO also provides the breadcrumbs for your page.

Schema

Adding a schema JSON is a good practice for better SEO. Yoast plunging also providing on API. You only need to add to your page as HTML.

Sitemap

You can make a dynamic sitemap using the WordPress API. Sample codes are the following.

// To make the date Sitemap Frindly
function getSitemapDate(dateString: string): string {
  if(!dateString) return null;
  const date = new Date(dateString);
  const isoDate = date.toISOString(); // Returns in YYYY-MM-DDTHH:MM:SS.sssZ format
  return isoDate.split(".")[0] + "+00:00"; // Remove milliseconds and add timezone
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  let pages = await fetch(
    process.env.WORDPRESS_API_URL +
      "pages/?_fields=slug,link,modified,yoast_head_json"
  ).then((res) => res.json());

 return pages.map((page: any) => {
    return {
      url: `${process.env.SITE_URL}/${getPath(page.link)}`,
      lastModified: getSitemapDate(page.modified),
      images: page.yoast_head_json?.og_image?.map((og: any) =>  og.url.replaceAll("&","")),
    };
  });
}