Next.js, обслуживающий статические файлы, не включенные в сборку или исходный код

У меня есть файлы, которые не хранятся в CDN, и я хотел бы обслуживать их с помощью Next.js. Эти файлы не предназначены для интеграции в Next.js и не должны помещаться в общую папку. Будут добавлены дополнительные файлы, и я хочу избежать использования собственного сервера Next.js для простого обслуживания файлов для изображений, которые недоступны во время сборки. Кроме того, это приложение будет развернуто только локально, и использование CDN в этой ситуации излишне.

В настоящее время я использую Express.js и собственный сервер Next.js express.staticдля обслуживания файлов, но в итоге это замедляет работу Next.js и добавляет много ненужной сложности в мой стек. Я бы предпочел просто использовать интерфейс командной строки Next.js для запуска своего приложения, а не изобретать велосипед.

Есть ли простой способ обслуживать статические файлы в Next.js и за пределами publicкаталога?

Я разместил этот вопрос и свой собственный ответ здесь, на StackOverflow, потому что мне не удалось найти хороший учебник о том, как это сделать. Почти в каждом поиске Google говорится, что нужно использовать собственный сервер или просто поместить файлы в общую папку, а это не то, что я искал. Надеюсь, другие, кто ищет то же самое, могут найти его здесь.

Решение проблемы

Отказ от ответственности: я не использую Vercel для публикации своих приложений и не знаю, применим ли этот ответ к Next.js в Vercel.

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

Вот некоторый код, который можно использовать express.staticна маршруте API Next.js.

// pages/api/images/[name].js
// Tell Next.js to pass in Node.js HTTP
export const config = {
 api: { externalResolver: true }
}
import express from 'express';
const handler = express();
const serveFiles = express.static('./path/to/files');
handler.use(['/api/images', '/images'], serveFiles);
// ^ ^
// Multiple endpoints are passed. The first one is used when visiting /api/images. 
// The second one is used when visiting /images using the middleware rewrite I mention below.
// express is just a function that takes (http.IncomingMessage, http.ServerResponse), 
// which Next.js supports when externalResolver is enabled.
export default handler;

Однако, чтобы обойти посещение этой конечной точки через, вы можете использовать новое промежуточное ПО/api/images/filename Next.js для перезаписи запроса!

// pages/images/_middleware.js
import { NextResponse } from 'next/server';
export function middleware(req) {
 // Rewrite /images/... to /api/images/...
 return NextResponse.rewrite('/api' + req.nextUrl.pathname);
}

При их использовании посещение /images/photo.pngбудет внутренне переписано /api/images/photo.pngи, в свою очередь, обработано express.static, что позволит вам обслуживать файлы вне маршрута API и без использования специального сервера!

Этот код, безусловно, можно упростить и избавиться от необходимости инициализировать приложение express.js только для обработки запроса, но невероятно просто интегрировать express.js в next.js без использования специального сервера!

Я разместил этот вопрос и свой собственный ответ здесь, на StackOverflow, потому что мне не удалось найти хороший учебник о том, как это сделать. Почти в каждом поиске Google говорится, что нужно использовать собственный сервер или просто поместить файлы в общую папку, а это не то, что я искал. Надеюсь, другие, кто ищет то же самое, могут найти его здесь.