How to Set up Google Search Console on Vercel Websites

Step 1: Add Website onto Google Search Console

Follow the instruction on Google Search Console to add a property. Then depending on whether you use custom domain or Vercel's domain, proceed to choose one of the following methods for verification:

If you use custom domain -> verify domain ownership via DNS record

If you use Vercel’s domain -> verify via HTML tag by adding meta tag

Step 2: Add sitemap to your Next.js/Vercel website

To add a static sitemap:

Generate a sitemap using a sitemap generator such as https://www.xml-sitemaps.com/.
Add sitemap.xml file into the public folder of your Next.js project. Doing this will let Next.js know to put sitemap.xml at the root directory. You can check, locally first, if the sitemap.xml file has been added successfully, by running npm run dev, and going to localhost:3000/sitemap.xml. Once you have verified that the sitemap can be accessed locally, save and push your change to production. You should be able to access the sitemap at www.yourwebsite.com/sitemap.xml.

To programmatically generate a sitemap:

Install the sitemap generating library:

npm install --save sitemap

Create sitemap.js at pages/api/ directory. Create an api directory in your pages directory if there is not one.
Copy the following code and modify accordingly to suit your needs. Remember to change the hostname to your domain and post_slugs to the URLs of your website that you wish to be discovered. The following code creates an entry in the sitemap for each URL by looping through possible slugs. This code will dynamically generate a .xml file.

import { SitemapStream, streamToPromise } from "sitemap";

export default async (req, res) => {
  try {
    const smStream = new SitemapStream({
      hostname: `https://YOURDOMAINNAME.COM`,
      cacheTime: 600000,
    });

    // List of posts
    const post_slugs = [
      "news-1",
      "news-2",
      "news-3"
    ];

    // Create each URL row
    post_slugs.forEach((post) => {
      smStream.write({
        url: `${post}`,
        changefreq: "daily",
        priority: 0.9,
      });
    });


    // End sitemap stream
    smStream.end();

    // XML sitemap string
    const sitemapOutput = (await streamToPromise(smStream)).toString();

    // Change headers
    res.writeHead(200, {
      "Content-Type": "application/xml",
    });

    // Display output to user
    res.end(sitemapOutput);
  } catch (e) {
    console.log(e);
    res.send(JSON.stringify(e));
  }
};

Save the file. Verify if you can access sitemap locally first by checking localhost:3000/api/sitemap. Once you have verified that the sitemap can be accessed locally, save and push your change to production. You should be able to access the sitemap at www.yourwebsite.com/sitemap.

Step 3: Point Google Search Console to your sitemap

Upload your new sitemap URL on Google Search Console. Google will let you know if they have successfully added the sitemap! Congrats, you just improved your SEO!