Next.js – это известный фреймворк для React, который помогает создавать быстрые и современные веб-сайты. Он прост в использовании и обладает мощными функциями, такими как рендеринг на стороне сервера, создание статических страниц и создание API.
Если вы хотите начать проект на Next.js на ваших системах на основе Ubuntu, этот гид проведет вас через процесс шаг за шагом.
Предварительные требования
Перед тем как начать настройку проекта Next.js, вам нужно установить несколько вещей на вашей системе Linux, к которым относятся:
Node.js: Next.js построен наNode.js, поэтому необходимо установить Node.js.npm: npm (Node Package Manager) используется для управления пакетами и зависимостями вашего проекта.
Давайте пройдем через процесс установки как Node.js, так и npm.
Шаг 1: Установите Node.js и NPM в Linux
Перед установкой любого нового программного обеспечения рекомендуется обновить список пакетов, чтобы убедиться, что вы устанавливаете последнюю версию доступного программного обеспечения в репозиториях.
sudo apt update
Далее вы можете установить Node.js (также устанавливается npm), лучше всего установить версию Node.js, которая помечена как LTS (Долгосрочная поддержка), так как это самая стабильная и широко используемая версия.
sudo apt install nodejs
После завершения установки проверьте, что Node.js установлен правильно, проверив его версию:
node -v npm -v
Теперь у вас установлены как Node.js, так и npm на вашей системе.
Шаг 2: Установка и настройка проекта Next.js
Теперь, когда у вас установлены Node.js и npm, пришло время создать новый проект Next.js. Самый простой способ установить Next.js – это использовать create-next-app, который является официальным пакетом, предоставленным командой Next.js.
sudo npm install -g create-next-app
Теперь, когда create-next-app установлен, вы можете создать новый проект Next.js.
npx create-next-app@latest my-next-app
Здесь my-next-app – это имя вашей папки проекта. Вы можете заменить его на любое имя, которое вам нравится. Команда npx загрузит и запустит пакет create-next-app, и она настроит новый проект Next.js для вас.
После завершения выполнения команды у вас будет новая папка с именем my-next-app с базовой структурой приложения Next.js.
Шаг 3: Запустите ваш проект Next.js
После создания проекта перейдите в папку вашего проекта и запустите сервер разработки:
cd my-next-app npm run dev
Эта команда запустит сервер разработки Next.js. По умолчанию сервер будет работать на http://localhost:3000.
Откройте ваш браузер и перейдите по этому URL, и вы должны увидеть страницу приветствия по умолчанию Next.js.
Вы можете начать создавать новые страницы в папке app. Например, создайте новый файл about.js внутри директории app, чтобы создать страницу “О нас”.
Заключение
Вы успешно настроили новый Next.js проект на вашем Ubuntu компьютере! Теперь вы можете начать разрабатывать ваше веб-приложение, добавляя новые страницы, компоненты и функции.
Next.js упрощает создание современных веб-приложений, и с помощью этого руководства вы узнали, как установить и настроить проект Next.js.