如何将Next.js 13 Web应用转为PWA？_document.js存放位置存疑

Next.js 13分两种路由模式，对应不同的处理方式：

• Pages Router 项目（保留pages文件夹）
  直接把_document.js放在pages/根目录下即可，和index.js同级，用法和Next.js 12及之前版本一致。

• App Router 项目（仅app文件夹）
  App Router已经不再使用_document.js，它的功能被app/layout.js替代。如果需要添加PWA相关的HTML配置（比如manifest链接、主题色meta等），直接在根布局文件里修改：

  import './globals.css'
  
  export default function RootLayout({ children }) {
    return (
      <html lang="zh-CN">
        <head>
          <link rel="manifest" href="/manifest.json" />
          <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
          <meta name="theme-color" content="#your-theme-color" />
        </head>
        <body>{children}</body>
      </html>
    )
  }
  

另外你的next.config.js配置是没问题的，开发模式禁用PWA能避免调试时的缓存干扰，生产环境会自动启用。

内容的提问来源于stack exchange，提问作者John Doe