Next.js |有啥方法可以呈现 .xml 文件？

Posted 2023-02-22

【中文标题】Next.js |有啥方法可以呈现 .xml 文件？

【英文标题】：Next.js | Is there any way to render an .xml file?Next.js |有什么方法可以呈现 .xml 文件？

【发布时间】：2021-03-04 07:20:55

【问题描述】：

当指向 www.example.com/sitemap.xml 时，我正在尝试呈现 XML 文件。由于该项目是使用 Next.js 开发的，因此路由使用存储在 pages 目录中的 js 文件：

example.com/help -> help.js example.com/info -> info.js

那么，有没有办法通过避免访问后端来实现呢？

【参考方案1】：

JS 版本

/pages/sitemap.xml.jsx

import React from 'react'

class Sitemap extends React.Component 
  static async getInitialProps( res ) 
    res.setHeader('Content-Type', 'text/xml')
    res.write(`<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ...
    </urlset>`)
    res.end()
  


export default Sitemap

TS 版本

/pages/sitemap.xml.tsx

import  GetServerSideProps  from 'next'
import React from 'react'

const Sitemap: React.FC = () => null

export const getServerSideProps: GetServerSideProps = async ( res ) => 
  if (res) 
    res.setHeader('Content-Type', 'text/xml')
    res.write(`<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

    </urlset>`)
    res.end()
  
  return 
    props: ,
  


export default Sitemap

:D

【讨论】：

不敢相信我什至没有想过在pages 目录中粘贴一个名为sitemap.xml.tsx 的文件...?‍♂️ 干得好！

谢谢，我已经添加了文件sitemap.xml.tsx，但正在寻找一种方法来返回 xml 而不是 html ?

【参考方案2】：

在公共目录下添加一个名为sitemap.xml的静态文件

public/sitemap.xml

构建后您可以访问www.yourdomain.com/sitemap.xml

阅读更多关于静态文件的信息：https://nextjs.org/docs/basic-features/static-file-serving