Пошук уроків, статей та іншого контенту
Навчитеся створювати production-збірку командою next build і запускати її через next start.
next build і next startПід час розробки Next.js застосунок запускають командою:
npm run devТакий режим зручний для роботи: зміни у файлах одразу відображаються в браузері. Проте режим розробки не призначений для розгортання застосунку.
Для production використовують дві окремі команди:
next build — створює production-збірку.
next start — запускає вже створену production-збірку.
package.jsonЗазвичай команди запускають через npm-скрипти. Файл
package.json{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}Після цього команди виконуються так:
npm run dev
npm run build
npm run startКоли npm запускає скрипт "build": "next build", він фактично виконує команду next build.
Виконайте в кореневій папці Next.js-проєкту:
npm run buildАбо безпосередньо:
npx next buildПід час виконання Next.js:
перевіряє код застосунку;
компілює JavaScript і CSS;
оптимізує сторінки;
готує серверні та статичні частини застосунку;
зберігає результат у папці .next.
Приклад успішного виконання може виглядати так:
Creating an optimized production build ...
Compiled successfully
Collecting page data
Generating static pages
Finalizing page optimizationПапка .next створюється автоматично. Не потрібно створювати її вручну.
Production-збірка не буде створена коректно, якщо в проєкті є помилки. Наприклад:
синтаксична помилка;
неправильний імпорт;
помилка під час виконання коду на етапі збірки;
невірна конфігурація Next.js.
Спочатку виправте помилку, а потім повторіть команду:
npm run buildПісля успішного виконання next build запустіть застосунок:
npm run startАбо:
npx next startЗа замовчуванням застосунок буде доступний за адресою:
http://localhost:3000Тепер Next.js працює в production-режимі та використовує вміст папки .next.
Повний локальний сценарій виглядає так:
npm install
npm run build
npm run startПісля запуску відкрийте в браузері http://localhost:3000.
next start не створює збірку самостійно. Спочатку потрібно виконати next build.
Неправильний порядок:
npm run startЯкщо production-збірки ще немає, Next.js повідомить про помилку або про відсутність папки .next.
Правильний порядок:
npm run build
npm run startЯкщо ви змінили код після створення збірки, потрібно знову виконати build:
npm run build
npm run startБез повторної збірки next start може запустити стару версію застосунку.
За замовчуванням Next.js використовує порт 3000. Інший порт можна вказати параметром -p:
npx next start -p 4000Тоді застосунок буде доступний за адресою:
http://localhost:4000Те саме можна додати до package.json:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 4000"
}
}Після цього команда:
npm run startзапустить застосунок на порту 4000.
Уявімо, що проєкт має таку структуру:
my-next-app/
├── app/
│ └── page.js
├── package.json
└── ...Файл app/page.js:
export default function HomePage() {
return (
<main>
<h1>Production-збірка Next.js</h1>
<p>Цю сторінку запускає команда next start.</p>
</main>
);
}Файл package.json:
{
"name": "my-next-app",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^14.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}Команди для перевірки:
npm install
npm run build
npm run startПісля цього сторінка буде доступна за адресою http://localhost:3000.
dev і start| Команда | Призначення | |---|---| | npm run dev | Розробка із застосуванням режиму development | | npm run build | Створення production-збірки | | npm run start | Запуск створеної production-збірки |
Для розгортання застосунку потрібна послідовність:
npm run build
npm run startnext start без next buildПомилка виникає, якщо папка .next відсутня або не містить актуальної збірки.
Виправлення:
npm run build
npm run startПісля зміни коду вже створена production-збірка не оновлюється автоматично.
Потрібно зупинити сервер, створити нову збірку та запустити її знову:
npm run build
npm run startКоманди потрібно виконувати в папці, де розташований package.json.
Перевірте поточну папку та перейдіть до проєкту:
cd my-next-app
npm run buildЯкщо порт 3000 уже використовується, запустіть Next.js на іншому порту:
npx next start -p 3001Або зупиніть інший процес, який використовує порт 3000.
.next замість повторної збіркиПапка .next є результатом роботи Next.js. Її видалення не створює нову збірку.
Після видалення потрібно виконати:
npm run buildВідкрийте наявний Next.js-проєкт.
Переконайтеся, що в package.json є скрипти build і start.
Виконайте:
npm run buildЗапустіть production-сервер:
npm run startВідкрийте http://localhost:3000.
Змініть текст сторінки.
Знову виконайте npm run build.
Перезапустіть сервер командою npm run start і перевірте новий текст.
next build створює production-збірку Next.js.
Результат збірки зберігається в папці .next.
next start запускає production-збірку.
Перед next start обов’язково потрібно виконати next build.
Після змін у коді production-збірку потрібно створити повторно.
За замовчуванням сервер запускається на порту 3000.
Для іншого порту можна використати параметр -p.