Пошук уроків, статей та іншого контенту
Створите новий Next.js проєкт за допомогою create-next-app і налаштуєте базові параметри під час ініціалізації.
Для створення Next.js проєкту потрібен встановлений Node.js. Перевірити версії Node.js і npm можна в терміналі:
node --version
npm --versionЯкщо команди не знайдені, встановіть актуальну LTS-версію Node.js.
npm встановлюється разом із Node.js і використовується для запуску команди create-next-app.
Відкрийте термінал у папці, де хочете зберігати проєкт, і виконайте:
npx create-next-app@latest my-next-appУ цій команді:
npx запускає пакет без потреби встановлювати його глобально;
create-next-app — офіційний інструмент для створення Next.js проєктів;
@latest вказує використати останню доступну версію;
my-next-app — назва нової папки та проєкту.
Після запуску команда поставить кілька запитань про налаштування.
Під час ініціалізації зазвичай потрібно вибрати такі параметри:
TypeScript — використання TypeScript замість звичайного JavaScript;
ESLint — перевірка коду на поширені помилки;
Tailwind CSS — підключення Tailwind CSS для стилізації;
src/ directory — зберігати код у папці src;
App Router — використання сучасного маршрутизатора Next.js;
import alias — скорочений запис шляхів імпорту, наприклад @/*.
Для першого проєкту можна погодитися з рекомендованими значеннями. Якщо команда використовує клавіатуру:
натискайте Y або N для відповідей «так» і «ні»;
використовуйте стрілки для вибору варіанта;
натискайте Enter для підтвердження.
Приклад набору налаштувань:
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? Yes
Would you like to customize the import alias? NoПісля підтвердження create-next-app створить папку проєкту та встановить залежності.
Налаштування можна передати одразу в команді, не відповідаючи на запитання інтерактивно:
npx create-next-app@latest my-next-app --typescript --eslint --tailwind --src-dir --appЦя команда створить проєкт:
з TypeScript;
з ESLint;
з Tailwind CSS;
із папкою src;
з App Router.
Якщо потрібно використовувати JavaScript, не додавайте параметр --typescript:
npx create-next-app@latest my-next-app --eslint --tailwind --src-dir --appДля створення проєкту в поточній папці замість назви папки можна використати крапку:
npx create-next-app@latest .Перед цим переконайтеся, що поточна папка порожня або не містить файлів, які можуть конфліктувати з новим проєктом.
Після завершення встановлення структура проєкту може виглядати так:
my-next-app/
├── public/
├── src/
│ └── app/
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── .gitignore
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package.json
├── postcss.config.mjs
└── tsconfig.jsonОсновні файли:
src/app/page.tsx — головна сторінка застосунку;
src/app/layout.tsx — спільний макет сторінок;
src/app/globals.css — глобальні стилі;
public/ — статичні файли, наприклад зображення;
package.json — залежності та команди проєкту;
next.config.ts — конфігурація Next.js;
tsconfig.json — налаштування TypeScript.
Якщо під час створення не вибрати папку src, каталог app буде розташований безпосередньо в корені проєкту.
Перейдіть до створеної папки:
cd my-next-appЗапустіть сервер розробки:
npm run devПісля цього Next.js запустить локальний сервер. У терміналі буде показано адресу, за якою можна відкрити застосунок у браузері.
Після відкриття сторінки ви побачите стартовий вміст, згенерований create-next-app.
Щоб зупинити сервер, натисніть у терміналі:
Ctrl + CВідкрийте файл src/app/page.tsx і замініть його вміст:
export default function Home() {
return (
<main>
<h1>Мій перший Next.js проєкт</h1>
<p>Застосунок успішно запущено.</p>
</main>
);
}Збережіть файл і оновіть сторінку в браузері. У режимі розробки Next.js автоматично застосує зміни.
Команди, доступні в package.json, можна запускати через npm run:
npm run devЗапускає сервер розробки.
npm run buildСтворює оптимізовану production-версію застосунку.
npm run startЗапускає вже зібрану production-версію. Перед цим потрібно виконати npm run build.
npm run lintПеревіряє код за правилами ESLint, якщо ця команда додана до проєкту.
Назва проєкту не повинна містити пробіли та великі літери. Використовуйте формат на кшталт:
my-next-app
blog-app
shop-frontendcreate-next-app створює нову папку відносно поточної. Перед запуском перевірте поточне розташування:
pwdУ Windows PowerShell для перегляду поточної папки також можна використати:
Get-LocationЯкщо стандартний порт зайнятий, Next.js може запропонувати використати інший. Також сервер можна запустити на іншому порту:
npm run dev -- --port 3001Якщо під час встановлення з’являються помилки сумісності, перевірте версію Node.js:
node --versionОновіть Node.js до актуальної LTS-версії та повторіть створення проєкту.
Якщо створення було перервано, перейдіть до папки проєкту та виконайте:
npm install
npm run devУ цьому уроці ви:
перевірили наявність Node.js і npm;
створили Next.js проєкт за допомогою create-next-app;
вибрали TypeScript, ESLint, Tailwind CSS, src directory та App Router;
запустили сервер розробки командою npm run dev;
змінили головну сторінку у файлі src/app/page.tsx.
Базова послідовність створення і запуску проєкту:
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev