IMLC.ME
Search…
en-US
Powered By GitBook
Next.js 如何生成 robots.txt 和 sitemap.xml
为了优化 SEO,生成 robots.txt 和 sitemap.xml 是必不可少的功能。 Next.js 自身并不提供生成 robots.txt 和 sitemap.xml 的特性,所以需要自己实现。

Server Side Render(SSR)

sitemap.xml.js

pages/ 目录下创建 sitemap.xml.js。当浏览器访问 http://<your-domain>/sitemap.xml 路径时, Next.js 会调用 sitemap.xml.js 处理请求并响应。 在下面的例子中,我请求后台 API 获取 sitemap 数据,并返回给浏览器。
1
import React, { Component } from "react";
2
import fetch from 'isomorphic-unfetch';
3
4
export default class SiteMap extends Component {
5
static async getInitialProps({req, res}) {
6
if(res) {
7
const response = await fetch(`http://${req.headers['host']}/api/sitemap`);
8
const text = await response.text();
9
res.setHeader("Content-Type", "text/xml");
10
res.write(text);
11
res.end();
12
}
13
14
}
15
}
Copied!

robots.txt

同样地,在 pages/ 目录下创建 robots.txt 文件。
1
import React, { Component } from "react";
2
3
export default class Robots extends Component {
4
static getInitialProps({ res }) {
5
res.setHeader("Content-Type", "text/plain");
6
res.write(`User-agent: *
7
Disallow:
8
Sitemap: https://www.imlc.me/sitemap.xml`);
9
res.end();
10
}
11
}
Copied!

Static Export

如果你是以生成静态文件的方式部署你的网站,那么事情就相当简单了。 因为生成的静态文件都在 out/ 目录下,你只需要写个简单的脚本生成 robots.txt 和 sitemap.xml,并置于 out/ 目录下。 具体方法我想不必多言。

References

Last modified 1yr ago