У меня есть файл «.html», который мне нужно обслуживать по определенному маршруту в моем Next.js приложение, например, такое…

/pages/customr-route-name/my-html-file.html

Итак, если я перейду на свой веб-сайт и введу http://example.com/custom-route-name/my-html-file.html , я смогу это увидеть

Как я могу это сделать в Next.js ?

Для этого требуется маршрут API и перезапись URL-адреса, чтобы начать работать. И самое приятное, что вы сможете использовать этот шаблон и для других целей (например, если вы хотите сгенерировать RSS-канал или sitemap.xml ).

ПРИМЕЧАНИЕ: вам нужно будет запустить Next 9.5, чтобы это сработало.

0. Переместите свой HTML-файл (необязательно)

Ваш файл не обязательно должен находиться в ./pages каталоге. Давайте вставим его ./static вместо этого. Просто замените эти заполнители файла маршрута на ваше реальное имя файла позже: ./static/<route>/<file>.html

1. Создайте маршрут API

Далее позволяет создавать маршруты API, аналогичные тем, которые вы использовали бы на хостах старого типа, таких как Express. Любое имя подходит, пока оно ./pages/api есть. Мы назовем это ./pages/api/static/<route>/<file>.js

 // import

import fs from 'fs';

// vars

const filename = './static/<route>/<file>.html';

// export

export default async function api(req, res) {
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  res.write(await fs.readFileSync(filename, 'utf-8'));
  res.end();
}

  

2. Добавьте перезапись в next.config.js

Далее перезаписи работают аналогично их аналогам apache. Они сопоставляют местоположение URL-адреса со следующим ./page .

 // export

module.exports = {
  rewrites: async () => [
    {source: '/<route>/<file>', destination: './pages/api/static/<route>/<file>'},
  ],
};
  

3. Запустите его!

Вы должны иметь возможность протестировать это с помощью обычного next dev . Конечно, изменения next.config.js потребуют от вас ручной перезагрузки сервера разработки.

Если вы посмотрите на следующие документы, вы увидите, что вы можете использовать подстановочные знаки как в маршрутах API, так и в этих перенаправлениях, что может помочь с направлением, в котором вы движетесь.

Обновление для NextJS версии 11

В вашей public папке вы можете создать структуру папок по образцу нужного вам URL-адреса.

Например:

 public/custom-path-folder-name/file.html
  

будет обслуживаться по адресу:

 http://localhost:3000/custom-path-folder-name/file.html
  

Для получения дополнительной информации см. Документы nextjs для статического обслуживания файлов