Экономьте время за счет динамического создания файлов Sitemap в NextJS

В этом посте вы создадите собственную карту сайта Next js менее чем за 1 минуту.

Во-первых, вам нужно будет установить пакет карты сайта, чтобы выполнить это действие.

Откройте свой терминал и запустите:

```javascript

npm установить карту сайта

В этом уроке я использовал next-connect для обработки своих запросов. Если вы уже используете его, вы можете следить за этим блогом, не делая ничего дополнительно. Если у вас нет next-connect, откройте терминал и запустите:

```javascript

npm установить следующее подключение

После установки этих пакетов нам понадобится файл sitemap.js в папке API.

Пришло время сгенерировать нашу карту сайта. Скопируйте этот код в sitemap.js и отредактируйте раздел вашего сайта.

```javascript

импортировать nc из «следующего подключения»;

импортировать Блог из '../../models/blog';

импортировать dbConnect из '../../utils/db'

константный обработчик = nc();

handler.get (асинхронный (req, res) => {

// подключаемся к базе данных (подготовьте ее в папке utils, если у вас ее нет)

ждать dbConnect ()

// Получить все записи в блоге

константные сообщения = ожидание Blog.find().lean()

const { createWriteStream } = require('fs');

const { SitemapStream } = require('sitemap');

const sitemap = new SitemapStream({имя хоста: 'https://www.yourwebsite.com' });

const writeStream = createWriteStream('./public/sitemap.xml');

sitemap.pipe(writeStream);

// Запись статических страниц в карту сайта

sitemap.write({url: '/', changefreq: 'ежедневно', приоритет: 1})

sitemap.write({ url: '/staticpage/', changefreq: 'ежедневно', приоритет: 0,8})

sitemap.write({ url: '/staticpage1/', changefreq: 'ежедневно', приоритет: 0,8})

sitemap.write({ url: '/staticpage2/', changefreq: 'ежедневно', приоритет: 0,8})

// Запись динамических страниц в карту сайта

// перебираем все сообщения, поступающие из модели блога Mongo DB

сообщения.карта (элемент => {

sitemap.write({ url: /myblog/${item.id}/, changefreq: 'ежедневно', приоритет: 0,9 })

// Завершить написание карты сайта

карта сайта.конец();

// Отправляем сообщение после завершения процесса

res.status(200).json({сообщение: "Готово"})})

экспортировать обработчик по умолчанию

Теперь позвольте мне объяснить весь этот код.

1. Сначала мы импортировали next-connect для обработки запросов.

1. Затем мы импортировали модель «Блог», которую мы подготовили ранее, чтобы получить все сообщения. Вы можете получить все свои сообщения через конечную точку API вместо использования модели Blog.

1. После этого мы подключились к базе данных, чтобы хранить все посты в переменной posts. Теперь мы можем начать писать наши статические страницы с помощью sitemap.write().

1. Перебрать все сообщения, которые вы сохранили в переменной posts. Напишите URL-адрес с идентификатором или слагом, а затем напишите карту сайта.

1. Посетите ваш localhost:3000/api/sitemap в режиме разработки, и вы увидите, что sitemap.xml создан в вашей общей папке.

Также опубликовано здесь