Nextjs Templates & Themes Logo Nextjs Templates & Themes
Next Payload Monorepo screenshot

Next Payload Monorepo

Author Avatar Theme by Infonomic
Updated: 20 Jun 2023
33 Stars

Next.js 13 App Router Payload CMS Monorepo

Github

Categories

Payloadcms

Overview

The Next.js 13 App Router Payload CMS Monorepo is a starter project that combines Next.js, Payload CMS, pnpm, and Turbo monorepo. It provides a seamless integration of Payload CMS with a Next.js application. The admin panel for Payload CMS appears under the Next.js application as /admin, and the Payload API endpoint can be accessed under /api. The project includes various features such as Next.js 13 with App Router and custom Next.js server integration, shared packages for Tailwind CSS, ESLint, and a custom UI kit. It also includes a MongoDB example configuration for easy setup and a configured Storybook installation with a dark theme switcher for Tailwind CSS.

Features

  • Next.js 13 with App Router and custom Next.js server with Payload CMS integration
  • Shared packages for Tailwind CSS, ESLint, and a custom UI kit
  • Configured Storybook installation with dark theme switcher for Tailwind CSS
  • MongoDB example docker-compose.yml configuration for easy setup

Installation

  1. Clone the repository.
  2. Copy the app/server/.env_example file to app/server/.env.
  3. Generate the Payload CMS secret session key by running node apps/server/generatePayloadSecret.js and update the .env file with the generated key.
  4. Optionally, start your local MongoDB database using Docker.
  5. Install pnpm if not already installed.
  6. In the project root, run pnpm install to install dependencies.
  7. Run pnpm dev to start the server and development environment, or pnpm dev:seed to start with a seeded Payload CMS including an admin and guest user.
  8. To run a production build, run pnpm build followed by pnpm serve.
  9. To clean up build artifacts and node_modules, run pnpm clean.
  10. Use http://localhost:3000 and http://localhost:3000/admin instead of 127.0.0.1 to prevent CORS errors in Payload CMS admin.

Summary

The Next.js 13 App Router Payload CMS Monorepo is a powerful starter project that combines the benefits of Next.js, Payload CMS, pnpm, and Turbo monorepo. It provides a seamless integration of Payload CMS with a Next.js application, allowing developers to easily build and manage content-driven websites. The project includes key features such as Next.js 13 with App Router and custom Next.js server integration, shared packages for Tailwind CSS and ESLint, and a configured Storybook installation for UI development. With the MongoDB example configuration and easy installation steps, developers can quickly set up a local environment to start building their applications. Overall, this starter project offers a comprehensive solution for building robust and flexible web applications with Next.js and Payload CMS.