nextjs tailwind ionic capacitor starter
5.0.0
このレポは、next.js、tailwind CSS、イオンフレームワーク、およびコンデンサを備えたiOS、Android、およびプログレッシブWebアプリを構築するための概念的な出発点です。
next.jsはプロダクションReactアプリエクスペリエンスを処理し、Tailwindを使用してアプリの各ページをスタイリングできます。IonicFrameworkは、クロスプラットフォームシステムコントロール（ナビゲーション/トランジション/タブ/など）を提供し、コンデンサがすべてをバンドルし、IOS、Android、およびWebで完全なネイティブアクセスを備えたWebを実行します。
スタックの概要とすべての仕組みについては、このブログ投稿をご覧ください：https：//dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-framework-and-capacitor-3kij
このプロジェクトは標準的なNext.jsアプリであるため、典型的なNext.JS開発プロセスが適用されます（ブラウザベースの開発用のnpm run dev ）。ただし、1つの警告があります。アプリは、純粋にクライアント側に実行する必要があるため、iOSとAndroidに展開するためにエクスポートする必要があります。 （next.jsエクスポートの詳細）
アプリを構築するには、実行します。
npm run buildすべてのクライアントサイドファイルは./out/ out/ディレクトリに送信されます。これらのファイルは、ネイティブのiOSおよびAndroidプロジェクトにコピーする必要があります。これは、コンデンサが登場する場所です。
npm run sync最後に、次の実行コマンドを使用して、各プラットフォームでアプリを実行します。
npm run ios
npm run android開発中（ npm run devを実行するとき）Livereloadとインスタントリフレッシュを有効にするには、ローカルインターフェイス（例： 192.168.1.2 ）のIPアドレスを見つけ、次の.JSサーバーが実行されていることをポートし、 capacitor.config.jsonでサーバーURL構成値を設定するように設定します。
{
"server" : {
"url" : " http://192.168.1.2:3000 "
}
}注：最近ベータ版になったコンデンサ3では、この構成は簡単です。
APIルートを使用できますが、最小限の構成が必要です。詳細については、このディスカッションを参照してください。
このプロジェクトの1つの注意事項：アプリは純粋にクライアント側を実行し、next.jsのエクスポートコマンドを使用できる必要があるため、このコードベースでサーバー側のレンダリングはありません。 SSRと完全に静的なnext.jsアプリをタンデムにする方法はおそらくありますが、バベルプラグインが必要であるか、このプロジェクトの範囲外のコード共有を備えたより精巧なモノレポのセットアップが含まれます。
さらに、このアプリでは、キャッチオールルートを超えてネイティブアプリシェルをレンダリングしてイオン反応ルーターを誘導するために、次のアプリではあまり使用されていません。これは主に、Next.JSルーティングが、種類のイオン使用のようなネイティブスタイルの移行や歴史状態管理を可能にするために設定されていないためです。
コンデンサは、iOS、Android、デスクトップ、およびWebで標準のWebアプリを実行する一種の「モバイル用電子」と考えることができます。
コンデンサは、ネイティブAPIへのアクセスと、アプリが必要とするネイティブ機能を構築するためのプラグインシステムを提供します。
コンデンサアプリは、同じコードを備えたプログレッシブWebアプリとしてブラウザで実行することもできます。
