如何让Next.js对SEO友好，同时支持PWA离线模式？

Question

我们有一个 Next.js 应用程序，支持用于 SEO 的 SSR。这意味着当您访问任何页面时，只会下载该特定页面所需的基本代码，从而最大限度地减少代码检索。但是，我们还需要 PWA 支持，包括安装和离线功能，以确保我们的应用程序可以在没有互联网连接的情况下运行。

我们面临的挑战是无法缓存整个应用程序。 next-pwa 插件仅缓存访问页面时下载的文件。

如何让Nextjs变得SEO友好，同时支持PWA离线模式？

Answer 1

您可以使用

next-pwa

套餐。该软件包允许您将 Next.js 应用程序转变为具有离线支持的渐进式 Web 应用程序 (PWA)。

您可以遵循的步骤：

安装 next-pwa 软件包：您可以通过在终端中运行
```
npm i next-pwa
```
或
```
yarn add next-pwa
```
来完成此操作。
创建 Web Manifest 文件：此文件包含有关您的应用程序的元数据。您可以在项目的 public 文件夹中创建一个
```
manifest.json
```
文件。该文件应包含有关您的应用程序的信息，包括其名称、描述和图标。
在 Next.js 配置中配置 next-pwa：在项目的根目录中，创建一个名为
```
next.config.js
```
的新文件（如果已存在，则对其进行编辑）。从
```
withPWA
```
包中导入
```
next-pwa
```
函数，并将模块导出包装在该函数中。
创建脱机后备页面：在页面文件夹中添加一个名为
```
_offline.js
```
的页面，并显示基本的“页面脱机”消息。如果用户离线，
```
next-pwa
```
包将自动显示此页面。