見出し画像

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.

nextjs.org

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に追加します。

続きはこちら
https://eguweb.jp/vercel/67188/

サポートお願い致します!