目標
- Next.jsでPWA（Progressive Web App）の基本を理解する。
-
next-pwaを使ってPWA機能を追加する。 - ブログをオフライン対応のアプリに変える。
1. PWAとは？なぜNext.jsで作る？
PWAはウェブアプリをネイティブアプリのように使える技術で、オフライン対応やプッシュ通知が特徴です。Next.jsは簡単にPWA化できるツールがあり、迅速な開発が可能です。この記事では、既存のブログをPWAにしてみます。
2. 必要なライブラリのインストール
PWAを実現するためにnext-pwaを導入します。
手順：
ターミナルで以下を実行：
npm install next-pwa
3. PWAの設定
プロジェクトにPWA機能を追加します。
next.config.jsの編集：
const withPWA = require('next-pwa')({
dest: 'public',
disable: process.env.NODE_ENV === 'development', // 開発中は無効化
});
module.exports = withPWA({
// 既存の設定があればここに追加
});
マニフェストファイルの作成：
public/manifest.jsonを作成：
{
"name": "Next.js 2025ブログ",
"short_name": "Nextブログ",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1e40af",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
アイコンの準備：
-
public/にicon-192x192.pngとicon-512x512.pngを配置（任意の画像をリサイズして使用）。
app/layout.tsxの編集：
import '../globals.css';
import Link from 'next/link';
export const metadata = {
title: 'Next.js 2025ブログ',
description: '2025年の最新技術で作られたブログサイト',
};
export default function RootLayout({ children }) {
return (
<html lang="ja">
<head>
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#1e40af" />
</head>
<body className="font-sans antialiased">
<header className="bg-blue-800 text-white p-4">
<nav className="max-w-4xl mx-auto flex justify-between items-center">
<Link href="/" className="text-xl font-bold">ホーム</Link>
<div className="space-x-4">
<Link href="/about" className="hover:underline">About</Link>
<Link href="/add-post" className="hover:underline">投稿追加</Link>
</div>
</nav>
</header>
<main>{children}</main>
<footer className="bg-gray-200 p-4 text-center text-gray-600">
© 2025 Next.js学習シリーズ
</footer>
</body>
</html>
);
}
4. オフライン対応の確認
Service Workerが動作し、オフラインでもページが表示されるようにします。
手順：
-
npm run build && npm run startで本番環境をシミュレート。 - ブラウザで
http://localhost:3000にアクセス。 - Chrome DevToolsの「Application」タブでService Workerが登録されているか確認。
- ネットワークを「Offline」に切り替え、リロードして動作を確認。
実践：PWAブログ
- オフライン対応：ネットワークがなくてもページが表示。
- インストール可能：ブラウザから「インストール」オプションが表示。
確認：
- Lighthouseの「Progressive Web App」スコアを確認（90以上を目指す）。
- スマートフォンで「ホーム画面に追加」を試す。
まとめ
-
next-pwaで簡単にPWA化を実現しました。 - ブログがオフラインでも使えるアプリになりました。
この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！あなたのNext.jsプロジェクトでもPWAを試してみてください！