Как в Next.js закешировать изображение без build?

В Next.js, для кеширования изображений без необходимости пересборки проекта после изменений, можно воспользоваться стандартным механизмом кеширования браузера с помощью заголовка Cache-Control.

Для закеширования изображений на стороне клиента, вам нужно добавить заголовок Cache-Control к ответу сервера, который отдает файлы изображений. В Next.js можно сделать это, используя API маршруты (API routes) или middleware.

Вот пример:

1. Создайте API маршрут, который будет отдавать изображение:

// pages/api/images/[imageId].js
import fs from 'fs';

export default async (req, res) => {
  const { imageId } = req.query;
  const imagePath = `path/to/images/${imageId}.jpg`;
  
  const image = fs.readFileSync(imagePath);

  res.setHeader('Cache-Control', 'public, max-age=31536000');
  res.setHeader('Content-Type', 'image/jpeg');
  res.end(image);
};

2. Теперь, когда вы обращаетесь к этому API маршруту, изображение будет отдаваться клиенту с заголовком Cache-Control: public, max-age=31536000, что означает, что браузер должен кешировать изображение на 1 год.

3. Используйте этот API маршрут для загрузки изображений на вашем сайте.

Обратите внимание, что использование кеша может вызвать проблемы при обновлении изображений на сервере, поэтому важно иметь план обновления кеша при изменении изображений.

Таким образом, вы можете использовать стандартные механизмы HTTP кеширования в Next.js, чтобы помочь ускорить загрузку и уменьшить нагрузку на сервер при отображении изображений.