给Nuxt.js添加robots.txt

Next.js提供了各式各样的功能，无论是它生成页面的方式（静态或服务器请求）还是用增量静态再生的方式更新页面，这个框架都有很多令人兴奋的选项来吸引开发者。在Next.js的所有功能中，它对SEO的支持是它比其他框架（如Create React App）更突出的主要优势之一。
React对于JavaScript开发人员来说是一种很好的语言，但不幸的是，它对SEO相当不利。原因是，React是客户端渲染的。具体来说，当用户请求一个页面时，服务器不是返回HTML，而是提供JavaScript，然后浏览器构建对应的页面。
因此，SPA的页面加载时间通常比使用服务器端渲染的页面要长。除此之外，在很长一段时间里，谷歌的爬虫并不能正确地抓取JavaScript，百度、搜狗、360、头条的爬虫目前也对JavaScript的抓取不太友好。
Next.js解决了这个问题，它不仅基于React，还为开发者提供了服务器端渲染。这使得开发者很容易迁移他们的应用程序。
SEO的一个重要部分是在你的网站上有一个robots.txt。在这篇文章中，你会发现什么是robots.txt，以及如何在你的Next.js应用程序中添加一个，这不是Next.js自带的东西。

什么是robots.txt文件？

robots.txt文件是一个网络标准文件，它告诉搜索引擎爬虫，如百度爬虫，哪些页面可以抓取，哪些页面不能抓取。这个文件在你的web部署的根目录，因此可以通过这个网址访问 www.yourdomain.com/robots.txt
如前所述，该文件允许您告诉爬虫哪些页面和文件可以抓取，哪些不可以。你可能希望你的应用程序的某些部分是不可访问的，如你的后台管理页面。

设置robots举例

不允许路径设置

User-agent: nameOfBot
Disallow: /admin/

允许路径设置

User-agent: *
Allow: /

在文件的最后，您还可以为您的网站添加xml地图

Sitemap: http://www.yourdomain.com/sitemap.xml

最后，你的robots.txt应该像是这样的

User-agent: nameOfBot
Disallow: /admin/

User-agent: *
Allow: /

Sitemap: http://www.yourdomain.com/sitemap.xml

如何在你的Next.js应用程序中添加robots.txt文件

在你的应用程序中添加robots.txt 文件非常容易。每个Next.js项目都有一个名为public的文件夹。这个文件夹允许你存储静态资产，然后可以从你的域名根部访问。因此，在你的public文件夹中存储像dolphin.jpeg这样的图片，当你的项目被部署后，您可以从http://www.yourdomain.com/dolphin.jpeg中访问您的图片。同样的方法也可以访问你的robots.txt文件。
因此，要在你的应用程序中添加robots.txt文件，你所要做的就是把它放到你应用程序的公共文件夹中。

其他选项：动态生成

有一种方法可以动态地生成你的robots.txt文件。要做到这一点，需要利用Next.js的两个功能。API路由和重写。
Next.js允许你定义API路由。这意味着，当对一个特定的API端点进行请求时，你可以为你的robots.txt文件返回正确的内容。
要做到这一点，在你的pages/api文件夹中创建一个robots.js文件。这将自动创建一个路由。在这个文件中，添加你的处理程序，它将返回你的·robots.txt·内容。

export default function handler(req, res) {
    res.send('Robots.txt content goes there'); // 将你的`robots.txt内容发送到这里
}

但是，这只能在/api/robots中找到，如上所述，搜索引擎爬虫会寻找/robots.txt网址。
值得庆幸的是，Next.js提供了一个叫做改写的功能。这允许你将一个特定的目标路径重新路由到另一个路径。在这个特定的案例中，你想把对/robots.txt的所有请求重定向到/api/robots。
要做到这一点，请进入你的next.config.js添加重写。

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
      return [
          {
              source: '/robots.txt',
              destination: '/api/robots'
          }
      ];
  }
}
module.exports = nextConfig

添加这个重写代码，每次你访问/robots.txt时，它都会重写调用/api/robots并显示"Robots.txt content goes there"的信息。

转载：www.aidanmu.me