next-pwaとは？Next.jsにnext-pwaをインストールする流れ(Part1)
next-pwaとは？
next-pwaは、Next.jsアプリケーションにProgressive Web App (PWA)の機能を追加するためのプラグインです。
github.com
next-pwaを使用すると、Next.js アプリケーションをプログレッシブ ウェブ アプリ (PWA) として構築できます。
Next.jsとは？
Next.js は React ベースのフレームワークで、静的生成とサーバーサイド レンダリングの両方をサポートしています。
Next.js by Vercel - The React FrameworkNext.jsbyVercelisthefull-stackReactframeworkfortheweb.
PWA（ProgressiveWebApp）とは？
PWA（ProgressiveWebApp）は、ウェブページまたはウェブサイトを、オフラインの利用を可能にしたり、ホーム画面にショートカットを追加したり、プッシュ通知を送信したりするなど、ネイティブアプリのように動作させるためのものです。
プッシュ通知、オフライン アクセス、ホーム 画面のピン留めなどの機能を備えています。
Vercelにnext-pwaをインストールしてNext.jsアプリケーションをPWAにする
Vercelにnext-pwaをインストールしてNext.jsアプリケーションをPWAにする手順は以下の通りです。
まずはプロジェクトのルートで以下のコマンドを実行して、next-pwaパッケージをプロジェクトに追加します。
npm install next-pwa
または、yarnを使用している場合は：
yarn add next-pwa
次に、プロジェクトのルートにnext.config.jsファイルを作成します。すでに存在する場合は、そのファイルを編集します。
以下のコードをnext.config.jsに追加します。
いいなと思ったら応援しよう！
