Next.js | Is there any way to render an .xml file?

Question

I'm trying to render an XML file when pointing to www.example.com/sitemap.xml. Since the project was developed using Next.js, the routing works with the js files stored in the pages directory:

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

So, is there any way to achieve this by avoiding accessing the backend?

Answer 1

JS Version

/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 Version

/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

Answer 2

Add a static file called sitemap.xml under public directory

public/sitemap.xml

after build you can access www.yourdomain.com/sitemap.xml

Read more on static files: https://nextjs.org/docs/basic-features/static-file-serving