Создание простой веб страницы на Next.js

2025-02-22

Доброго времени суток уважаемый читатель! В этой статье рассмотрим процесс создания простого web приложения на Next.js, который мы в дальнейшем будем использовать в качестве заготовки для собственного блога, который будет работать на Raspberry Pi. В своей статье я постараюсь максимально сжато и без лишней воды расписать процесс создания Next.js приложения.

Содержание

• Создание простой веб страницы на Next.js(в новой вкладке)
  • Содержание(в новой вкладке)
  • Установка компонентов(в новой вкладке)
  • Создание проекта(в новой вкладке)

Установка компонентов

Если у вас еще не установлены Node.js и npm, то сейчас самое время. Для их установки удобно использовать Chocolatey(в новой вкладке), поэтому давайте установим сначала его:

• Открываем PowerShell (или Windows Terminal): Win + X выбираем Windows PowerShell (Администратор) или Windows Terminal (Администратор).

• Копируем и вставляем следующую команду:

  Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

• После завершения установки перезапускаем PowerShell или вручную добавляем путь к Chocolatey в переменную среды PATH:

  $env:Path += ";$($env:ALLUSERSPROFILE)\chocolatey\bin"

• Проверяем установку Chocolatey:

  choco --version

• Если вы увидели номер версии, то поздравляю, можно продолжать установку Node.js.

  choco install nodejs

• Ждем окончания установки и проверяем версию Node.js:

  node -v
  npm -v

Создание проекта

Теперь все готово для создания проекта. Назовем его к примеру my_blog.

• Для создания проекта запускаем PowerShell или Windows Terminal в нужной директории и вводим следующую команду:

  npx create-next-app@latest my_blog

• Команда запускает мастер, который позволяет выбрать нужные параметры для создания проекта. По умолчанию он создаст проект в директории с именем my_blog.

• Теперь нам нужно опубликовать свой проект в GitHub для его дальнейшего развертывания на Vercel или на любом другом сервере. Создаем в GitHub новый публичный репозиторий с именем my_blog и связываем его с нашим локальным проектом. Мастер создания Next.js уже инициализирует локальный репозиторий и создает начальный коммит. Нам остается только связать его удаленным репозиторием и отправить на GitHub.

• Переходим в созданную директорию:

  cd my_blog

  git remote add origin https://github.com/username/my_blog.git
  git push -u origin master

• После публикации можем проверить что у нас получилось:

  npm run dev

• Команда запускает проект в режиме разработки на локальном порту 3000. Открываем браузер, переходим по адресу http://localhost:3000(в новой вкладке) и видим результат работы мастера создания приложений Next.js, который содержит страницу, на которой нам предлагается сразу же задеплоить его на Vercel. Жмем Deploy Now и выбираем какой репозиторий на GitHub использовать для развертывания.

Всё, наша веб страница готова и развернута на Vercel. В следующих статьях мы рассмотрим как развернуть ее на собственном сервере на базе Raspberry Pi. Good Luck!