Пользовательский сервер

По умолчанию Next.js включает собственный сервер с next start. Если у вас есть существующий бэкенд, вы все равно можете использовать его с Next.js (это не пользовательский сервер). Пользовательский сервер Next.js позволяет запустить сервер на 100% программно, чтобы использовать пользовательские шаблоны сервера. В большинстве случаев это не требуется, но оно доступно для полной настройки.

Важно знать:

• Перед тем, как решить использовать пользовательский сервер, имейте в виду, что это должно использоваться только тогда, когда интегрированный маршрутизатор Next.js не может удовлетворить требованиям вашего приложения. Пользовательский сервер удалит важные оптимизации производительности, такие как бессерверные функции и Автоматическая статическая оптимизация.
• Пользовательский сервер не может быть развернут на Vercel.
• В режиме автономного вывода не отслеживаются файлы пользовательского сервера, и вместо этого генерируется отдельный минимальный server.js файл.

Рассмотрим пример пользовательского сервера:

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
 
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
 
app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl
 
      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  })
    .once('error', (err) => {
      console.error(err)
      process.exit(1)
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`)
    })
})

server.js не проходит через babel или webpack. Убедитесь, что синтаксис и источники, необходимые этому файлу, совместимы с текущей версией node, которую вы используете.

Для запуска пользовательского сервера вам нужно обновить scripts в package.json следующим образом:

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

Пользовательский сервер использует следующий импорт для подключения сервера к приложению Next.js:

const next = require('next')
const app = next({})

Вышеприведенный next импорт — это функция, которая получает объект со следующими параметрами:

Возвращенное значение app затем можно использовать для обработки запросов Next.js по мере необходимости.

Отключение маршрутизации по файловой системе

По умолчанию Next будет обслуживать каждый файл в папке pages по пути, соответствующему имени файла. Если ваш проект использует пользовательский сервер, такое поведение может привести к тому, что одно и то же содержимое будет обслуживаться из нескольких путей, что может создать проблемы с SEO и UX.

Чтобы отключить это поведение и предотвратить маршрутизацию на основе файлов в pages, откройте next.config.js и отключите параметр useFileSystemPublicRoutes.

module.exports = {
  useFileSystemPublicRoutes: false,
}

Обратите внимание, что useFileSystemPublicRoutes отключает маршрутизацию по имени файла из SSR; клиентская маршрутизация может все еще получать доступ к этим путям. При использовании этого параметра следует предотвращать навигацию к маршрутам, которые вы не хотите программно управлять.

Вы также можете настроить клиентский маршрутизатор, чтобы запретить перенаправления на клиентской стороне для путей имен файлов; об этом можно узнать, обратившись к router.beforePopState.