《R2 R Us：在Next.js 13 app/目录中搞定你的静态资产》

前端

2022-12-14 05:30:04

利用 Cloudflare R2 和 Next.js 13 实现无缝且高速的静态资产存储

将 Cloudflare R2 与 Next.js 13 集成的好处

将 Cloudflare R2 对象存储与 Next.js 13 的 app/ 目录结合使用，可以为你的应用带来多项优势：

无与伦比的性能： Cloudflare R2 以其超快的存储和内容交付网络 (CDN) 而闻名，确保你的静态资产以闪电般的速度加载。
极其实惠的价格： 与其他对象存储服务相比，Cloudflare R2 的价格极具竞争力，让你可以节省资金，同时获得卓越的性能。
无缝集成： Cloudflare R2 与 Next.js 13 的无缝集成，让你可以轻松地存储和管理静态资产，无需任何复杂的设置。

如何集成 Cloudflare R2 和 Next.js 13

要将 Cloudflare R2 与 Next.js 13 集成，只需按照以下步骤操作：

1. 创建 Cloudflare R2 存储桶

登录你的 Cloudflare 账户，选择 "Storage"，然后点击 "Create Bucket" 创建一个新的 R2 存储桶。

2. 上传静态资产

使用 Cloudflare Dashboard 或 Cloudflare CLI 将你的静态资产上传到刚创建的 R2 存储桶中。

3. 配置 Next.js 13

在你的 Next.js 13 项目中，创建一个新的文件夹名为 "public" 并将其放在 app/ 目录下。将你的静态资产复制到这个文件夹中。

在 next.config.js 文件中，添加以下代码：

module.exports = {
  assetPrefix: `https://your-r2-bucket-name.r2.cloudflare.com/`,
};

4. 部署你的应用

现在，你可以像往常一样部署你的 Next.js 应用程序。部署完成后，你的静态资产将存储在 Cloudflare R2 上，并通过 CDN 快速访问。

代码示例

以下是完整的代码示例：

# 在 app/ 目录下创建 "public" 文件夹

mkdir app/public

# 将静态资产复制到 "public" 文件夹

cp -r ./static/public app/public

# 在 next.config.js 中配置 R2 存储桶

// next.config.js
module.exports = {
  assetPrefix: `https://your-r2-bucket-name.r2.cloudflare.com/`,
};

# 部署你的应用

npm run build
npm run start

常见问题解答