INTEGRITY Документация

← Cloudflare Pages / pages / framework-guides / nextjs

Статический сайт

Next.js ↗ это фреймворк для React с открытым исходным кодом для создания сайтов и приложений. В этом руководстве вы создадите статическое приложение на Next.js и развернёте его с помощью Cloudflare Pages.

Это руководство расскажет, как развернуть статический проект Next.js с помощью статический экспорт ↗.

Прежде чем продолжить

Все руководства по фреймворкам предполагают, что у вас уже есть базовое понимание Git ↗. Если вы новичок в Git, обратитесь к этому краткое руководство по Git ↗ о том, как настроить Git на локальном компьютере.

Если вы клонируете по SSH, необходимо сгенерировать ключи SSH ↗ на каждом компьютере, с которого вы отправляете или получаете данные из GitHub.

См. документация GitHub ↗ и Документация Git ↗, где это описано подробнее.

Выберите проект Next.js

Если у вас уже есть проект Next.js, который вы хотите развернуть, убедитесь, что он настроен для статического экспорта ↗, перейдите в эту директорию и переходите к следующему шагу. В противном случае используйте create-next-app чтобы создать новый проект Next.js.

npx create-next-app --example with-static-export my-app

После создания проекта сгенерируется новый my-app директория будет создана с использованием официального with-static-export ↗ пример в качестве шаблона. Перейдите в этот каталог, чтобы продолжить.

cd my-app

Создайте репозиторий GitHub

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория подготовьте локальное приложение и отправьте его в GitHub, выполнив в терминале следующие команды:

git remote add origin https://github.com/<GH_USERNAME>/<REPOSITORY_NAME>.git
git branch -M main
git push -u origin main

Разверните ваше приложение на Cloudflare Pages

Чтобы развернуть сайт в Pages:

  1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

    Перейдите в Workers & Pages ↗

  2. Выберите Создать приложение.

  3. Выберите Pages на вкладке.

  4. Выберите Импорт существующего репозитория Git.

  5. Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.

  6. В Настройки сборки разделе выберите Next.js (статический экспорт HTML) как ваш Framework preset. Ваш выбор предоставит следующую информацию:

Параметр конфигурацииЗначение
Продакшен-веткаmain
Команда сборкиnpx next build
Директория сборкиout

После настройки сайта вы можете запустить первый деплой. Cloudflare Pages установит next, зависимости вашего проекта и соберет сайт перед его развертыванием.

Просмотр сайта

После деплоя сайта вы получите уникальный поддомен для своего проекта на *.pages.dev.

Каждый раз, когда вы фиксируете новый код в своём сайте на Next.js, Cloudflare Pages автоматически пересоберёт и развернёт ваш проект. Вы также получите доступ к развёртывания предпросмотра для новых pull request, чтобы вы могли увидеть, как изменения выглядят на сайте, прежде чем разворачивать их в продакшен.

Полное руководство по развёртыванию первого сайта на Cloudflare Pages см. в Руководство по началу работы.