JSTAcademy
0 XP
Dashboard
Crash Courses
Globals, Plugins & Deployment
10 min
PhD+200 XP
Crash Courses · PhD

Globals, Plugins & Deployment

Use globals for site settings, extend with plugins, and deploy Payload to Vercel.
10 min read+200 XP on completionCert: Payload CMS Crash Course
Tap any word in the text below to start reading from there.

Globals, Plugins & Deployment

Globals handle singleton content. Plugins extend Payload. Deployment to Vercel requires a serverless Postgres provider.

Global — Site Settings

// globals/SiteSettings.ts
import type { GlobalConfig } from 'payload'

export const SiteSettings: GlobalConfig = {
  slug: 'site-settings',
  fields: [
    { name: 'siteName', type: 'text', required: true },
    { name: 'tagline', type: 'text' },
    { name: 'logo', type: 'upload', relationTo: 'media' },
    {
      name: 'socialLinks',
      type: 'array',
      fields: [
        { name: 'platform', type: 'select', options: ['twitter', 'instagram', 'linkedin'] },
        { name: 'url', type: 'text' },
      ],
    },
    { name: 'mainNav', type: 'array', fields: [
      { name: 'label', type: 'text' },
      { name: 'url', type: 'text' },
    ]},
  ],
}

// Use in server component
const payload = await getPayloadClient()
const settings = await payload.findGlobal({ slug: 'site-settings' })

Official Plugins

import { seoPlugin } from '@payloadcms/plugin-seo'
import { searchPlugin } from '@payloadcms/plugin-search'
import { formBuilderPlugin } from '@payloadcms/plugin-form-builder'

buildConfig({
  plugins: [
    seoPlugin({
      collections: ['posts', 'pages'],
      generateTitle: ({ doc }) => `${doc.title} | JST Academy`,
      generateDescription: ({ doc }) => doc.excerpt,
    }),
    searchPlugin({
      collections: ['posts', 'pages'],
    }),
  ],
})

Deploy to Vercel

# Required env vars
DATABASE_URL=postgresql://...  # Neon / Supabase / Railway
PAYLOAD_SECRET=your-32-char-random-string
NEXT_PUBLIC_APP_URL=https://yourapp.vercel.app

# Regenerate types before deploy
npx payload generate:types

# Deploy
vercel --prod

Generate Types

# After every config change
npx payload generate:types

# Add to package.json
"scripts": {
  "payload:generate-types": "payload generate:types",
  "build": "payload generate:types && next build"
}
0%