Как подключиться к S3 совместимому хранилищу в Next.js

Объектное хранилище S3-совместимого типа — это простой и надёжный способ сохранять фотографии, документы и другие файлы. В этой статье мы рассмотрим, как подключить Next.js-приложение к S3-хранилищу, используя официальный SDK для Node.js.

1. Подготовка S3-совместимого хранилища

Для работы с любым S3-хранилищем нам понадобятся:

• Endpoint — адрес сервера хранилища (например, lafacommunitystorage.object.pscloud.io).

• Bucket name — название бакета (например, uploads).

• Access key и Secret key — ключи доступа.

Эти данные выдаются при создании бакета в панели управления.

2. Установка зависимостей

В Next.js проекте установим официальный пакет:

npm install @aws-sdk/client-s3

3. Настройка клиента

Создадим файл lib/s3.js для подключения к S3:

import { S3Client } from "@aws-sdk/client-s3"

export const s3 = new S3Client({
  region: "us-east-1", // можно указать любое значение, если регион не используется
  endpoint: process.env.S3_ENDPOINT,
  credentials: {
    accessKeyId: process.env.S3_ACCESS_KEY,
    secretAccessKey: process.env.S3_SECRET_KEY
  },
  forcePathStyle: true, // важно для большинства S3-совместимых сервисов
})

Файл .env.local:

S3_ENDPOINT=https://lafacommunitystorage.object.pscloud.io
S3_ACCESS_KEY=ваш_access_key
S3_SECRET_KEY=ваш_secret_key
S3_BUCKET=uploads

4. Загрузка файлов

В Next.js удобно использовать API Routes. Создадим pages/api/upload.js:

import { PutObjectCommand } from "@aws-sdk/client-s3"
import { s3 } from "@/lib/s3"

export default async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).end()

  try {
    const { fileName, fileContent } = req.body

    const command = new PutObjectCommand({
      Bucket: process.env.S3_BUCKET,
      Key: fileName,
      Body: Buffer.from(fileContent, "base64")
    })

    await s3.send(command)

    res.status(200).json({ message: "Файл успешно загружен" })
  } catch (error) {
    console.error(error)
    res.status(500).json({ error: "Ошибка при загрузке файла" })
  }
}

Теперь можно отправлять POST-запросы с файлами в base64 и загружать их прямо в S3-хранилище.

5. Получение файлов

Чтобы получить доступ к файлу, можно просто собрать URL:

const fileUrl = `${process.env.S3_ENDPOINT}/${process.env.S3_BUCKET}/${fileName}`

Итог

Мы подключили Next.js к S3-хранилищу, настроили клиент и сделали API-роут для загрузки файлов. Такой подход подойдёт для любых S3-совместимых сервисов: Amazon S3, Yandex Object Storage, Selectel, PSCloud и других.