JSTAcademy
0 XP
Dashboard
Crash Courses
Payload CMS Introduction
10 min
Basic+150 XP
Crash Courses · Basic

Payload CMS Introduction

Set up Payload CMS in a Next.js 15 project with TypeScript.
10 min read+150 XP on completionCert: Payload CMS Crash Course
Tap any word in the text below to start reading from there.

Payload CMS Introduction

Payload is a TypeScript-native headless CMS that runs inside your Next.js project. It auto-generates the admin UI, REST API, GraphQL API, and TypeScript types from your collection definitions.

Install

# New project with Payload template
npx create-payload-app@latest

# Or add to existing Next.js project
npx @payloadcms/next/create my-project

payload.config.ts

import { buildConfig } from 'payload'
import { postgresAdapter } from '@payloadcms/db-postgres'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import { Posts } from './collections/Posts'
import { Users } from './collections/Users'

export default buildConfig({
  secret: process.env.PAYLOAD_SECRET!,

  db: postgresAdapter({
    pool: { connectionString: process.env.DATABASE_URL! },
  }),

  editor: lexicalEditor({}),

  collections: [Posts, Users],

  admin: {
    user: 'users',  // which collection is the admin user
  },

  cors: [process.env.NEXT_PUBLIC_APP_URL!],
})

File Structure

app/
  (payload)/          ← Payload admin route group
    admin/
      [[...segments]]/
        page.tsx      ← Admin panel pages
    api/
      [...slug]/
        route.ts      ← Payload REST API
  (frontend)/         ← Your frontend routes
    page.tsx
payload.config.ts
collections/
  Posts.ts
  Users.ts

Access Admin Panel

Visit http://localhost:3000/admin — first visit prompts to create an admin user.

0%