Развертывание приложения Next.js прямо сейчас

Zeit теперь называетсяVercel, и это руководство может быть устаревшим

Как развернуть приложение Next.js на реальном веб-сервере, чтобы другие люди могли получить к нему доступ?

Один из самых простых способов развернуть приложение Next - этоСейчас жеплатформа созданаZeit, та же компания, которая создала проект с открытым исходным кодом Next.js. Вы можете использовать Now для развертывания приложений Node.js, статических веб-сайтов и многого другого.

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

Вы можете думать об этом как об «облаке», поскольку на самом деле не знаете, где будет развернуто ваше приложение, но вы знаете, что у вас будет URL-адрес, по которому вы сможете получить к нему доступ.

Теперь можно бесплатно начать использовать с щедрым бесплатным планом, который в настоящее время включает 100 ГБ хостинга, 1000бессерверныйвызовов функций в день, 1000 сборок в месяц, 100 ГБ полосы пропускания в месяц и однаCDNместо расположения. Встраница с ценамипомогает получить представление о затратах, если вам нужно больше.

Установка

Лучший способ начать использовать Now - использовать официальный интерфейс командной строки Now:

npm install -g now

Как только команда станет доступной, запустите

now login

и приложение запросит у вас адрес электронной почты.

Если вы еще не зарегистрировались, создайте учетную запись наhttps://zeit.co/signupпрежде чем продолжить, добавьте свой адрес электронной почты в клиент CLI.

Как только это будет сделано, из корневой папки проекта Next.js запустите

now

и приложение будет мгновенно развернуто в облаке Now, и вам будет предоставлен уникальный URL-адрес приложения:

Как только вы запуститеnowпрограмма развертывается по случайному URL-адресу подnow.shдомен.

В выводе, показанном на изображении, мы видим 3 разных URL-адреса:

• https://firstproject-2pv7khwwr.now.sh
• https://firstproject-sepia-ten.now.sh
• https://firstproject.flaviocopes.now.sh

Почему так много?

Первый - это URL-адрес развертывания. Каждый раз, когда мы развертываем приложение, этот URL будет изменяться.

Вы можете немедленно протестировать, изменив что-то в коде проекта и запустивnowопять таки:

Остальные 2 URL не изменятся. Первый случайный, второй - имя вашего проекта (по умолчанию текущая папка проекта, имя вашей учетной записи, а затемnow.sh).

Если вы перейдете по URL-адресу, вы увидите, что приложение развернуто в производственной среде.

Вы можете настроить сейчас для обслуживания сайта в вашем собственном домене или субдомене, но я не буду сейчас углубляться в это.

Вnow.shподдомена достаточно для наших целей тестирования.

Больше следующих руководств:

• Начало работы с Next.js
• Next.js против Gatsby против приложения create-react-app
• Как установить Next.js
• Связывание двух страниц в Next.js с помощью Link
• Динамический контент в Next.js с роутером
• Передача данных в компонент Next.js с помощью getInitialProps
• Стилизация компонентов Next.js с помощью CSS
• Предварительная загрузка содержимого в Next.js
• Использование роутера для обнаружения активной ссылки в Next.js
• Просмотрите источник, чтобы подтвердить, что SSR работает в Next.js
• Next.js: заполните тег заголовка настраиваемыми тегами
• Развертывание приложения Next.js прямо сейчас
• Next.js: запускать код только на стороне сервера или на стороне клиента в Next.js
• Развертывание приложения Next.js в рабочей среде
• Как анализировать пакеты приложений Next.js
• Ленивая загрузка модулей в Next.js
• Добавление компонента-оболочки в приложение Next.js
• Значки, добавленные Next.js в ваше приложение
• Пакеты приложений Next.js
• Как использовать маршрутизатор Next.js
• Как использовать маршруты API Next.js
• Как получить файлы cookie на стороне сервера в приложении Next.js
• Как изменить порт приложения Next.js