Next.js — мощный фреймворк для создания современных веб-приложений на основе React. Он идеально подходит для динамических сайтов, SEO-оптимизации, гибридных рабочих режимов и быстрого рендера контента.

Однако при размещении проекта возникает вопрос: как правильно адаптировать сайт, чтобы он работал стабильно и без лишних сложностей?

В этой статье мы пошагово разберём процесс подготовки и разёртывания вашего Next.js-сайта на виртуальном хостинге (хостинге сайтов) — от подготовки домена до финальной загрузки файлов.

Такой подход особенно актуален для веб-мастеров, стартапов, блогеров и бизнесов, которым не требуются сервера с постоянным Node.js-экземпляром, но важна скорость, стабильность и простота управления.

Что вам даст адаптация Next.js под виртуальный хостинг

После выполнения всех шагов:

— вы получите статический сайт, который открывается быстро и предсказуемо;

— проект будет совместим с большинством виртуальных панелей;

— вам не нужен будет отдельный VPS или выделенный сервер;

— сайт будет корректно работать с доменом, SSL и DNS-настройками;

— вы сможете использовать FTP/SSH для управления ресурсами.

Такой вариант подходит для блогов, корпоративных лендингов, портфолио и коммерческих проектов без сложной серверной логики.

Требования и подготовка

Перед началом убедитесь, что у вас есть:

— доменное имя, привязанное к виртуальному хостингу;

— доступы к панели управления (FTP и/или SSH);

— установлен Node.js в проекте для локального билда;

— базовое понимание структуры Next.js.

Если у вас ещё нет домена или хостинга — всё можно оформить через панель Majordomo.

Шаг 1. Привязка домена и настройка DNS

Чтобы сайт открывался по вашему доменному имени, сначала нужно:

В панели управления добавить домен в список активных сайтов.
Настроить A-записи DNS — указать IP-адрес сервера, где будут храниться файлы.
При необходимости добавить AAAA-записи для поддержки IPv6.
Дождаться распространения DNS — это может занять до 24 часов.

Правильная DNS-настройка — ключ к тому, чтобы пользователи могли без проблем открыть ваш сайт. Если запись указана неправильно, браузер просто не найдёт его.

Шаг 2. Подготовка проекта Next.js

По умолчанию Next.js использует серверные возможности Node.js, но на виртуальном хостинге чаще всего используется статическая генерация. Чтобы адаптировать проект:

Откройте файл next.config.js или создайте его, если его нет.
Пропишите следующие параметры:

const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};
module.exports = nextConfig;

Это позволит экспортировать сайт как статический набор HTML и ресурсов, который можно разместить на обычном виртуальном хостинге.

Шаг 3. Генерация статических страниц

Для построения статической версии выполните локально:

npm run build
npm run export

После выполнения этих команд в вашей рабочей папке появится директория out/ с готовыми к размещению файлами.

Шаг 4. Загрузка файлов на виртуальный хостинг

Теперь нужно загрузить содержимое папки out/ в корневую директорию сайта — чаще всего это папка вроде public_html или www.

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

FTP — при помощи клиента типа FileZilla либо через Web-FTP в панели управления;
SSH — если ваш виртуальный хостинг поддерживает SSH-доступ.

Если вы используете Majordomo, то панель позволяет легко настроить FTP-пользователей, загрузить файлы и управлять структурой через интерфейс.

Шаг 5. Решение проблемы с изображениями

Компонент <Image /> из Next.js требует серверной оптимизации, которая недоступна при статическом развёртывании. Чтобы сайт корректно работал:

— используйте параметр unoptimized: true (как выше);

— либо замените <Image /> на стандартный <img> вместе с URL-изображениями и CDN;

— либо храните изображения на внешнем облаке CDN.

Это важный шаг: без него картинки могут не отображаться или ломать отображение страниц.

Шаг 6. Базовая конфигурация сайта

Чтобы всё работало гладко:

— убедитесь, что SSL-сертификат активен — HTTPS обязательна для безопасности;

— настройте редиректы HTTP→HTTPS;

— проверьте страницы 404 и маршрутизацию;

— при необходимости подстройте правила .htaccess (если хостинг это поддерживает).

Пример .htaccess для Apache

Если ваш виртуальный хостинг работает на Apache и поддерживает его .htaccess, можно использовать следующую конфигурацию:

RewriteEngine On

# HTTPS
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Если существует файл напрямую — отдаём
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# /route → /route.html
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.+?)/?$ $1.html [L]

# /route → /route/index.html
RewriteCond %{REQUEST_FILENAME}/index.html -f
RewriteRule ^(.+?)/?$ $1/index.html [L]

ErrorDocument 404 /404.html

Этот корректно работает со статической сборкой nextjs (вывод: 'export'), где инструкция страницы переходит как папка с index.html.

Пример конфигурации Nginx

Если хостинг использует Nginx (обычно это VPS или расширенный виртуальный сервер), можно применить такую конфигурацию:

server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com www.example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    root /var/www/example.com/www;
    index index.html;

    location / {
        try_files $uri $uri.html $uri/ $uri/index.html =404;
    }

    location /_next/static/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    error_page 404 /404.html;
}

В этой схеме:

происходит автоматический редирект по HTTPS;
правильно обрабатываются маршруты вида /about;
статический сайт nextjs работает без серверного Node.js.

Такая настройка позволяет связать проект nextjs практически на любом хостинге сайтов без потерь SEO, корректной обработки 404 и без необходимости запуска серверного js-окружения.

Когда стоит выбирать VPS вместо виртуального хостинга

Если ваш Next.js проект использует:

— SSR (Server-Side Rendering) в реальном времени;

— сложные backend-логики или API;

— WebSocket-сообщения;

— постоянное соединение с базой в реальном времени;

то виртуальный хостинг под статический экспорт может быть недостаточен. В таком случае оптимальным будет переход на VPS или managed Node.js-среду. Но для большинства маркетинговых, корпоративных или контентных сайтов Next.js + статический хостинг — полностью достаточная и экономичная архитектура.

Вывод

Адаптация Next.js под виртуальный хостинг — это проверенный и эффективный способ получить быстрый, безопасный и стабильный сайт. Вместо сложной серверной архитектуры вы получаете:

— лёгкое управление через панель;

— быстрый доступ для пользователей;

— спокойную поддержку и регулярные бэкапы;

— экономию бюджета на инфраструктуру.

Если вы хотите, чтобы сайт просто работал — виртуальный хостинг остаётся одним из лучших решений.

Как адаптировать Next.js. сайт для виртуального хостинга