爲 Next.js 應用生成 robots.txt 和 sitemap.xml

時間 2019-11-16

標籤 next.js 應用生成 robots.txt robots txt sitemap.xml sitemap xml 欄目 JavaScript 简体版

原文原文鏈接

原文發佈於 https://www.imlc.me/p/generate-robots-txt-and-sitemap-xml-in-next-js-zh
爲了優化 SEO，生成 robots.txt 和 sitemap.xml 是必不可少的功能。
Next.js 自身並不提供生成 robots.txt 和 sitemap.xml 的特性，因此須要本身實現。javascript

Server Side Render(SSR)

sitemap.xml.js

在 pages/ 目錄下建立 sitemap.xml.js。當瀏覽器訪問 http://<your-domain>/sitemap.xml 路徑時， Next.js 會調用 sitemap.xml.js 處理請求並響應。
在下面的例子中，我請求後臺 API 獲取 sitemap 數據，並返回給瀏覽器。java

import React, { Component } from "react";
import fetch from 'isomorphic-unfetch';

export default class SiteMap extends Component {
    static async getInitialProps({req, res}) {
        if(res) {
            const response = await fetch(`http://${req.headers['host']}/api/sitemap`);
            const text = await response.text();
            res.setHeader("Content-Type", "text/xml");
            res.write(text);
            res.end();
        }

    }
}

robots.txt

一樣地，在 pages/ 目錄下建立 robots.txt 文件。react

import React, { Component } from "react";

export default class Robots extends Component {
    static getInitialProps({ res }) {
        res.setHeader("Content-Type", "text/plain");
        res.write(`User-agent: *
Disallow:
Sitemap: https://www.imlc.me/sitemap.xml`);
        res.end();
    }
}