Skip to content

Latest commit

 

History

History
59 lines (38 loc) · 1.9 KB

README.md

File metadata and controls

59 lines (38 loc) · 1.9 KB

Magnolia Vercel Integration

This powerful synergy brings together Vercel's seamless deployment and scaling capabilities with Magnolia's robust full-page editing experience for Next.js projects.

How to use

Execute create-next-app with npm, Yarn, pnpm, or Bun to bootstrap the example:

npx create-next-app --example cms-magnolia cms-magnolia-app
yarn create next-app --example cms-magnolia cms-magnolia-app
pnpm create next-app --example cms-magnolia cms-magnolia-app
bunx create-next-app --example cms-magnolia cms-magnolia-app

Deploy it to the cloud with Vercel (Documentation).

Pages and Components

The demo contains:

  • Basic page template

  • Contact page template

  • Header component

  • Paragraph component

  • Image component

  • List component

  • Item component (available inside List component)

  • Expander component

  • Navigation component

DAM

In order for images to be displayed: Open the Security app, open the Roles tab, edit the rest-anonymous role, go to Web access tab, Add new with this path /dam/* set to GET.

In Access control lists tab modify Dam workspace by allowing Read-only access to Selected and sub nodes to /.

Next.js SSR

You will need to create a root page with the Next.js SSR: Basic template and name it vercel-demo.

Manually:

Open the Pages app in Magnolia and click Add Page add either

  • A Next.js SSR: Basic template and name it vercel-demo

The page name is important as the SPA's are hardcoded to treat those names as the base of the app.