Add Sitemap to a Blog Build by NextJS
2019/11/29
Sitemap is good for google to index your site.
Add a new file named sitemap.xml.js
under pages
import React, { Component } from "react";
import blogposts from "../posts/index";
export default class SiteMap extends Component {
static async getInitialProps({ req, res }) {
if (res) {
const path = require("path");
const fs = require("fs");
const SITE_ROOT = process.env.SITE_ROOT || "https://blog.fengqijun.me";
let xml = "";
xml += '<?xml version="1.0" encoding="UTF-8"?>';
xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
blogposts.forEach(post => {
xml += "<url>";
xml += `<loc>${SITE_ROOT + post.path}</loc>`;
xml += `<lastmod>${post.publishedAt}</lastmod>`;
xml += `<changefreq>always</changefreq>`;
xml += `<priority>0.5</priority>`;
xml += "</url>";
});
xml += "</urlset>";
res.setHeader("Content-Type", "text/xml");
res.write(xml);
res.end();
}
}
}
That's it. Fetch all posts data, and render an xml file with it.
const fs = require("fs");
const path = require("path");
const DIR = path.join(process.cwd(), "/pages/posts/");
const META = /export\s+const\s+meta\s+=\s+({[\s\S]*?\n})/;
const files = fs
.readdirSync(DIR)
.filter(file => file.endsWith(".md") || file.endsWith(".mdx"));
module.exports = files
.map((file, index) => {
const name = path.join(DIR, file);
const contents = fs.readFileSync(name, "utf-8");
const match = META.exec(contents);
if (!match || typeof match[1] !== "string") {
throw new Error(`${name} needs to export const meta = {}`);
}
// eslint-disable-next-line no-eval
const meta = eval("(" + match[1] + ")");
const publishedAt = new Date(meta.publishedAt);
// const year = publishedAt.getUTCFullYear();
// const month = publishedAt.getUTCMonth() + 1;
// const day = publishedAt.getUTCDate();
return {
...meta,
path: "/posts/" + file.replace(/\.mdx?$/, ""),
index
};
})
.filter(meta => meta.published)
.sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt));