Automating Next.js Sitemap Generation with GitHub Actions

Creating a sitemap for your Next.js project is essential for SEO purposes, as it helps search engines better index your site. But manually updating this sitemap can be tedious, especially for dynamic sites. This is where automating the process with GitHub Actions comes in handy. In this article, we'll guide you through installing next-sitemap in your Next.js project and setting up a GitHub Actions workflow to automate sitemap generation daily.

Step 1: Install next-sitemap

Before we dive into the automation part, ensure that next-sitemap is installed in your project. This package helps in generating a sitemap automatically based on your Next.js project's pages and configurations. To install it, run:

npm install next-sitemap

After installation, create a next-sitemap.js or next-sitemap.config.js file at the root of your project to configure your sitemap preferences. An example configuration could be:

module.exports = {
  siteUrl: "https://www.yoursite.com",
  generateRobotsTxt: true, // (optional)
  // ...other options
};

Step 2: Update Your package.json Scripts

Next, ensure your package.json has a postbuild script to generate the sitemap as part of the build process. Here's an example:

"scripts": {
  "build": "next build",
  "postbuild": "next-sitemap"
}

Step 3: Setting Up GitHub Actions

Now, let’s set up a GitHub Actions workflow to automate the build process and sitemap generation.

Creating the Workflow File

1. Navigate to .github/workflows in your repository: Create this directory if it doesn't exist.
2. Create a new YAML file: You can name it sitemap_workflow.yml.

Writing the Workflow

In your new sitemap_workflow.yml file, write down the following configuration:

name: Build and Update Sitemap

on:
  schedule:
    - cron: "0 0 * * *" # Runs at 12 AM UTC every day

jobs:
  build-and-generate-sitemap:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "14" # Ensure this matches your project's Node.js version

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Generate Sitemap
        run: npm run postbuild

This workflow is configured to run every day at 12 AM UTC. It sets up a Node.js environment, installs dependencies, builds your Next.js project, and then runs the postbuild script to generate the sitemap.

Finalizing and Monitoring

1. Push the Workflow: Commit and push the sitemap_workflow.yml file to your GitHub repository.
2. Monitor the Actions Tab: After pushing, check the Actions tab in your GitHub repository to see the workflow status.

Conclusion

Automating sitemap generation for your Next.js project not only saves time but also ensures that your sitemap is always up to date, improving your site's SEO. By leveraging GitHub Actions, you can achieve this automation with minimal setup. Now, your sitemap will be automatically updated daily, ensuring search engines always have the latest map of your site's content.