nextjs tailwind ionic capacitor starter

Next.js + Tailwind CSS + Ityic Framework + Capacitor Mobile Starter

Este repositório é um ponto de partida conceitual para a criação de um aplicativo iOS, Android e Progressive Web com Next.js, Tailwind CSS, Ionic Framework e Capacitor.

A seguir.

Veja esta postagem do blog para uma visão geral da pilha e como tudo funciona: https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-iionic-framework-and-capacitor-3kij

Uso

Este projeto é um aplicativo padrão npm run dev seguir. No entanto, há uma ressalva: o aplicativo deve ser exportado para implantar para iOS e Android, pois deve ser executado puramente do lado do cliente. (mais no próximo.js export)

Para construir o aplicativo, execute:

npm run build

Todos os arquivos do lado do cliente serão enviados para o diretório ./out/ . Esses arquivos precisam ser copiados para os projetos nativos do iOS e Android, e é aqui que o capacitor entra:

npm run sync

Por fim, use os seguintes comandos RUN para executar o aplicativo em cada plataforma:

npm run ios
npm run android

LiveLOAD/Atualização instantânea

Para ativar o LiveLOAD e a atualização instantânea durante o desenvolvimento (ao executar npm run dev ), encontre o endereço IP da interface local (Ex: 192.168.1.2 ) e port seu próximo.js servidor está em execução e, em seguida, defina o valor do URL do servidor para apontá -lo no capacitor.config.json :

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

NOTA: Esta configuração será mais fácil no capacitor 3, que recentemente entrou na versão beta.

Rotas de API

As rotas de API podem ser usadas, mas é necessária alguma configuração mínima. Veja esta discussão para obter mais informações.

Advertências

Uma ressalva com este projeto: como o aplicativo deve ser capaz de executar puramente o lado do cliente e usar o comando de exportação do Next.JS, isso significa que nenhuma renderização do lado do servidor nessa base de código. Provavelmente, existe uma maneira de SSR e um aplicativo totalmente estático no próximo.js em conjunto, mas requer um plug -in Babel ou envolverá uma configuração Monorepo mais elaborada com o compartilhamento de código que está fora de escopo para este projeto.

Além disso, o roteamento Next.js não é realmente usado muito neste aplicativo além de uma rota para renderizar o shell do aplicativo nativo e envolver o roteador de reação iônica. Isso ocorre principalmente porque o roteamento do próximo.js não está configurado para permitir transições de estilo nativo e gerenciamento de estado da história, como o tipo de uso iônico.

O que é capacitor?

Você pode pensar no Capacitor como uma espécie de "elétron para celular" que executa aplicativos da Web padrão em iOS, Android, desktop e Web.

O Capacitor fornece acesso a APIs nativas e um sistema de plug -in para criar qualquer funcionalidade nativa que seu aplicativo precisa.

Os aplicativos do capacitor também podem ser executados no navegador como um aplicativo da Web progressivo com o mesmo código.