Հայոց English

Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll
  1. Главная
  2. JsonDrop API Документация
  3. Установка JsonDrop API

Пример запуска интерфейса Next.js

20/04/2025, by Ivan

JsonDrop API Documentation

В папке /frontend-examples/articles-with-tags-filter вы найдёте приложение на Next.js, использующее JsonDrop API.

Обзор

Это приложение на Next.js демонстрирует интеграцию с JsonDrop API для управления статьями с тегами и функцией фильтрации.

Next.js app1
Главная страница приложения Next.js
next.js articles
Страница со списком статей в приложении Next.js.
Contact Us form
Форма обратной связи в приложении Next.js.

Предварительные требования

  • Node.js (v18 или выше)
  • npm или pnpm менеджер пакетов
  • Доступ к экземпляру JsonDrop API

Установка

  1. Клонируйте репозиторий
  2. Установите зависимости: 
    npm install
# или
pnpm install
  3. Настройте переменные окружения:
    • Создайте файл .env в корне проекта
    • Установите следующую переменную: 
      NEXT_PUBLIC_DRUPAL_BASE_URL="http://your-jsonapi-instance"

Запуск приложения

Для запуска сервера разработки выполните:

npm run dev
# или
pnpm dev

Приложение будет доступно по адресу http://localhost:3000

npm run dev
Запуск приложения на Next.js

Доступные маршруты

  • / — Главная страница со списком статей и фильтрацией по тегам
  • /articles — Страница со списком статей
  • /form — Страница формы для создания/редактирования статей

Конфигурация

Переменные окружения

  • NEXT_PUBLIC_DRUPAL_BASE_URL — Базовый URL вашего экземпляра JsonDrop API

Зависимости

Приложение использует следующие ключевые зависимости:

  • Next.js 15.1.0
  • React 19
  • Axios для работы с API
  • TailwindCSS для стилизации
  • Компоненты Radix UI
  • React Hook Form для работы с формами

Распространённые ошибки

Конфигурация API

Убедитесь, что переменная окружения NEXT_PUBLIC_DRUPAL_BASE_URL правильно указывает на ваш экземпляр JsonDrop API. Неправильная конфигурация приведёт к ошибкам при запросах к API.

Проблемы с CORS

Если вы сталкиваетесь с ошибками CORS, убедитесь, что ваш экземпляр JsonDrop API настроен на приём запросов с домена разработки (localhost:3000).

Переменные окружения

Помните, что переменные окружения с префиксом NEXT_PUBLIC_ доступны в браузере. Не размещайте в них конфиденциальную информацию.

Сборка для продакшна

Чтобы создать сборку для продакшна:

npm run build
# или
pnpm build

Чтобы запустить продакшн-сервер:

npm run start
# или
pnpm start

Поддержка

Если у вас возникли вопросы или проблемы, ознакомьтесь с документацией проекта или создайте issue в репозитории.