Как установить Next.js на Ubuntu 24.04

Next.js – это популярный фреймворк React для разработки веб-приложений. Он предоставляет собой набор инструментов, упрощающих создание мощных и масштабируемых веб-приложений.

Next.js:

• позволяет выбирать между рендерингом на стороне сервера (SSR) и рендерингом на стороне клиента (CSR) в зависимости от потребностей вашего проекта;
• поддерживает генерацию статических сайтов, что обеспечивает быстрое время загрузки и повышает производительность веб-приложений;
• имеет в своей основе структуру файловой системы, что делает его интуитивно понятным и лёгким в использовании;
• предоставляет интегрированные инструменты для оптимизации изображений, что помогает улучшить производительность вашего сайта;
• позволяет создавать API-маршруты напрямую в вашем приложении, что делает интеграцию с серверным кодом простой и удобной.

В настоящем руководстве рассмотрим, как установить Next.js на Ubuntu 24.04.

Перед инсталляцией Next.js на сервере необходимо произвести работы по его предварительной настройке. В частности, нужно создать и добавить в группу sudo пользователя для того, чтобы работать на сервере именно под ним и не использовать учётную запись root. Кроме того, необходимо установить и настроить межсетевой экран UFW. Он является упрощённым интерфейсом управления брандмауэром в операционных системах Linux.

Установка Next.js

Как всегда перед установкой нового программного обеспечения обновите списки репозиториев в вашей системе:

$ sudo apt update

Для функционирования Next.js требуется инструмент командной строки Node.js желательно последней актуальной версии и желательно LTS. Чтобы установить Node.js, перейдите на его страницу загрузки, выберите Package Manager, затем выберите устанавливаемую версию, тип операционной системы Linux и тип установки NVM:

Оттуда скопируйте команду для загрузки Node.js, после чего запустите её на своём сервере:

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Затем отключитесь от командной строки при помощи комбинации клавиш Ctrl D, подключитесь снова с использованием административной учётной записи и запустите установку последней LTS-версии Node.js при помощи команды nvm:

$ nvm install --lts

Как видно из скриншота ниже, мы установили Node.js версии 20.12.2 (LTS):

Теперь следующей командой создайте свой первый проект Next.js. Если Next.js ещё не установлен как в нашем случае, то эта же команда при первом запуске произведёт его загрузку и инсталляцию:

$ npx create-next-app@latest

Для того, чтобы процесс установки начался, необходимо согласиться с его запуском, набрав символ y и нажав Enter. После чего придумайте и введите название создаваемого проекта:

Затем нужно при помощи символов y или n ответить инсталлятору, планируете ли вы в дальнейшем использовать TypeScript, ESLint, Tailwind CSS, директорию src, App Router, а также хотите ли вы настроить алиас для импорта компонентов по умолчанию:

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

Настройка брандмауэра и запуск проекта

Поскольку веб-интерфейс созданного проекта доступен на tcp-порту 3000, необходимо в брандмауэр добавить соответствующее разрешающее правило. Для чего используйте следующую команду:

$ sudo ufw allow 3000/tcp

Теперь всё готово для запуска вашего первого проекта. Чтобы сделать это, перейдите в его каталог. В нашем примере это – ~/your-project:

$ cd ~/your-project

И находясь в нём выполните команду:

$ npm run dev

Из вывода данной команды видно, что проект успешно стартовал и его веб-интерфейс доступен по адресу http://localhost:3000:

Так как наш сервер не имеет графической оболочки, подключиться к интерфейсу проекта можно с локальной рабочей станции, перейдя в браузере по адресу http://X.X.X.X:3000. В данном случае, замените X.X.X.X на IP-адрес вашего сервера:

Таким образом, в статье мы рассмотрели, как установить Next.js на Ubuntu 24.04. Больше информации по его использованию доступно на официальной странице фреймворка.