Ефективне завантаження файлів з Azure Blob Storage в Next.js 14 з використанням App Router

7 Березня 2024 в 16:42 43

Під час розробки веб-додатків, часто доводиться мати справу з різними технічними викликами, зокрема, з завантаженням файлів з віддалених сховищ даних, таких як Azure Blob Storage. У цій статті ми розглянемо, як ефективно вирішити проблему завантаження файлів з Azure Blob Storage за допомогою Next.js 14 та App Router.

Щоб реалізувати завантаження файлів з Azure Blob Storage, спочатку потрібно встановити зв’язок з Blob Service Client. Це можна зробити за допомогою пакету @azure/storage-blob, який надає доступ до функціоналу Azure Blob Storage. Далі, через цей клієнт, ми можемо отримати доступ до контейнера Blob та конкретного об’єкта Blob, який ми хочемо завантажити.

Наступним кроком є виклик методу download(), який поверне об’єкт відповіді з читабельним потоком даних Blob. Проте, при використанні TypeScript можуть виникнути деякі труднощі через строгу типізацію, зокрема, коли нам потрібно передати цей потік до конструктора класу Response для створення відповіді сервера.

Проблема полягає в тому, що TypeScript може скаргатися на неправильність типу даних при передачі читабельного потоку у конструктор Response, видаючи помилку про неможливість присвоєння типу ReadableStream параметру типу BodyInit. Це може виникати через те, що TypeScript намагається забезпечити безпеку типів даних під час компіляції, але в деяких випадках ця строга перевірка може стати перешкодою.

Щоб уникнути цієї проблеми, можна використовувати тип any для того, щоб TypeScript не проводив строгу перевірку типів даних. Це може бути не найбільш оптимальним рішенням з точки зору безпеки типів, але у певних випадках це є прийнятним компромісом для ефективної роботи з Azure Blob Storage в середовищі Next.js 14 з використанням App Router.

import { BlobServiceClient } from "@azure/storage-blob";
import { NextResponse } from "next/server";
export async function GET(req: Request) {
  try {
    const filename = (req as any).nextUrl.searchParams.get('fileName')
    const connString = process.env.STORAGE_ACCOUNT_CONNSTRING
    const instance = BlobServiceClient.fromConnectionString(connString);
    const containerClient = instance.getContainerClient(process.env.ZIP_CONTAINER);
    const blobClient = containerClient.getBlobClient(filename!);
    const blobDownloadResponse = await blobClient.download();
    const blobStream = blobDownloadResponse.readableStreamBody;
    return new Response(blobStream as any, {
      headers: {
        "content-disposition": `attachment; filename="${filename}"`,
        "Content-Type": "application/zip"
      }
    })
  } catch (error) {
    console.error('Error:', error);
    return NextResponse.json(
      { error: 'error occurred while downloading the file.' },
      {status:500}
    )
  }
};

import { BlobServiceClient } from "@azure/storage-blob";

import { NextResponse } from "next/server";

export async function GET(req: Request) {

try {

const filename = (req as any).nextUrl.searchParams.get('fileName')

const connString = process.env.STORAGE_ACCOUNT_CONNSTRING

const instance = BlobServiceClient.fromConnectionString(connString);

const containerClient = instance.getContainerClient(process.env.ZIP_CONTAINER);

const blobClient = containerClient.getBlobClient(filename!);

const blobDownloadResponse = await blobClient.download();

const blobStream = blobDownloadResponse.readableStreamBody;

return new Response(blobStream as any, {

headers: {

"content-disposition": `attachment; filename="${filename}"`,

"Content-Type": "application/zip"

}

})

} catch (error) {

console.error('Error:', error);

return NextResponse.json(

{ error: 'error occurred while downloading the file.' },

{status:500}

)

}

};

У цьому прикладі ми використовуємо тип any для змінної blobStream, щоб уникнути помилки типу даних від TypeScript.

Завершаючи, ефективне завантаження файлів з Azure Blob Storage в Next.js 14 з використанням App Router може бути досягнуте шляхом використання пакету @azure/storage-blob для отримання доступу до Blob Service Client та використання типу any для обходу строгої перевірки типів даних у TypeScript.