如何在Nx中将Next.js应用转换为PWA？

1. 定位Next.js应用的配置文件 #

在Nx仓库里，你的Next.js应用配置文件通常位于 apps/[你的应用名称]/next.config.js，如果不存在就新建一个。

2. 修改配置文件引入并配置next-pwa #

在配置文件中导入withPWA并包裹原有Next.js配置，同时添加PWA相关选项：

const withPWA = require('next-pwa')({
  dest: 'public', // 生成的Service Worker和PWA资源会输出到public目录
  register: true, // 自动注册Service Worker
  skipWaiting: true, // 跳过等待，直接激活新的Service Worker
  disable: process.env.NODE_ENV === 'development', // 开发环境禁用PWA，可选配置
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 保留你原有的Next.js配置，比如reactStrictMode、图像配置等
  reactStrictMode: true,
};

module.exports = withPWA(nextConfig);

3. 创建PWA Manifest文件 #

在应用的public目录下新建manifest.json，示例内容如下：

{
  "name": "你的应用全称",
  "short_name": "应用简称",
  "description": "应用功能描述",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196f3",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

记得在public/icons目录下准备对应尺寸的图标文件。

4. 将Manifest添加到HTML头部 #

• 如果你用的是Pages Router，修改pages/_document.js：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
          <meta name="theme-color" content="#2196f3" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

• 如果你用的是App Router，修改app/layout.js：

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <head>
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#2196f3" />
      </head>
      <body>{children}</body>
    </html>
  );
}

5. 测试PWA功能 #

运行生产构建命令：

nx build [你的应用名称]

启动生产环境服务器：

nx serve [你的应用名称] --prod

打开Chrome浏览器，通过DevTools的Application标签查看PWA状态，确认Service Worker已注册、Manifest被正常识别。

内容的提问来源于stack exchange，提问作者milad shirian