Next.jsでPWA対応する際のサンプルプロジェクトを作りました！(next-offline使用)

どうもじゃけぇです。

最近はNext.jsを好んで使ってます。

ただ如何せん日本語情報がまだ少ないので苦労することもちらほら…

PWAへの対応も1日くらい時間を喰ったので、同じような人のためになればとテンプレートプロジェクトを作成しました！

ご自由にクローンして使ってください〜( ・∇・)

GitHubのアドレスはこちら

設定しているものとしては、
Next.js(React.js)
PWA(next-offline)
TypeScript
Prettier
ESLint

となっています。以下からどうぞ。

動作確認方法(ローカル)

リポジトリのREADMEにも書いていますが、動作確認の方法をこちらにも記載しておきます。

プロジェクトのクローン

適当なフォルダを作成し以下のコマンドでクローンします。

モジュールの展開

モジュールを展開します。(※yarnをインストールしていない人は先にyarnをインストールしてくださいネ)

ローカルでの実行

以下のコマンドを実行

この時点でローカルで画面が表示できるようになっていると思うので、以下にアクセスします。

http://localhost:3000

以下の画面が表示されたらOK

動作確認方法(デプロイ)

PWAの動作はデプロイしないと確認できないので、Nowを使用してデプロイしてみます。

NowはZEITが提供しているスーパー簡単にデプロイができてしまう魔法のような魔法です←

アカウントの登録

ZEITのアカウントを持っていない人は以下から登録します。

https://zeit.co/onboarding

Nowのインストール

Nowをインストールしていない人は、Nowもグローバルにインストールしてしまいましょう。

デプロイの実行

プロジェクトルートで以下のコマンドを実行すればデプロイが完了します。(まじかぁぁぁぁぁ)

ターミナルにデプロイ先のURLが表示され、親切なことにクリップボードにもコピーされているのでURLを貼り付けてアクセスして上記と同じ画面が表示されていればOKです！早い！！

PWA化の確認について

PWA化に成功していれば、アドレスバーにこんなんがでたりします。

また、Chromeであればメニュー配下にインストールメニューが表示されます。

まぁPWAについては色々情報はあるのでそちらを参考に。

さいごに

Next.jsでのPWA化に困っている人の少しでも参考にされば幸いです＿φ(￣ー￣ )

それでは！また！！