James Vidler
VP of Product @ Agility CMS
JAMstack with Next.js +Agility CMS + Vercel
#Love2yourEX
NAVstack??
EX =
Editor Experience
About Me
Special Guest
@luis_fades
Luis Alvarez
Next.js Developer
Agility CMS
#CMSinthe6ix
Startup from the bottom...
Now we're here
About Agility CMS
- Only headless CMS, with built-in Page Management
-
Built by developers over the course of a decade
- Big enough for billion-dollar brands
- Small enough to care about each user
A Few of Our Customers...
Our Vision
A world where you NEVER have to rebuild your website from scratch!
We Believe
EX
DX
UX
- User Experience
- Editor Experience
- Developer Experience
Success Depends on:
What is Next.js?
What is Vercel?
Website, No CMS
| EX | UX | DX |
|---|---|---|
| 🤬 | 😎 | 😃 |
=😫
Website, Traditional CMS
Wordpress
Drupal
Sitecore
| EX | UX | DX |
|---|---|---|
| 🙂 | 😐 | 😒 |
=🤔
PHP
ASP.NET
Website, Headless CMS + JAMstack
| EX | UX | DX |
|---|---|---|
| 😕 | 🤩 | 😁 |
=😔
Contentful
Gatsby
Next.js
Prismic
What's Wrong with the EX in JAMstack?
Top 5 Editor Complaints
- 👁🗨 Can't preview content updates in real-time
- 🚫 Limited control over creating, deleting and redirecting pages
- 📄 Limited control over what content is on each page
- 😖 Inconsistent and in-efficient content workflows
- Publishing content takes too long, don't understand concepts of builds
- 🤼 They feel powerless...
We can do Better!
Here's How...
- 👀 Give them a Preview environment
- 🎁 Give the gift of Page Management
- 🚀Publish content Faster
NAVStack! 🦸♀️
Next.js Starter Site Signup
Deploy + Setup Preview
https://vercel.com/import/git?c=1&s=https://github.com/agility/agilitycms-nextjs-starter-2020&env=AGILITY_GUID,AGILITY_API_FETCH_KEY,AGILITY_API_PREVIEW_KEY,AGILITY_SECURITY_KEY&envDescription=API%20Keys%20required%20by%20Agility%20CMS&
Setup Domain and Preview Config in Agility CMS
Preview Demo - Wait isn't this a static site?
fallback: true?
revalidate?
/some-page-request
Is Preview?
Yes, run route as serverless function (runtime)
No, return cached/generated HTML
What is Page Management?
What Isn't Page Management...
When devs dictate pages:
What Isn't Page Management...
When devs dictate what is on a page:
💬 You can only build certain types of pages, with pre-defined layouts
Why?
Editors feel constrained...
Put yourself in their shoes 👞...
💡 Same reason WHY devs don't like Traditional CMS 🤮
Still not Convinced?
This will be you...
Responding to Change Requests
🛑 Stop Building Websites.
Build Tools.
+
👨🏿👱🏻♀️
Editors
=
Components
Page
Agility CMS Content Methodology
We believe there are two types of content...
Page Properties
- Title, URL Slug, and other SEO properties
- Page Template
- Content Zones - {} object
- Modules - [] array
-- Fields - {} object
Page Templates
Defined in Agility CMS, but corresponds to a React Component in your code
Defines the Content Zones of where editors can control what is on the Page
Content Zone
The area(s) on a Page that will be dynamically controlled by the editor
Modules
The functional components that make up a Page
Modules can have their own fields but can also link to any other content (i.e. Blog Posts)
Modules
They are defined in Agility CMS, but correspond to a React Component in your code
Modules
Props are automatically passed to your React Component based on your fields 🧙♂️
Running it Locally
Agility CMS Next.js Starter
- Connected to a sample Agility CMS instance to get content and pages
- Uses the getStaticProps function from Next.js to allow for full static site generation
- Supports full page management
- Supports preview mode
- Uses revalidate tag with Vercel to enable incremental static builds
Build Modules, not Websites.👍
Learn More 🎓
- Sign up for a free account
- Follow @AgilityCMS
- Upcoming Events 🎉:
Agility Days: Giving ❤ to the EX for JAMstack Sites w/ Vercel + Agility CMS
By James Vidler
