採用トップ

テンファイブロゴ
テックブログ

Next.jsで始めるPWA開発入門

はじめに

モダンWeb開発の世界で、「PWA（Progressive Web Apps）」という言葉を耳にすることが増えてきました。PWAは、ネイティブアプリのような操作性とWebアプリの手軽さを融合した技術で、ユーザー体験を大きく向上させる手段として注目されています。

本記事では、Reactベースのフレームワークである Next.js を使って、初心者でも簡単にPWA対応のアプリを作成する方法 を解説します。環境構築から基本設定、デプロイまで、ステップバイステップで丁寧に紹介しますので、これからWebアプリを作る方やPWAに興味がある方はぜひ最後までご覧ください。

PWAとは何か？なぜ必要なのか？

PWAの基本概念と従来のWebアプリとの違い

PWA（Progressive Web Apps）とは、Web技術で構築された、ネイティブアプリのようなユーザー体験を提供するWebアプリのことです。

従来のWebアプリとの違いは以下の点にあります：

特徴従来のWebアプリPWA
オフライン動作❌ 非対応✅ 対応（キャッシュ制御）
ホーム画面追加❌ 手動ブックマークのみ✅ スマホ画面にアイコン追加可
プッシュ通知❌ 基本非対応✅ 対応（Service Worker使用）
ネイティブ感❌ ブラウザUIあり✅ 全画面表示・独自UI可能
パフォーマンス⚠️ 通信依存✅ キャッシュにより高速表示

つまり、**PWAはWebとネイティブアプリの“いいとこ取り”**を目指した仕組みです。

PWAの主な構成要素

  • Service Worker：JavaScriptで動作するバックグラウンドプロセス。リクエストのキャッシュやオフライン対応、プッシュ通知などを制御します。
  • Web App Manifest：アプリ名、アイコン、表示モードなどを定義するJSONファイル。インストールの際に参照されます。
  • HTTPS：セキュリティ確保のため、PWAにはSSL化された通信環境が必須です。

なぜPWAが必要なのか？

  • ユーザーがアプリストアを経由せず、すぐにWebで使える
  • 通信環境が不安定でも安定したUXを提供
  • インストールせずに利用できるため、導入のハードルが低い
  • 検索エンジンにもインデックスされるので、SEOにも有利

Next.jsでPWAを作るメリット

Reactを直接使ってPWAを作ることも可能ですが、Next.jsを使うことで実装がよりシンプルかつ効率的になります。

1. PWAプラグインで簡単に構築できる

Next.jsには公式・非公式を含めた多くのプラグインが存在し、next-pwa を使えば数行の設定でPWA化が可能です。Service Workerの生成、manifestの組み込みなど、手作業では面倒な工程を自動化できます。

2. SSRやSSGとPWAの相性が良い

Next.jsは**サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）**をサポートしており、PWAと組み合わせることで以下の効果が期待できます：

  • SEO強化：Googleに正しくインデックスされやすい
  • 初期読み込み速度の高速化：ユーザーの離脱率を低下
  • オフライン対応の最適化：事前生成されたHTMLとキャッシュが連携

3. Vercelとの統合で簡単デプロイ

Next.jsの公式ホスティングサービスである Vercel を使えば、HTTPS対応済みの環境にワンクリックでPWAを公開できます。PWAに必須なSSLやキャッシュの最適化、CDN配信がすべて自動で適用されます。

Next.jsでPWAを作る準備

Next.jsとは？

Next.jsは、Reactベースのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）、APIルーティングなど多くの機能がビルトインされています。SEOやパフォーマンスの面で非常に優れており、PWAとの親和性も高いです。

必要なツールと環境

まず、Next.jsでPWAを構築するには以下の開発環境を整えておきましょう。

  • Node.js（バージョン18以上推奨）
    Next.jsはNode.jsベースで動作するため、事前にインストールが必要です。
  • npm または yarn
    パッケージ管理ツール。どちらか一方が使えればOKです。
  • コードエディタ（Visual Studio Code 推奨）
    JSXやJavaScriptの補完、拡張機能が豊富なVS Codeがおすすめです。

Step 1: プロジェクトの作成

npx create-next-app@latest my-pwa-app
cd my-pwa-app

このコマンドは、Next.jsの最新バージョンでアプリの雛形を生成します。
create-next-appは、ReactとNext.jsの基本構造を含んだスターターキットで、初心者でもすぐに開発を開始できるように最適化されています。

  • npxは一時的にパッケージを実行するためのツールで、インストール不要
  • my-pwa-appはプロジェクトのディレクトリ名（任意でOK）

my-pwa-appはプロジェクトのディレクトリ名（任意でOK）

npxは一時的にパッケージを実行するためのツールで、インストール不要

Step 2: PWA対応のためのパッケージ導入

Next.jsでPWAを簡単に実装するために、next-pwa というプラグインを使います。

npm install next-pwa

Next.js単体ではService Workerやmanifestの自動生成機能がありません。
そのため、next-pwaというパッケージを使って、PWAに必要な構成要素（Service Worker・キャッシュ戦略など）を簡単に追加できるようにします。

  • next-pwaはNext.js公式ではありませんが、広く使われている安定したライブラリです
  • Service Workerのビルド・登録・キャッシュ戦略が自動化されます

Step 3: next.config.js の設定

next.config.jsを以下のように編集します：

// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
})

module.exports = withPWA({
  reactStrictMode: true,
})

この設定は、Next.jsに対して「PWAとして動作するための設定」を追加しています。

  • dest: 'public'
    ビルドされたService Workerファイルの出力先を指定。PWAではpublicが推奨です。
  • register: true
    ブラウザ上でService Workerを自動登録します。
  • skipWaiting: true
    新しいService Workerがすぐにアクティブになるようにします。

この設定により、PWAの要となるService Workerの自動生成と登録が可能になります。

Step 4: manifest.json の作成

public ディレクトリに manifest.json を作成します。

// public/manifest.json
{
  "name": "My PWA App",
  "short_name": "PWAApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

manifest.jsonは、Webアプリをネイティブアプリのように振る舞わせるための設定ファイルです。
スマートフォンのホーム画面に追加された際のアプリアイコンや表示名、起動方法などを定義します。

  • name：アプリの正式名称
  • short_name：ホーム画面で表示される短い名前
  • start_url：起動時に表示されるURL
  • display：standaloneでネイティブアプリ風に
  • theme_color / background_color：ブラウザのUIカラー指定
  • icons：各サイズのアイコン（192x192, 512x512）は必要

合わせて、アイコン画像（例：icon-192x192.pngとicon-512x512.png）を public/icons ディレクトリに配置してください。

Step 5: _document.js で manifest を読み込む

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="ja">
      <Head>
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#317EFB" />
        <link rel="icon" href="/icons/icon-192x192.png" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

HTMLドキュメントの<head>タグ内に、PWAに必要なリンクやメタ情報を埋め込む必要があります。

  • <link rel="manifest">：manifest.jsonの読み込み
  • <meta name="theme-color">：ブラウザのアドレスバーの色設定
  • <link rel="icon">：ブラウザタブやホーム画面アイコンに使用される画像

これにより、PWAが正しく認識され、ユーザーのデバイスにインストール可能になります。

Step 6: ビルドして動作確認

npm run build
npm run start

何を確認するのか？

  • npm run build：Next.jsアプリを本番用にビルド
  • npm run start：ローカルサーバーでビルド済みアプリを起動

この状態で、ChromeのDevTools（F12） → [Application] タブ を開き、

  • 「Manifest」が読み込まれているか
  • 「Service Worker」が登録されているか
    を確認しましょう。

Step 7: デプロイとHTTPS対応

PWAにはHTTPS環境が必須です。無料でHTTPS対応が可能な Vercel を使ってデプロイしましょう。

なぜHTTPSが必須なのか？

Service Workerの仕様上、HTTPS環境でしか動作しないため、PWAを機能させるにはSSL化が必須です。

推奨：Vercelで簡単デプロイ

Next.jsの開発元が提供するVercelなら、

  • GitHubと連携 → デプロイは自動
  • SSL（HTTPS）対応済み
  • キャッシュ・CDN最適化済み

という特長があり、PWA公開に最適です。

まとめ

PWAは、これからのWebアプリ開発において非常に重要な技術です。特に、Next.jsのようなフレームワークを使えば、複雑な設定を最小限に抑えてPWAを実装できます。

本記事では、初心者の方でも実装できるよう、基本概念から実装手順までを丁寧に解説しました。これを機に、あなたも自分のWebアプリにPWA機能を取り入れてみてはいかがでしょうか？

参考サイト・引用元リンク

採用情報 長谷川 横バージョン
SHARE

blog 関連記事

すべて見る
PHP Code Snippets Powered By : XYZScripts.com