Teknisk utforskning: Bygga en bloggplattform med Payload CMS

Payload CMSNext.jsTypeScriptContent Management

Av Kenny TranPublicerades den 4/5/2025Uppdaterades senast den 4/5/2025

Inledning

På Ketryon är vi passionerade för verktyg som ger företag skräddarsydda, skalbara lösningar. Därför bestämde vi oss för att utforska Payload CMS, ett headless CMS och applikationsramverk som blandar utvecklarkontroll med användarvänlig innehållshantering. Till skillnad från rigida plattformar som WordPress låter Payload oss definiera innehåll i kod och integreras sömlöst med Next.js för webbplatser, appar och verktyg. Vi byggde en minimal bloggplattform för att testa dess ekosystem och visa dess potential för startups och svenska företag som söker flexibla, GDPR-kompatibla innehållslösningar.

Vad är Payload CMS?

Payload CMS är ett headless CMS och applikationsramverk med öppen källkod, TypeScript-first, byggt med Node.js, React och MongoDB eller Postgres. Till skillnad från WordPress, som förlitar sig på förbyggda mallar, låter Payload utvecklare definiera innehållsscheman i kod, skapa REST- och GraphQL API:er och ett anpassningsbart admin-gränssnitt. Det integreras nativt med Next.js och körs i samma projekt för en enhetlig stack. Tänk på Payload som en backend-byggare: det är som att sätta ihop en anpassad databas och API med legoklossar, skräddarsydda för din apps behov, allt inom ett JavaScript/TypeScript-arbetsflöde. Dess MIT-licens håller det gratis för alla projekt.

Viktiga egenskaper inkluderar:

Payload Config: En TypeScript-fil för att definiera innehåll, autentisering och användargränssnitt.
Collections and Globals: Samlingar lagrar flera objekt (t.ex. blogginlägg), medan globaler lagrar enstaka inställningar (t.ex. webbplatsens titel).
APIs: Autogenererade REST-, GraphQL- och lokala API:er för snabb dataåtkomst.
Admin UI: En React-baserad dashboard för redaktörer, anpassningsbar med kod.
Authentication: Inbyggd inloggning och roller för användare, säkrade med JWT.
Database Support: Fungerar med MongoDB, Postgres m.fl. via adaptrar.

Varför det är relevant

Payload CMS förenar flexibilitet för utvecklare och användbarhet för innehållsredaktörer, till skillnad från traditionella CMS-plattformar som begränsar anpassningsmöjligheterna. Dess kod-först-strategi sparar tid och kostnader för företag och utvecklare.

For Företag: Payloads förbyggda API:er och autentisering minskar tiden för kodning av backend, vilket minskar kostnaderna för en blogg eller app från veckor till dagar. För svenska företag säkerställer den rollbaserade åtkomsten och schemakontrollen GDPR-kompatibel datahantering, perfekt för e-handel eller SaaS. Företag som Microsoft och ASICS använder Payload för skalbara innehållslösningar.
For Utvecklare: Payloads TypeScript-first-design och Next.js-integration passar vår JavaScript-expertis. Dess lokala API hämtar data direkt inom Next.js, vilket snabbar upp sidladdningar jämfört med externa API-anrop. X-inlägg kallar det ”en utvecklares dröm” för sitt rena dataflöde.
Branschtrender: Payloads 3.0-release 2024 ökade dess popularitet och tusentals projekt använde det för webbplatser och verktyg. Dess Next.js-fokus och växande community gör det till ett förstahandsval för moderna appar.

Vår provkörning

För att dyka in i Payload CMS:s ekosystem byggde vi en minimal bloggplattform med hjälp av Payload, Next.js och TypeScript. Vårt mål var att skapa en webbapp där användarna skapar inlägg, hanterar kategorier och får tillgång till innehåll via ett publikt API, och vi utforskade viktiga aspekter: schemadefinition, anpassning av administratörsgränssnittet, API-integration, autentisering och distribution. Plattformen erbjuder en flexibel lösning för innehållsdrivna företag som bloggar eller startup-webbplatser.

Projekt Uppsättning

Vi initierade ett Next.js-projekt med Payload

npx create-next-app@latest blog-platform --typescript
cd blog-platform
npm i payload @payloadcms/next @payloadcms/richtext-lexical @payloadcms/db-mongodb mongoose

Anmärkning: create-next-app inkluderar Next.js- och React-beroenden. Vi lade till Payload, dess Next.js-integration, Lexical rich-text editor och MongoDB-adapter. Vi kopierade Payloads mallfiler (payload.config.ts, payload-types.ts) till /src/app/(payload) och anslöt till en MongoDB Atlas-instans. I payload.config.ts konfigureras Payload:

import { buildConfig } from "payload";
import { mongooseAdapter } from "@payloadcms/db-mongodb";
import { lexicalEditor } from "@payloadcms/richtext-lexical";
import { Posts } from "./collections/Posts";
import { Categories } from "./collections/Categories";
import { Users } from "./collections/Users";

export default buildConfig({
  collections: [Posts, Categories, Users],
  editor: lexicalEditor(),
  db: mongooseAdapter({ url: process.env.MONGODB_URI }),
  typescript: { outputFile: "./payload-types.ts" },
});

Att köra npm run dev startade Next.js och Payloads admin UI på /admin, så att vi kan testa innehållsskapande.

Schema Definition

Scheman definierar appens datastruktur, som en plan för innehåll. Vi skapade två samlingar (Posts, Categories) och en Users-samling för autentisering. Samlingen Posts (collections/Posts.ts) definierade fält för blogginlägg:

import { CollectionConfig } from "payload";

export const Posts: CollectionConfig = {
  slug: "posts",
  admin: { defaultColumns: ["title", "category", "createdAt"] },
  fields: [
    { name: "title", type: "text", required: true },
    {
      name: "content",
      type: "richText",
      required: true,
      editor: lexicalEditor(),
    },
    {
      name: "category",
      type: "relationship",
      relationTo: "categories",
      required: true,
    },
    { name: "createdAt", type: "date", admin: { readOnly: true } },
  ],
};

Samlingen Categories var enklare:

import { CollectionConfig } from "payload";

export const Categories: CollectionConfig = {
  slug: "categories",
  fields: [{ name: "name", type: "text", required: true }],
};

Payload genererade TypeScript-gränssnitt i payload-types.ts, vilket säkerställer typsäkra förfrågningar och rendering.

Anpassning av Admin UI

Admin UI låter redaktörer hantera innehåll utan kodning. Vi anpassade det för att förbättra upplevelsen av att skapa inlägg genom att lägga till ett fält för förhandsgranskning av titeln (collections/Posts.ts):

import { Field } from "payload";

const TitlePreview: Field = {
  name: "titlePreview",
  type: "ui",
  admin: {
    components: {
      Field: ({ value }: { value?: string }) => (
        <div style={{ fontSize: "1.2em", color: "#333" }}>
          Preview: {value || "No title entered"}
        </div>
      ),
    },
  },
};

export const Posts: CollectionConfig = {
  slug: "posts",
  admin: { defaultColumns: ["title", "category", "createdAt"] },
  fields: [
    { name: "title", type: "text", required: true },
    TitlePreview,
    {
      name: "content",
      type: "richText",
      required: true,
      editor: lexicalEditor(),
    },
    {
      name: "category",
      type: "relationship",
      relationTo: "categories",
      required: true,
    },
    { name: "createdAt", type: "date", admin: { readOnly: true } },
  ],
};

Den lexikala redigeraren gav möjlighet till redigering av rik text och lagrade innehållet som JSON för flexibilitet. Vårt anpassade fält förbättrade redigerarens arbetsflöde med en förhandsgranskning i realtid.

API Integration

Payloads lokala API hämtar data inom Next.js, perfekt för snabb rendering på serversidan. I app/page.tsx visade vi inlägg:

import { getPayload } from "@payloadcms/next";
import { Post } from "../../payload-types";
import { renderRichText } from "@payloadcms/richtext-lexical";

export default async function Home() {
  const payload = await getPayload();
  const { docs: posts } = await payload.find({
    collection: "posts",
    sort: "-createdAt",
    depth: 1, // Populate category
  });

  return (
    <div style={{ padding: "20px" }}>
      <h1>Blog Platform</h1>
      {posts.map((post: Post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{(post.category as { name: string })?.name}</p>
          <div>{renderRichText(post.content)}</div>
        </article>
      ))}
    </div>
  );
}

Vi använde @payloadcms/richtext-lexical för att rendera JSON-innehållet från den lexikala redigeraren. Alternativet djup: 1 fyllde i category.name. Vi testade också REST API (/api/posts) för extern åtkomst, vilket bekräftade dess mångsidighet.

Autentisering

Vi har aktiverat användarautentisering för rollerna admin och editor (collections/Users.ts):

import { CollectionConfig } from "payload";

export const Users: CollectionConfig = {
  slug: "users",
  auth: true,
  fields: [
    { name: "name", type: "text", required: true },
    {
      name: "role",
      type: "select",
      options: ["admin", "editor"],
      required: true,
    },
  ],
};

Payloads JWT-baserade inloggning och rollbaserade åtkomst fungerade direkt från start. Vi anpassade inloggningssidan (app/(payload)/admin/page.tsx):

import { Login } from "@payloadcms/next";

export default function AdminLogin() {
  return (
    <div style={{ padding: "40px", textAlign: "center" }}>
      <h1>Ketryon Blog Admin</h1>
      <Login />
    </div>
  );
}

Detta säkrade administratörsgränssnittet och begränsade redaktörerna till inlägg och kategorier.

Lärdomar

Genom att bygga upp bloggplattformen lärde vi oss värdefulla saker om Payload CMS:s ekosystem:

Schema Definition: Att definiera samlingar i TypeScript var intuitivt, och payload-types.ts fångade upp fel tidigt, vilket sparade oss felsökningstid jämfört med JSON-baserade CMS-plattformar.
Admin UI: Att anpassa användargränssnittet med React-komponenter, som vår förhandsgranskning av titeln, var enkelt och ökade redaktörens produktivitet, men genom att planera anpassade fält i förväg undveks omarbetningar.
APIs: Det lokala API:ets hastighet förändrade vår Next.js-rendering och minskade sidladdningstiderna jämfört med externa REST-anrop. Test av REST- och GraphQL-API:er visade deras flexibilitet för appar som vänder sig till allmänheten.
Authentication: Payloads JWT-autentisering var plug-and-play och möjliggjorde säker administratörsåtkomst på bara några timmar, med rollbaserade kontroller i linje med GDPR-kraven för svenska kunder.
Deployment: Vercels integration förenklade hostingen och OTA-uppdateringar gör att vi kan justera admingränssnittet utan driftstopp, vilket är perfekt för snabb iteration.