14 листопада 2025 р.

Інтеграція Neobrutalism з Payload CMS

UI-бібліотеки здатні помітно пришвидшити вашу розробку. У цій статті розбираємо 5 найкращих для вашого наступного React-проєкту.

Dov Azencot

@DovAzencot

Поділитися в X

Практичний посібник від початку до кінця, як підключити Payload CMS як бекенд для контенту й Neobrutalism як набір компонентів фронтенду, а потім випустити чистий необруталістський список статей у Next.js.

Результат чудовий, якщо ваш стек — Next.js + TailwindCSS. Payload нативний для Next, а Neobrutalism орієнтований на Tailwind, тож разом вони складаються ідеально.

Що ви побудуєте

Застосунок Payload CMS із колекцією Posts
Фронтенд на Next.js, що отримує статті з REST API Payload
Сторінку /blog, що відображає адаптивний список за допомогою компонентів Neobrutalism (Cards, Badges, Buttons)

Попередні вимоги

Node.js 20.9+ (Payload вимагає Node 20.9 або новішу)
Next.js 15+ для фронтенду (Payload нативний для Next)
Будь-яку сумісну БД: SQLite (dev), Postgres або MongoDB

Порада: для локальної розробки SQLite — найшвидший шлях. Під час деплою переходьте на Postgres/Mongo.

Частина 1 — Налаштовуємо Payload CMS

Ви можете додати Payload до наявного застосунку Next.js або згенерувати новий. Тут ми згенеруємо окремий проєкт Payload, щоб його API лишався чистим і переносним.

1) Створюємо новий застосунок Payload


pnpm create payload-app
# Follow the prompts: choose a template (blank or blog), set DB (SQLite for dev), etc.
cd <your-payload-app>
pnpm dev  # or npm run dev / yarn dev
npx create-payload-app
# Follow the prompts: choose a template (blank or blog), set DB (SQLite for dev), etc.
cd <your-payload-app>
pnpm dev  # or npm run dev / yarn dev
yarn create payload-app
# Follow the prompts: choose a template (blank or blog), set DB (SQLite for dev), etc.
cd <your-payload-app>
pnpm dev  # or npm run dev / yarn dev
bunx --bun create-payload-app
# Follow the prompts: choose a template (blank or blog), set DB (SQLite for dev), etc.
cd <your-payload-app>
pnpm dev  # or npm run dev / yarn dev

Це запускає Payload і його адмін-інтерфейс (зазвичай за адресою http://localhost:3000/admin).

2) Визначаємо колекцію Posts

Створіть src/collections/Posts.ts:

import { CollectionConfig } from 'payload/types';
 
const Posts: CollectionConfig = {
  slug: 'posts',
  admin: {
    useAsTitle: 'title',
    defaultColumns: ['title', 'publishedAt', 'status'],
  },
  access: {
    read: () => true, // public read access for blog
  },
  fields: [
    {
      name: 'title',
      type: 'text',
      required: true,
    },
    {
      name: 'slug',
      type: 'text',
      required: true,
      unique: true,
    },
    {
      name: 'excerpt',
      type: 'textarea',
    },
    {
      name: 'coverImage',
      type: 'upload',
      relationTo: 'media',
    },
    {
      name: 'status',
      type: 'select',
      options: [
        { label: 'Draft', value: 'draft' },
        { label: 'Published', value: 'published' },
      ],
      defaultValue: 'draft',
      required: true,
    },
    {
      name: 'publishedAt',
      type: 'date',
      admin: { position: 'sidebar' },
    },
    {
      name: 'content',
      type: 'richText',
    },
  ],
};
 
export default Posts;

Додайте її до основної конфігурації src/payload.config.ts:

import { buildConfig } from 'payload/config';
import Posts from './collections/Posts';
 
export default buildConfig({
  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
  admin: { user: 'users' },
  collections: [
    Posts,
    // Media and Users collections if you need them
  ],
});

Якщо у вас ще немає колекцій Media чи Users, запустіть create-payload-app із шаблоном блогу або додайте прості колекції для завантажень і автентифікації пізніше.

3) Наповнюємо кількома статтями

Відкрийте адмін-інтерфейс → Posts → Create New і додайте кілька опублікованих статей із минулими датами publishedAt.

4) Перевіряємо, що REST API працює

Payload за замовчуванням надає REST API за адресою /api/<collection>.

Перейдіть за адресою:

http://localhost:3000/api/posts?limit=10&sort=-publishedAt&where[status][equals]=published

Ви маєте побачити JSON із вашими статтями.

Під час деплою задайте PAYLOAD_PUBLIC_SERVER_URL і змінні середовища вашої БД. Якщо ви розміщуєте Payload окремо від Next.js, увімкніть CORS для джерела вашого фронтенду.

Частина 2 — Налаштовуємо фронтенд Next.js + Neobrutalism

Ми побудуємо застосунок Next.js, що споживає REST API Payload і відображає список статей за допомогою компонентів Neobrutalism.

1) Створюємо застосунок Next.js


pnpm create next-app@latest retroui-payload-blog
cd retroui-payload-blog
npx create-next-app@latest retroui-payload-blog
cd retroui-payload-blog
yarn create next-app@latest retroui-payload-blog
cd retroui-payload-blog
bunx --bun create-next-app@latest retroui-payload-blog
cd retroui-payload-blog

2) Встановлюємо TailwindCSS (якщо ви не обрали шаблон Tailwind)

pnpm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Додайте ./components/**/*.{ts,tsx} і ./app/**/*.{ts,tsx} у поле content файлу tailwind.config.ts. Також додайте шляхи Neobrutalism, якщо цього вимагає інсталятор.

3) Встановлюємо Neobrutalism

Використайте офіційний інсталятор (CLI) або ручне встановлення. Приклад (pnpm):

pnpm add retroui

Потім імпортуйте компоненти там, де вони потрібні. (Якщо в Neobrutalism є CLI для копіювання компонентів, запустіть її тут і дотримуйтеся підказок.)

4) Підключаємося до Payload (env + помічник fetch)

Створіть .env.local:

NEXT_PUBLIC_PAYLOAD_BASE_URL=http://localhost:3000

Додайте невелику утиліту fetch lib/payload.ts:

export type Post = {
  id: string;
  title: string;
  slug: string;
  excerpt?: string;
  coverImage?: { url: string; filename: string } | string | null;
  status: 'draft' | 'published';
  publishedAt?: string | null;
};
 
export async function getPublishedPosts(limit = 12) {
  const base = process.env.NEXT_PUBLIC_PAYLOAD_BASE_URL;
  const url = new URL('/api/posts', base);
  url.searchParams.set('limit', String(limit));
  url.searchParams.set('sort', '-publishedAt');
  url.searchParams.set('where[status][equals]', 'published');
 
  const res = await fetch(url.toString(), { next: { revalidate: 60 } });
  if (!res.ok) throw new Error(`Failed to fetch posts: ${res.status}`);
  const data = await res.json();
  return data.docs as Post[];
}

5) Будуємо сторінку списку статей із Neobrutalism

Створіть app/blog/page.tsx (App Router):

import Image from 'next/image';
import Link from 'next/link';
import { getPublishedPosts, type Post } from '@/lib/payload';
 
// Example Neobrutalism components — adjust paths/names per your install
import { Card } from 'neobrutalism/card';
import { Button } from 'neobrutalism/button';
import { Badge } from 'neobrutalism/badge';
 
export const revalidate = 60; // ISR cadence
 
export default async function BlogListPage() {
  const posts = await getPublishedPosts(12);
 
  return (
    <main className="container mx-auto px-4 py-10">
      <h1 className="text-4xl font-extrabold mb-6">Blog</h1>
      <p className="text-muted-foreground mb-10">
        Latest posts from the Payload CMS backend, styled with Neobrutalism.
      </p>
 
      <section className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <Card key={post.id} className="p-0 overflow-hidden">
            {typeof post.coverImage === 'object' && post.coverImage?.url ? (
              <div className="relative h-44 w-full">
                <Image
                  src={post.coverImage.url}
                  alt={post.title}
                  fill
                  className="object-cover"
                />
              </div>
            ) : null}
 
            <div className="p-5 space-y-3">
              <div className="flex items-center gap-2">
                <Badge variant="outline">Article</Badge>
                {post.publishedAt ? (
                  <span className="text-xs opacity-70">
                    {new Date(post.publishedAt).toLocaleDateString()}
                  </span>
                ) : null}
              </div>
 
              <h2 className="text-2xl font-bold leading-tight">
                <Link href={`/blog/${post.slug}`}>{post.title}</Link>
              </h2>
 
              {post.excerpt ? (
                <p className="text-sm text-muted-foreground line-clamp-3">
                  {post.excerpt}
                </p>
              ) : null}
 
              <div className="pt-2">
                <Button asChild>
                  <Link href={`/blog/${post.slug}`}>Read more</Link>
                </Button>
              </div>
            </div>
          </Card>
        ))}
      </section>
    </main>
  );
}

Якщо ваш пакет Neobrutalism надає інші імена чи шляхи імпорту, підправте рядки import { Card } from 'neobrutalism/card' під них. Ви також можете замінити їх будь-якими іншими компонентами Neobrutalism (Tabs, Inputs тощо).

6) Сторінка деталей статті (необов'язково)

Створіть app/blog/[slug]/page.tsx:

import Image from 'next/image';
import Link from 'next/link';
 
async function getPost(slug: string) {
  const base = process.env.NEXT_PUBLIC_PAYLOAD_BASE_URL!;
  const url = new URL('/api/posts', base);
  url.searchParams.set('limit', '1');
  url.searchParams.set('where[slug][equals]', slug);
  const res = await fetch(url.toString(), { next: { revalidate: 60 } });
  if (!res.ok) throw new Error('Failed to load post');
  const data = await res.json();
  return data.docs[0];
}
 
export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  if (!post) return <div className="p-10">Not found</div>;
 
  return (
    <article className="container mx-auto px-4 py-10 max-w-3xl">
      <Link href="/blog" className="underline">← Back to blog</Link>
      <h1 className="text-4xl font-extrabold mt-3">{post.title}</h1>
      {post.coverImage?.url ? (
        <div className="relative h-80 w-full my-6">
          <Image src={post.coverImage.url} alt={post.title} fill className="object-cover" />
        </div>
      ) : null}
      {post.content?.root ? (
        // If using Payload Lexical richText renderer, render here
        <div className="prose prose-neutral dark:prose-invert">
          {/* Render your rich text */}
        </div>
      ) : (
        post.excerpt ? <p className="mt-4 text-lg">{post.excerpt}</p> : null
      )}
    </article>
  );
}

Для форматованого тексту використайте бажаний рендерер Payload (наприклад, @payloadcms/richtext-lexical) і рендеріть відповідно.

Частина 3 — Нотатки про cross-origin і деплой

Якщо ваш застосунок Next.js працює на джерелі, відмінному від Payload:

Увімкніть CORS у Payload: задайте cors: ["https://your-next-app.com", "http://localhost:3000"] у payload.config.ts.
Коректно налаштуйте serverURL (і PAYLOAD_PUBLIC_SERVER_URL), щоб URL зображень розв'язувалися.
Захистіть чернетки: вище ми дозволили публічний read. Для приватного контенту замініть його функцією access.read, що перевіряє автентифікацію й ролі.

Варіанти деплою:

Власний хостинг (Node-застосунок на VPS) або деплой на Vercel/Cloudflare заради сучасного DX.
Використовуйте SQLite для швидких демо, Postgres/Mongo для продакшену.

Частина 4 — Покращення

Пошук і фільтри: використовуйте параметри запиту Payload (наприклад, where[title][like]) і підключіть Input + Tabs із Neobrutalism для фільтрації.
Пагінація: REST API повертає totalDocs, limit, page; побудуйте «Завантажити ще» за допомогою Button із Neobrutalism.
Зображення: перенесіть coverImage в окрему колекцію Media й використовуйте адаптер завантажень Payload.
Режим попереднього перегляду: налаштуйте в Next.js маршрут попереднього перегляду чернеток, що отримує дані із заголовками автентифікації для чернеток.
GraphQL: Payload також надає GraphQL; використовуйте його, якщо віддаєте перевагу типізованим запитам.

Усунення несправностей

Помилки CORS: перевірте конфігурацію cors і переконайтеся, що serverURL задано.
Зображення не відображаються: підтвердіть url, що повертається для завантажень, і що next.config.js у Next.js дозволяє домен Payload у images.domains.
Нічого не рендериться: перевірте URL для fetch у lib/payload.ts. Переконайтеся, що записи існують і що їхній status — published.

Підсумок

Тепер у вас є:

Застосунок Payload CMS, що віддає статті через REST
Сайт на Next.js зі стилями Neobrutalism
Сторінка /blog, що перелічує статті й посилається на кожну з них

Далі додавайте авторів, категорії й теги; оформлюйте іншими компонентами Neobrutalism — і випускайте.

← Назад до статей

Інтеграція Neobrutalism з Payload CMS

Що ви побудуєте

Попередні вимоги

Частина 1 — Налаштовуємо Payload CMS

1) Створюємо новий застосунок Payload

2) Визначаємо колекцію Posts

3) Наповнюємо кількома статтями

4) Перевіряємо, що REST API працює

Частина 2 — Налаштовуємо фронтенд Next.js + Neobrutalism

1) Створюємо застосунок Next.js

2) Встановлюємо TailwindCSS (якщо ви не обрали шаблон Tailwind)

3) Встановлюємо Neobrutalism

4) Підключаємося до Payload (env + помічник fetch)

5) Будуємо сторінку списку статей із Neobrutalism

6) Сторінка деталей статті (необов'язково)

Частина 3 — Нотатки про cross-origin і деплой

Частина 4 — Покращення

Усунення несправностей

Підсумок

Топ-5 UI-бібліотек для React у 2025 році

Топ-8 бібліотек анімації для React у 2026 році

Топ-10 UI-бібліотек для TanStack у 2026 році

Інтеграція Neobrutalism з Payload CMS

Що ви побудуєте

Попередні вимоги

Частина 1 — Налаштовуємо Payload CMS

1) Створюємо новий застосунок Payload

2) Визначаємо колекцію Posts

3) Наповнюємо кількома статтями

4) Перевіряємо, що REST API працює

Частина 2 — Налаштовуємо фронтенд Next.js + Neobrutalism

1) Створюємо застосунок Next.js

2) Встановлюємо TailwindCSS (якщо ви не обрали шаблон Tailwind)

3) Встановлюємо Neobrutalism

4) Підключаємося до Payload (env + помічник fetch)

5) Будуємо сторінку списку статей із Neobrutalism

6) Сторінка деталей статті (необов'язково)

Частина 3 — Нотатки про cross-origin і деплой

Частина 4 — Покращення

Усунення несправностей

Підсумок

Читайте також

Топ-5 UI-бібліотек для React у 2025 році

Топ-8 бібліотек анімації для React у 2026 році

Топ-10 UI-бібліотек для TanStack у 2026 році