nextjs-cms

videoField

Upload a video file. Validated by type and size, stored as-is.

import { videoField } from 'nextjs-cms/core/fields'

Basic usage

videoField({ name: 'clip' })

Accepts an MP4 up to 2 MB. Raise the limit for real videos (see below).

With every option

videoField({
    name: 'promo_video',
    label: { en: 'Promo video', ar: 'فيديو ترويجي' },
    required: false,
    order: 6,
    localized: true,
    conditionalRules: [{ field: mediaType, condition: 'equals', value: 'video' }],

    fileType: ['mp4', 'webm'],
    maxFileSize: { size: 200, unit: 'mb' },
})

Options

OptionTypeDefaultDescription
fileType('mp4' | 'webm' | 'ogg')[]['mp4']Accepted formats.
maxFileSize{ size: number; unit: 'kb' | 'mb' }{ size: 2, unit: 'mb' }Largest accepted upload.

Plus the common options.

Options in detail

maxFileSize and upload limits

The default 2 MB is only enough for very short clips. Set a realistic limit:

videoField({ name: 'video', maxFileSize: { size: 150, unit: 'mb' } })
Warning:

Your hosting also limits request bodies (reverse proxies like nginx default to 1 MB with client_max_body_size, and serverless platforms have their own caps). Raise those too, or large uploads fail before reaching the CMS. For very large videos, host them on a video platform and store the URL in a textField or embed them in a richTextField with allowMedia.

fileType

The file's real type is detected from its content (magic bytes), not its extension. Videos are stored unchanged, with no transcoding, so choose formats your website's <video> player supports. MP4 (H.264) works everywhere.

Displaying on your website

<video controls preload='metadata' className='w-full'>
    <source src={`${MEDIA}/.videos/products/${product.promoVideo}`} type='video/mp4' />
</video>

Stored names have no extension, so set the type attribute (or the server's Content-Type) yourself.

Storage

ColumnVARCHAR(50)
ValueGenerated file name (21 hex characters, no extension)
File<uploads>/.videos/<section>/<name>