strapi starter next corporate

⛔ Установилось

Этот репозиторий больше не поддерживается и работает только для Strapi V3. Вы можете найти последнюю версию Strapi V4 этого стартера на стартере и шаблонах Monorepo.

---

Strapi Starter Next Corporate Site

Следующий стартер для создания корпоративного сайта с Strapi.

Посмотреть демо -версию • Прочитайте сообщение в блоге

Этот стартер предназначен для гибкости. Используя его, вы сможете полностью управлять контентом вашего веб -сайта в Strapi и автоматически получить следующее приложение. Маркетинговые команды смогут создавать страницы и разработать свой макет без помощи разработчиков.

Этот стартер функционирует:

• Создание страниц в Strapi, код не требуется
• Полностью гибкая структура страницы: разработать страницы, которые вы хотите, с помощью разделов пользовательского интерфейса
• 8 разделов пользовательского интерфейса из коробки: Герой, Ричтекст, Большой Веса, отзывы, ценообразование, подножия, фиксации, фантастики
• Легко тему с Tailwind
• Статическое поколение сайта со следующим
• Интегрированный режим предварительного просмотра для просмотра ваших страниц на частном URL -адресе перед их публикацией
• Контент на нескольких языках с использованием i18n

Этот стартер использует корпоративный шаблон Strapi

Проверьте все наши стартеры здесь

Начиная

Используйте наш create-strapi-starter CLI, чтобы создать свой проект.

npx create-strapi-starter@3 my-site next-corporate

CLI создаст монорепо, установит зависимости и автоматически запускает ваш проект.

Следующий Frontend Server будет работать здесь => http: // localhost: 3000

Бэкэнд -сервер Strapi будет работать здесь => http: // localhost: 1337

Режим предварительного просмотра

Вы можете включить режим предварительного просмотра с помощью URL -адреса:

http://localhost:3000/api/preview?secret=<preview-secret>&slug=<slug>

<preview-secret> -это секретный токен, определенный в вашей конфигурации .env, <slug> -это слизняк, который вы ввели в Strapi для вашей страницы.

В то время как режим предварительного просмотра включен, вы можете получить доступ к draft страницам так же, как вы published страницы.

Например, http: // localhost: 3000/секрет будет доступен в режиме предварительного просмотра.

Баннер останется под навигацией, чтобы сообщить вам режим предварительного просмотра, и он также позволит вам выключить его.

Настройте свой корпоративный сайт

Чтобы редактировать этот сайт, вам нужно будет запустить как Frontend, так и бэкэнд в вашей среде разработки.

Добавление разделов

Мы создали для вас разделы, но вы, вероятно, захотите добавить больше, чтобы соответствовать вашим потребностям. Следуйте этим шагам:

• Создать новый компонент в Strapi в категории «Разделы»
• В Строительнице контента-типа откройте коллекцию страниц и проверьте свой новый раздел в поле contentSections .
• Создать компонент React, который принимает data в /frontend/components/sections
• Чтобы связать свой раздел Strapi с этим компонентом React, Open /frontend/components/sections.js и добавьте запись в объект sectionComponents .

Пользовательская тема

Мы используем Tailwind CSS для стиля. Чтобы изменить внешний вид своей страницы, вы можете отредактировать тему в /front/tailwind.config.js . Прочитайте документы с ветром, чтобы просмотреть все изменения, которые вы можете внести. Например, вы можете изменить основной цвет, как это:

 const { colors } = require ( `tailwindcss/defaultTheme` )

module . exports = {
  theme : {
    extend : {
      colors : {
        primary : colors . green ,
      } ,
    } ,
  } ,
} 

Развертывание до производства

Вам нужно будет развернуть проекты frontend и backend отдельно. Вот документы, чтобы развернуть каждый:

• Развернуть Strapi
• Развернуть Next.js

Не забудьте настроить переменные среды на своих производственных приложениях.

Вот необходимые для фронта:

• NEXT_PUBLIC_STRAPI_API_URL : URL вашего бэкэнда Strapi, не следите
• PREVIEW_SECRET : случайная строка, используемая для защиты ваших страниц предварительного просмотра

И для бэкэнда:

• FRONTEND_URL : URL вашего фронта, без сцепления
• FRONTEND_PREVIEW_SECRET : токен режима предварительного просмотра next.js, определенного на фронте

Получайте удовольствие, используя этот стартер!