nextjs tailwind ionic capacitor starter

Next.js + Tailwind CSS + Ionic Framework + мобильный стартер конденсатор

Этот репо является концептуальной отправной точкой для создания iOS, Android и прогрессивного веб -приложения с Next.js, Tailwind CSS, Ionic Framework и конденсатора.

Next.js обрабатывает опыт работы с производственным приложением React, Tailwind может использоваться для стирации каждой страницы вашего приложения, Ionic Framework предоставляет контрольные системы кроссплатформенных систем (навигация/переходы/вкладки/и т. Д.), А затем конденсатор объединяет все это и запускает его на iOS, Android и Web с полным местным доступом.

Смотрите этот пост в блоге для обзора стека и того, как все это работает: https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionic-framework-and-capacitor-3kij

Использование

Этот проект является стандартным приложением Next.js, поэтому применяется типичный процесс разработки next.js ( npm run dev для разработки на основе браузера). Тем не менее, есть одно предостережение: приложение должно быть экспортировано в развертывание в iOS и Android, поскольку оно должно работать чисто клиентским. (Подробнее о следующем.js Export)

Чтобы построить приложение, запустите:

npm run build

Все файлы на стороне клиента будут отправлены в каталог ./out/ . Эти файлы должны быть скопированы в нативные проекты iOS и Android, и именно здесь появляется конденсатор:

npm run sync

Наконец, используйте следующие команды запуска для запуска приложения на каждой платформе:

npm run ios
npm run android

Livereload/Мгновенное обновление

Чтобы включить LiverelAnd и мгновенное обновление во время разработки (при запуске npm run dev ), найдите IP -адрес вашего локального интерфейса (пример: 192.168.1.2 ), и переносить ваш capacitor.config.json .

{
  "server" : {
    "url" : " http://192.168.1.2:3000 "
  }
}

Примечание. Эта конфигурация будет проще в конденсаторе 3, который недавно вошел в бета -версию.

API -маршруты

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

Предостережения

Одно предостережение с этим проектом: поскольку приложение должно быть в состоянии запускать чисто клиентскую сторону и использовать команду Export Next.js, это означает, что в этой базе кода нет рендеринга на стороне сервера. Скорее всего, есть способ для SSR и полностью статическое приложение Next.js в тандеме, но оно требует плагина Babel или будет включать более сложную настройку Monorepo с обменом кодом, который не имеет возможности для этого проекта.

Кроме того, Next.js Маршрутизация на самом деле не очень много используется в этом приложении за пределами общего маршрута, чтобы отобрать нативную оболочку приложения и задействовать маршрутизатора ионного реагирования. В первую очередь это связано с тем, что маршрутизация Next.js не настроена для обеспечения переходов в родном стиле и управления государством истории, таких как вида, ионное использование.

Что такое конденсатор?

Вы можете воспринимать конденсатор как своего рода «электрон для мобильных устройств», который запускает стандартные веб -приложения на iOS, Android, Desktop и Web.

Конденсатор обеспечивает доступ к нативным API и системе плагина для создания любых собственных функций, которые нуждаются в вашем приложении.

Приложения конденсаторов также могут работать в браузере в качестве прогрессивного веб -приложения с тем же кодом.