Як встановити 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.