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

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

Предварительные условия

Прежде чем приступить к установке Next.js на Debian 12, убедитесь, что вы соответствуете следующим требованиям:

Сервер под управлением одной из следующих операционных систем: Debian 12 (Bookworm).
Рекомендуется использовать свежую установку ОС, чтобы избежать возможных проблем.
SSH-доступ к серверу (или просто откройте Terminal, если вы работаете на рабочем столе).
Активное подключение к Интернету. Интернет-соединение понадобится для загрузки необходимых пакетов и зависимостей.
Учетная запись пользователя с привилегиями sudo для выполнения административных команд.

Установка Next.js на Debian 12 Bookworm

Шаг 1. Обновление системы

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

sudo apt update
sudo apt upgrade

Шаг 2. Установка Node.js на Debian 12.

Next.js построен на базе Node.js, поэтому вам нужно установить Node.js на ваш сервер Debian 12, прежде чем вы сможете использовать Next.js.

Во-первых, добавьте репозиторий Node.js в свою систему, выполнив следующую команду:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -

Установите Node.js, выполнив команду:

sudo apt install nodejs

Проверьте установку Node.js, проверив установленную версию:

node --version

Шаг 3. Настройка проекта Next.js

После установки Node.js вы готовы к созданию нового проекта Next.js. Теперь создайте новую директорию для проекта и перейдите в нее:

mkdir my-next-app
cd my-next-app

Инициализируйте новый проект Next.js с помощью команды create-next-app:

npx create-next-app@latest

Следуя подсказкам, выберите параметры по умолчанию для настройки проекта:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

После создания проекта изучите созданную структуру проекта:

pages: Содержит ваши страницы Next.js и маршруты API.
public: Хранит статические активы, такие как изображения и шрифты.
styles: Содержит ваши CSS-файлы.
json: Определяет зависимости и скрипты вашего проекта.

Запустите сервер разработки, чтобы увидеть свое приложение Next.js в действии:

npm run dev

Эта команда запускает сервер разработки, и вы можете просмотреть свое приложение, перейдя по адресу http://localhost:3000 в веб-браузере.

Шаг 4. Настройка Next.js.

Next.js предоставляет конфигурационный файл next.config.js, который позволяет настраивать различные параметры вашего приложения. Создайте файл next.config.js в корне проекта, если он еще не существует.

Откройте этот файл и добавьте нужные вам параметры конфигурации. Например:

module.exports = {
  env: {
    API_URL: process.env.API_URL,
  },
  basePath: '/my-app',
  target: 'server',
  webpack: (config, { isServer }) => {
    // Custom webpack configuration
    return config;
  },
};

В этом примере мы задаем переменную окружения, указываем базовый путь для приложения, устанавливаем цель сборки на сервер и предоставляем пользовательскую конфигурацию webpack.

Шаг 5. Развертывание в производство.

Когда вы будете готовы развернуть свое приложение Next.js на производстве, выполните следующие шаги:

npm run build

Выберите менеджер производственных процессов для запуска вашего приложения Next.js. Два популярных варианта — PM2 и SystemD.

Использование PM2:

Установите PM2 глобально:

sudo npm install -g pm2

Запустите свое приложение с помощью PM2:

pm2 start npm --name "my-next-app" -- start

Использование SystemD:

Создайте файл службы SystemD для вашего приложения Next.js:

sudo nano /etc/systemd/system/my-next-app.service

Добавьте следующую конфигурацию в файл службы:

[Unit]
Description=My Next.js App
After=network.target

[Service]
Type=simple
User=your-user
WorkingDirectory=/path/to/my-next-app
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

Замените your-user и /path/to/my-next-app на значения, соответствующие вашей конфигурации.

Сохраните файл и перезагрузите конфигурацию SystemD:

sudo systemctl daemon-reload

Запустите и включите службу:

sudo systemctl start my-next-appsudo systemctl enable my-next-app

Поздравляем! Вы успешно установили Next.js. Для получения дополнительной помощи или полезной информации мы рекомендуем вам посетить официальный сайт Next.js.