DEV Community: Sarthak Kaushik

How to fetch Rank Math sitemap from WordPress and show it in Next.js

Sarthak Kaushik — Sun, 20 Aug 2023 07:36:33 +0000

In this blog I will guide you how you can fetch the sitemaps from WordPress and show it in Next.js .
When migrating from WordPress to Next.js we face issues while generating sitemaps because WordPress does not provide any rest api for us to get the posts , pages, categories links in a systematic format.
In WordPress we use some plugins to generate the sitemaps, one of that plugin is RankMath.

The RankMath plugin create separates routes for XML sitemaps,

/sitemap_index.xml
/post-sitemap.xml
/page-sitemap.xml
/category-sitemap.xml

In Next.js we will use the getServerSideProps function to fetch these sitemaps on the server

Let's begin

Download the static files from github link
Edit Files in the sylesheets and add your name and url at required places.
Save these files to public directory.
In .env file add NEXT_PUBLIC_WP_CMS_URL variable and make it equal to your_wordpress_site_url.com
Create a file in the directory called pages/sitemap/[slug].tsx.

Now in the sitemap/[slug].tsx enter the following codes.



import { GetServerSideProps } from "next";

export default function Sitemap( ) {
  return (
    <>

    </>
  );
}

export const getServerSideProps: GetServerSideProps = async ({
  res,
  params,
}) => {
  const { slug } = params!;

  if (slug && slug.includes(".xml")) {
    const url = process.env.NEXT_PUBLIC_WP_CMS_URL + `/${slug}`;


    const resp = await fetch(url).then((r) => r.text());

    let format = resp
      .replace(`//www.your_wordpress_site.com/news-sitemap.xsl`, "/v.xsl")
      .replace("//www.your_wordpress_site.com/main-sitemap.xsl", "/main-sitemap.xsl")
      .replace(
        "//www.your_wordpress_site.com/video-sitemap.xsl",
        "/video-sitemap.xsl"
      )

      .replaceAll(`www.your_wordpress_site.com.com`, "www.your_next_js_site.com")


    res.setHeader("Content-Type", "text/xml");

    res.write(format);
    res.end();

    return {
      props: {},
    };
  } else {
     return {
        props: { },
        notFound:true
      };


  }
};

I hope this helps if you get stuck at any place let me know , I would love to help you.

Quiz app with React.js and typescript

Sarthak Kaushik — Mon, 19 Jul 2021 02:33:05 +0000

In this article I will create a quiz app with react.js and typescript using open trivia api and tailwind css.

Github Link

Setup

Clone the repo .
run yarn install .
Generate your custom endpoint from opentdb and add to ENDPOINT variable in Mainpage.tsx.
Run yarn start to start the project.

About The Project.

Project is created with react and typescript
for styling I have used tailwind css.
context api has been utilized for keeping the score of the user.

Ecommerce with Next Js and WordPress

Sarthak Kaushik — Wed, 07 Jul 2021 02:30:30 +0000

Building an e-commerce site API is a complex process. You can create it using various CMS strapi.js or commerce.js or you can create your own API with the help of Node Js and Express Js, but these CMS does not provide a scalable approach for an e-commerce site, whereas WordPress gives us various options which we can use and customize easily to fit our purpose.

Why WordPress

Woocommerce Plugin => We can easily convert our WordPress to a fully pledged e-commerce store using this plugin within few steps.
Custom Rest Api =>Wordpress Provide us a way to create our own Custom Rest API endpoints.
User-Friendly => Almost every web developer or client is familiar with WordPress.
Easy to set up => WordPress is fairly easy to set up, than any other CMS you will work with.

Setup

WordPress Setup

I will assume that you have knowledge of installing WordPress and MySQL on your local machine.
After the installation of WordPress now you have to install a plugin named woocommerce which will convert your site into an e-commerce store. After that follow the following steps

Download and Install the Custom Rest API plugin from this link.
Install woocommerce and enable Rest API in woocommerce plugin .
This will generate an API key, copy it to env. local file as shown below

NEXT_PUBLIC_WP="http://localhost/wordpress/wp-json"
NEXT_PUBLIC_WOO_COM="http://localhost/wordpress"
#woocommerce API keys
NEXT_PUBLIC_CUSTOMER_KEY=WoocommerceCustomerKey
NEXT_CUSTOMER__SECRET_KEY=WoocommerceSecretKey

#stripe keys 
NEXT_STRIPE_KEY=Stripe Secret Keys
NEXT_PUBLIC_STRIPE_KEY=Stripe Publishable key

Why I Have Used Custom Plugin

Almost all the things which I am requesting from my custom API can be achieved through the current woocommerce package in next.js, but the woocommerce package also provides some unnecessary and sensitive data like the file link for digital products. This can lead to various securities issues, also the response time is reduced due to the population of unrequired data in every request.
Woocommerce Rest API is wonderful but it still not provide a way for us to calculate cart items
through the rest of API, maybe this will be added in the future I guess. I have created a route in my plugin that will provide the product details. you can learn more about this in my plugin documentation.
For checking the validity of coupons and orders ids of the customer for some securities purposes.

Demo

Home page

Product page

Account page

Cart Page

Checkout Page

A movies countdown website using tmdb api

Sarthak Kaushik — Wed, 07 Jul 2021 01:47:34 +0000

This is a Project created with next js and tmdb api to show list of all the upcoming movies this year with countdown

Check out live demo at Movies Countdown for more details.

Source Code =>here

Created my first NPM package with typescript.

Sarthak Kaushik — Mon, 05 Jul 2021 13:31:48 +0000

I created my first npm package with the help of typescript.

npm link
github link

Moviestmdb

this package help to interact with tmdb api easily. The package is built with typescript so all the response types are pre-defined .