Create & Use Typescript with next-sitemap Config

Context

As developright was using typescript through outs project and I wanted to use typings with the next-sitemap package to ensure frequent updates would be caught by building I decided to look into setting the config to typescript and ensurnig it works with the project. 

The process is very easy

Setting up Typescript with Build Config

Ensure you have Typescript & next-sitemap installed

npm install typescript@4.x next-sitemap --save-dev

 

The following tsconfig creates the sitemap in the output directory of "dist-sitemap" it ensures the outputed config is a commonjs javascript file in the correct format so the package can consume the file. 

 

You may need to adjust some files, the sitemap config in ts exists at the top level as "next-sitemap.config.ts"

{
    "compilerOptions": {
      "incremental": true,
      "outDir": "./dist-sitemap/",

      "allowJs": true,
      "baseUrl": "./src",
      "declaration": true,
      "declarationMap": true,
      "esModuleInterop": false,
      "forceConsistentCasingInFileNames": false,
      "importHelpers": true,
      "isolatedModules": false,
      "jsx": "react",
      "lib": ["dom", "dom.iterable"],
      "noEmitHelpers": true,
      "resolveJsonModule": true,
      "skipLibCheck": true,
      "strict": true,
      "target": "es3",
      "module": "commonjs",
      "moduleResolution": "node",
      "strictNullChecks": true
    },
    "exclude": [
      "node_modules"
    ],
    "include": [
        "./next-sitemap.config.ts"
    ]
  }
  

 

Create the Typescript Config File 

The following is a snippet which can easily be adjusted for you.

 

It has the following:

• Using Import Syntax for required files/packages
• Default Config from Next Config imported as IConfig
• Transform function with parameters typed as IConfig for Config and Url typed as string

import type { IConfig } from "next-sitemap";

import fetch from "node-fetch";
// @ts-ignore
global.fetch = fetch;

const config: IConfig = {
  siteUrl: "https://www.developright.co.uk",
  generateRobotsTxt: true,
  changefreq: 'monthly',
  priority: 0.5,

  // excude: ['/images/*'],
  transform: async (config: IConfig, url: string) => {
    return {
      loc: url, // => this will be exported as http(s)://<config.siteUrl>/<path>
      changefreq: config.changefreq,
      priority: config.priority,
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    };
  },
};

// @ts-ignore
export = config;

 

Set up Typescript to Transform the Config

Add the following to your scripts file within the package.json and this should do the following:

• Transform Typescript Config File to Javascript (CommonJS)
• Run the Next-Sitemap File with the created Config

"generate:sitemap": "rm -rf dist-sitemap && tsc --build tsconfig-sitemap.json && next-sitemap --config ./dist-sitemap/next-sitemap.config.js

Running "generate:sitemap" should now generate your sitemap whilst using Typescript