Registry / storage / next-tinacms-azure

next-tinacms-azure

library14.0.1jsnpmunverified

Microsoft Azure Blob Storage media store plugin for TinaCMS. This package (v14.0.1) integrates Azure Blob Storage as a media backend for TinaCMS in Next.js applications. It provides a custom media store (`TinaCloudAzureMediaStore`) and handlers for CRUD operations and media delivery. Requires peer dependencies `tinacms` (3.9.1) and `@tinacms/auth` (1.1.3). Designed for the Next.js App Router, it uses environment variables for Azure credentials and supports authorized access via TinaCloud authentication. Key differentiator: simplifies Azure Blob Storage integration with TinaCMS, handling URL rewrites and access control.

storage

npm install next-tinacms-azure

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NEXT-TINACMS-AZURE

next-tinacms-azure

storagejavascriptv14.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

TinaCloudAzureMediaStore

✓ import { TinaCloudAzureMediaStore } from 'next-tinacms-azure'

✗ import { TinaCloudAzureMediaStore } from 'next-tinacms-azure/dist/media-store'

Main media store class; exported from package root since v14.

createMediaHandlers

✓ import { createMediaHandlers } from 'next-tinacms-azure/dist/handlers'

✗ import { createMediaHandlers } from 'next-tinacms-azure'

Handler factory for CRUD API routes; located in dist/handlers.

createMediaDeliveryHandlers

✓ import { createMediaDeliveryHandlers } from 'next-tinacms-azure/dist/delivery-handlers'

✗ import { createMediaDeliveryHandlers } from 'next-tinacms-azure/dist/handlers'

Handler factory for media delivery; located in dist/delivery-handlers.

Shows environment variable setup, TinaCMS config with custom media store, API route for CRUD, delivery route with rewrite, and authorization in development.

// .env file AZURE_STORAGE_CONNECTION_STRING=<your-connection-string> AZURE_STORAGE_CONTAINER_NAME=<your-container-name> // tina/config.ts export default defineConfig({ media: { loadCustomStore: async () => { const pack = await import('next-tinacms-azure'); return pack.TinaCloudAzureMediaStore; }, }, }); // app/api/azure/[...media]/route.ts import { createMediaHandlers } from 'next-tinacms-azure/dist/handlers'; import { isAuthorized } from 'next-tinacms-azure/dist/auth'; const handlers = createMediaHandlers({ connectionString: process.env.AZURE_STORAGE_CONNECTION_STRING!, containerName: process.env.AZURE_STORAGE_CONTAINER_NAME!, authorized: async (req) => { if (process.env.NODE_ENV === 'development') return true; const user = await isAuthorized(req); return user?.verified || false; }, }); export const { GET, POST, DELETE } = handlers; // app/api/media/[...path]/route.ts import { createMediaDeliveryHandlers } from 'next-tinacms-azure/dist/delivery-handlers'; const handlers = createMediaDeliveryHandlers({ connectionString: process.env.AZURE_STORAGE_CONNECTION_STRING!, containerName: process.env.AZURE_STORAGE_CONTAINER_NAME!, authorized: async () => true, }); export const { GET } = handlers; // next.config.mjs const nextConfig = { async rewrites() { return [ { source: '/media/:path*', destination: '/api/media/:path*', }, ]; }, }; export default nextConfig;

Debug

Known issues

breakingImport paths changed with v14: handlers and delivery handlers moved from root to dist subpaths.

fix

Update imports: `createMediaHandlers` from `'next-tinacms-azure/dist/handlers'`, `createMediaDeliveryHandlers` from `'next-tinacms-azure/dist/delivery-handlers'`.

affects: <14.0.0

breakingPackage now requires Next.js App Router; Pages Router API routes are not supported.

fix

Migrate to App Router directory structure (e.g., `app/api/azure/[...media]/route.ts`).

affects: >=14.0.0

gotchaEnvironment variables `AZURE_STORAGE_CONNECTION_STRING` and `AZURE_STORAGE_CONTAINER_NAME` must be set; missing them causes runtime errors.

fix

Add these variables to your `.env` file. Do not hardcode credentials in code.

affects: >=1.0.0

gotchaThe media delivery route requires a URL rewrite in `next.config.mjs` to map `/media/...` to `/api/media/...`; missing rewrite results in 404 for media URLs.

fix

Add rewrite as shown in quickstart. Ensure both API routes are defined.

affects: >=14.0.0

gotchaThe `TinaCloudAzureMediaStore` is loaded async via `loadCustomStore`; importing it directly causes build errors because it uses browser-incompatible Node.js APIs.

fix

Always use the dynamic import pattern: `const pack = await import('next-tinacms-azure'); return pack.TinaCloudAzureMediaStore;`

affects: >=14.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'next-tinacms-azure/dist/handlers'

Using an older version (<14.0.0) where handlers were not in dist/ subpath, or import path typo.

fix

Ensure you're using v14+: `npm install next-tinacms-azure@latest`. Then import from `'next-tinacms-azure/dist/handlers'`.

The requested module 'next-tinacms-azure' does not provide an export named 'createMediaHandlers'

Trying to import `createMediaHandlers` from the package root instead of `dist/handlers`.

fix

Change import to `import { createMediaHandlers } from 'next-tinacms-azure/dist/handlers';`

Error: AZURE_STORAGE_CONNECTION_STRING is not defined

Missing environment variable or `.env` file not loaded.

fix

Set `AZURE_STORAGE_CONNECTION_STRING` in `.env.local` and ensure Next.js loads it (restart dev server).

Upgrade

Version history

14.0.1latest on npm

Audit

Dependencies

tinacmsrequiredCore TinaCMS library required for media store integration

@tinacms/authrequiredAuthentication support for TinaCloud users

Agent activity

17 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/tinacms/tinacms ↗

packagenext-tinacms-azure ↗

homepagehttps://github.com/tinacms/tinacms#readme ↗